126 files changed, 6467 insertions, 4738 deletions
diff --git a/.stylelintrc.json b/.stylelintrc.json
index c00dafa..0b9d42a 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -4,7 +4,7 @@
        "stylelint-config-recess-order"
    ],
    "rules": {
-        "@stylistic/indentation": 4,
+        "@stylistic/indentation": "tab",
        "@stylistic/number-leading-zero": "never",
        "@stylistic/declaration-colon-space-after": null,
        "max-nesting-depth": 7,
diff --git a/package.json b/package.json
index ff42d59..a9d4cec 100644
--- a/package.json
+++ b/package.json
@@ -12,26 +12,28 @@
        "build": "npm run build:app && npm run build:style && npm run build:icons && npm run build:assets",
        "build:assets": "cp -r static/* public/",
        "build:app": "pug tpl/index.pug -p tpl --out public/",
-        "build:icons": "node node_modules/iro-icons/scripts/create_sprite.js image video volume-2 arrow-right check trash bookmark cog logout tags lock user chevron-left chevron-right hash x send smile repeat heart star arrow-corner-down-left public/icons.svg",
+        "build:icons": "node node_modules/iro-icons/scripts/create_sprite.js image video volume-2 arrow-right arrow-left check trash bookmark cog logout tags lock user chevron-left chevron-right hash x send smile repeat heart star arrow-corner-down-left public/icons.svg",
        "build:style": "sass --load-path=node_modules src_demo/index.scss public/style.css",
        "lint:style": "stylelint \"src/**/*.scss\"",
        "fix:style": "stylelint \"src/**/*.scss\" --fix",
-        "serve": "python -m http.server --bind 127.0.0.1 --directory public 8001"
+        "serve": "python -m http.server --bind 127.0.0.1 --directory public 8001",
+        "watch": "nodemon --watch src --watch src_demo --watch tpl -e scss,pug --exec pnpm build"
    },
    "dependencies": {
-        "include-media": "^2.0.0",
+        "include-media": "git+https://github.com/eduardoboucas/include-media.git",
-        "iro-sass": "git+https://git.vulpes.one/git/iro-sass.git#351814a60e8909814c7120db96314a1a25d962bd"
+        "iro-sass": "git+https://git.vulpes.one/git/iro-sass.git#9df4a41f916389715d505730268459326068e9b6",
+        "nodemon": "^3.1.11"
    },
    "devDependencies": {
        "iro-icons": "git+https://git.vulpes.one/git/iro-icons.git#8b921f634a565fd9bb8f6e0ddb1b4d7ba207c0a0",
        "postcss-scss": "^4.0.6",
        "pug": "^3.0.3",
        "pug-cli": "^1.0.0-alpha6",
-        "sass": "^1.79.4",
+        "sass": "^1.97.3",
-        "stylelint": "^16.9.0",
+        "stylelint": "^17.0.0",
-        "stylelint-config-recess-order": "^5.1.1",
+        "stylelint-config-recess-order": "^7.6.0",
        "stylelint-config-sass-guidelines": "^12.1.0",
-        "stylelint-order": "^6.0.4",
+        "stylelint-order": "^7.0.1",
        "svg-sprite": "^2.0.4"
    }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index da001c6..f940590 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9,18 +9,21 @@ importers:
  .:
    dependencies:
      include-media:
-        specifier: ^2.0.0
+        specifier: git+https://github.com/eduardoboucas/include-media.git
-        version: 2.0.0
+        version: https://codeload.github.com/eduardoboucas/include-media/tar.gz/423e815c8ed041e43184657e2acf03608f55a854
      iro-sass:
-        specifier: git+https://git.vulpes.one/git/iro-sass.git#351814a60e8909814c7120db96314a1a25d962bd
+        specifier: git+https://git.vulpes.one/git/iro-sass.git#9df4a41f916389715d505730268459326068e9b6
-        version: git+https://git.vulpes.one/git/iro-sass.git#351814a60e8909814c7120db96314a1a25d962bd
+        version: git+https://git.vulpes.one/git/iro-sass.git#9df4a41f916389715d505730268459326068e9b6
+      nodemon:
+        specifier: ^3.1.11
+        version: 3.1.11
    devDependencies:
      iro-icons:
        specifier: git+https://git.vulpes.one/git/iro-icons.git#8b921f634a565fd9bb8f6e0ddb1b4d7ba207c0a0
        version: git+https://git.vulpes.one/git/iro-icons.git#8b921f634a565fd9bb8f6e0ddb1b4d7ba207c0a0(svg-sprite@2.0.4)
      postcss-scss:
        specifier: ^4.0.6
-        version: 4.0.9(postcss@8.4.38)
+        version: 4.0.9(postcss@8.5.6)
      pug:
        specifier: ^3.0.3
        version: 3.0.3
@@ -28,28 +31,28 @@ importers:
        specifier: ^1.0.0-alpha6
        version: 1.0.0-alpha6
      sass:
-        specifier: ^1.79.4
+        specifier: ^1.97.3
-        version: 1.79.4
+        version: 1.97.3
      stylelint:
-        specifier: ^16.9.0
+        specifier: ^17.0.0
-        version: 16.9.0
+        version: 17.0.0
      stylelint-config-recess-order:
-        specifier: ^5.1.1
+        specifier: ^7.6.0
-        version: 5.1.1(stylelint@16.9.0)
+        version: 7.6.0(stylelint-order@7.0.1(stylelint@17.0.0))(stylelint@17.0.0)
      stylelint-config-sass-guidelines:
        specifier: ^12.1.0
-        version: 12.1.0(postcss@8.4.38)(stylelint@16.9.0)
+        version: 12.1.0(postcss@8.5.6)(stylelint@17.0.0)
      stylelint-order:
-        specifier: ^6.0.4
+        specifier: ^7.0.1
-        version: 6.0.4(stylelint@16.9.0)
+        version: 7.0.1(stylelint@17.0.0)
      svg-sprite:
        specifier: ^2.0.4
        version: 2.0.4
 packages:
-  '@babel/code-frame@7.25.7':
+  '@babel/code-frame@7.28.6':
-    resolution: {integrity: sha512-0xZJFNE5XMpENsgfHYTw8FbX4kv53mFLn2i3XPoq69LyhYSCBJtitaHx9QnsVTrsogI4Z3+HtEfZ2/GFPOtf5g==}
+    resolution: {integrity: sha512-JYgintcMjRiCvS8mMECzaEn+m3PfoQiyqukOMCCVQtoJGYJw8j/8LBJEiqkHLkfwCcs74E3pbAUFNg7d9VNJ+Q==}
    engines: {node: '>=6.9.0'}
  '@babel/helper-string-parser@7.24.7':
@@ -60,12 +63,8 @@ packages:
    resolution: {integrity: sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==}
    engines: {node: '>=6.9.0'}
-  '@babel/helper-validator-identifier@7.25.7':
+  '@babel/helper-validator-identifier@7.28.5':
-    resolution: {integrity: sha512-AM6TzwYqGChO45oiuPqwL2t20/HdMC1rTPAesnBCgPCSF1x3oN9MVUwQV2iyz4xqWrctwK5RNC8LV22kaQCNYg==}
+    resolution: {integrity: sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==}
-    engines: {node: '>=6.9.0'}
-  '@babel/highlight@7.25.7':
-    resolution: {integrity: sha512-iYyACpW3iW8Fw+ZybQK+drQre+ns/tKpXbNESfrhNnPLIklLbXr7MYJ6gPEd0iETGLOK+SxMjVvKb/ffmk+FEw==}
    engines: {node: '>=6.9.0'}
  '@babel/parser@7.24.7':
@@ -77,6 +76,12 @@ packages:
    resolution: {integrity: sha512-XEFXSlxiG5td2EJRe8vOmRbaXVgfcBlszKujvVmWIK/UpywWljQCfzAv3RQCGujWQ1RD4YYWEAqDXfuJiy8f5Q==}
    engines: {node: '>=6.9.0'}
+  '@cacheable/memory@2.0.7':
+    resolution: {integrity: sha512-RbxnxAMf89Tp1dLhXMS7ceft/PGsDl1Ip7T20z5nZ+pwIAsQ1p2izPjVG69oCLv/jfQ7HDPHTWK0c9rcAWXN3A==}
+  '@cacheable/utils@2.3.3':
+    resolution: {integrity: sha512-JsXDL70gQ+1Vc2W/KUFfkAJzgb4puKwwKehNLuB+HrNKWf91O736kGfxn4KujXCCSuh6mRRL4XEB0PkAFjWS0A==}
  '@colors/colors@1.6.0':
    resolution: {integrity: sha512-Ir+AOibqzrIsL6ajt3Rz3LskB7OiMVHqltZmspbW/TJuTVuyOMirVqAkjfY6JISiLHgyNqicAC8AyHHGzNd/dA==}
    engines: {node: '>=0.1.90'}
@@ -87,10 +92,23 @@ packages:
    peerDependencies:
      '@csstools/css-tokenizer': ^3.0.1
+  '@csstools/css-parser-algorithms@4.0.0':
+    resolution: {integrity: sha512-+B87qS7fIG3L5h3qwJ/IFbjoVoOe/bpOdh9hAjXbvx0o8ImEmUsGXN0inFOnk2ChCFgqkkGFQ+TpM5rbhkKe4w==}
+    engines: {node: '>=20.19.0'}
+    peerDependencies:
+      '@csstools/css-tokenizer': ^4.0.0
+  '@csstools/css-syntax-patches-for-csstree@1.0.26':
+    resolution: {integrity: sha512-6boXK0KkzT5u5xOgF6TKB+CLq9SOpEGmkZw0g5n9/7yg85wab3UzSxB8TxhLJ31L4SGJ6BCFRw/iftTha1CJXA==}
  '@csstools/css-tokenizer@3.0.1':
    resolution: {integrity: sha512-UBqaiu7kU0lfvaP982/o3khfXccVlHPWp0/vwwiIgDF0GmqqqxoiXC/6FCjlS9u92f7CoEz6nXKQnrn1kIAkOw==}
    engines: {node: '>=18'}
+  '@csstools/css-tokenizer@4.0.0':
+    resolution: {integrity: sha512-QxULHAm7cNu72w97JUNCBFODFaXpbDg+dP8b/oWFAZ2MTRppA3U00Y2L1HqaS4J6yBqxwa/Y3nMBaxVKbB/NsA==}
+    engines: {node: '>=20.19.0'}
  '@csstools/media-query-list-parser@3.0.1':
    resolution: {integrity: sha512-HNo8gGD02kHmcbX6PvCoUuOQvn4szyB9ca63vZHKX5A81QytgDG4oxG4IaEfHTlEZSZ6MjPEMWIVU+zF2PZcgw==}
    engines: {node: '>=18'}
@@ -98,17 +116,36 @@ packages:
      '@csstools/css-parser-algorithms': ^3.0.1
      '@csstools/css-tokenizer': ^3.0.1
-  '@csstools/selector-specificity@4.0.0':
+  '@csstools/media-query-list-parser@5.0.0':
-    resolution: {integrity: sha512-189nelqtPd8++phaHNwYovKZI0FOzH1vQEE3QhHHkNIGrg5fSs9CbYP3RvfEH5geztnIA9Jwq91wyOIwAW5JIQ==}
+    resolution: {integrity: sha512-T9lXmZOfnam3eMERPsszjY5NK0jX8RmThmmm99FZ8b7z8yMaFZWKwLWGZuTwdO3ddRY5fy13GmmEYZXB4I98Eg==}
-    engines: {node: '>=18'}
+    engines: {node: '>=20.19.0'}
    peerDependencies:
-      postcss-selector-parser: ^6.1.0
+      '@csstools/css-parser-algorithms': ^4.0.0
+      '@csstools/css-tokenizer': ^4.0.0
+  '@csstools/selector-resolve-nested@4.0.0':
+    resolution: {integrity: sha512-9vAPxmp+Dx3wQBIUwc1v7Mdisw1kbbaGqXUM8QLTgWg7SoPGYtXBsMXvsFs/0Bn5yoFhcktzxNZGNaUt0VjgjA==}
+    engines: {node: '>=20.19.0'}
+    peerDependencies:
+      postcss-selector-parser: ^7.1.1
+  '@csstools/selector-specificity@6.0.0':
+    resolution: {integrity: sha512-4sSgl78OtOXEX/2d++8A83zHNTgwCJMaR24FvsYL7Uf/VS8HZk9PTwR51elTbGqMuwH3szLvvOXEaVnqn0Z3zA==}
+    engines: {node: '>=20.19.0'}
+    peerDependencies:
+      postcss-selector-parser: ^7.1.1
  '@dabh/diagnostics@2.0.3':
    resolution: {integrity: sha512-hrlQOIi7hAfzsMqlGSFyVucrx38O+j6wiGOf//H2ecvIEqYN4ADBSS2iLMh5UFyDunCNniUIPk/q3riFv45xRA==}
-  '@dual-bundle/import-meta-resolve@4.1.0':
+  '@keyv/bigmap@1.3.1':
-    resolution: {integrity: sha512-+nxncfwHM5SgAtrVzgpzJOI1ol0PkumhVo469KCf9lUi21IGcY90G98VuHm9VRrUypmAzawAHO9bs6hqeADaVg==}
+    resolution: {integrity: sha512-WbzE9sdmQtKy8vrNPa9BRnwZh5UF4s1KTmSK0KUVLo3eff5BlQNNWDnFOouNpKfPKDnms9xynJjsMYjMaT/aFQ==}
+    engines: {node: '>= 18'}
+    peerDependencies:
+      keyv: ^5.6.0
+  '@keyv/serialize@1.1.1':
+    resolution: {integrity: sha512-dXn3FZhPv0US+7dtJsIi2R+c7qWYiReoEh5zUntWCf4oSpMNib8FDhSoed6m3QyZdx5hK7iLFkYk3rNxwt8vTA==}
  '@nodelib/fs.scandir@2.1.5':
    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
@@ -122,6 +159,88 @@ packages:
    resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
    engines: {node: '>= 8'}
+  '@parcel/watcher-android-arm64@2.5.6':
+    resolution: {integrity: sha512-YQxSS34tPF/6ZG7r/Ih9xy+kP/WwediEUsqmtf0cuCV5TPPKw/PQHRhueUo6JdeFJaqV3pyjm0GdYjZotbRt/A==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [android]
+  '@parcel/watcher-darwin-arm64@2.5.6':
+    resolution: {integrity: sha512-Z2ZdrnwyXvvvdtRHLmM4knydIdU9adO3D4n/0cVipF3rRiwP+3/sfzpAwA/qKFL6i1ModaabkU7IbpeMBgiVEA==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+  '@parcel/watcher-darwin-x64@2.5.6':
+    resolution: {integrity: sha512-HgvOf3W9dhithcwOWX9uDZyn1lW9R+7tPZ4sug+NGrGIo4Rk1hAXLEbcH1TQSqxts0NYXXlOWqVpvS1SFS4fRg==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [darwin]
+  '@parcel/watcher-freebsd-x64@2.5.6':
+    resolution: {integrity: sha512-vJVi8yd/qzJxEKHkeemh7w3YAn6RJCtYlE4HPMoVnCpIXEzSrxErBW5SJBgKLbXU3WdIpkjBTeUNtyBVn8TRng==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+  '@parcel/watcher-linux-arm-glibc@2.5.6':
+    resolution: {integrity: sha512-9JiYfB6h6BgV50CCfasfLf/uvOcJskMSwcdH1PHH9rvS1IrNy8zad6IUVPVUfmXr+u+Km9IxcfMLzgdOudz9EQ==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm]
+    os: [linux]
+  '@parcel/watcher-linux-arm-musl@2.5.6':
+    resolution: {integrity: sha512-Ve3gUCG57nuUUSyjBq/MAM0CzArtuIOxsBdQ+ftz6ho8n7s1i9E1Nmk/xmP323r2YL0SONs1EuwqBp2u1k5fxg==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm]
+    os: [linux]
+  '@parcel/watcher-linux-arm64-glibc@2.5.6':
+    resolution: {integrity: sha512-f2g/DT3NhGPdBmMWYoxixqYr3v/UXcmLOYy16Bx0TM20Tchduwr4EaCbmxh1321TABqPGDpS8D/ggOTaljijOA==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [linux]
+  '@parcel/watcher-linux-arm64-musl@2.5.6':
+    resolution: {integrity: sha512-qb6naMDGlbCwdhLj6hgoVKJl2odL34z2sqkC7Z6kzir8b5W65WYDpLB6R06KabvZdgoHI/zxke4b3zR0wAbDTA==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [linux]
+  '@parcel/watcher-linux-x64-glibc@2.5.6':
+    resolution: {integrity: sha512-kbT5wvNQlx7NaGjzPFu8nVIW1rWqV780O7ZtkjuWaPUgpv2NMFpjYERVi0UYj1msZNyCzGlaCWEtzc+exjMGbQ==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [linux]
+  '@parcel/watcher-linux-x64-musl@2.5.6':
+    resolution: {integrity: sha512-1JRFeC+h7RdXwldHzTsmdtYR/Ku8SylLgTU/reMuqdVD7CtLwf0VR1FqeprZ0eHQkO0vqsbvFLXUmYm/uNKJBg==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [linux]
+  '@parcel/watcher-win32-arm64@2.5.6':
+    resolution: {integrity: sha512-3ukyebjc6eGlw9yRt678DxVF7rjXatWiHvTXqphZLvo7aC5NdEgFufVwjFfY51ijYEWpXbqF5jtrK275z52D4Q==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [win32]
+  '@parcel/watcher-win32-ia32@2.5.6':
+    resolution: {integrity: sha512-k35yLp1ZMwwee3Ez/pxBi5cf4AoBKYXj00CZ80jUz5h8prpiaQsiRPKQMxoLstNuqe2vR4RNPEAEcjEFzhEz/g==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [ia32]
+    os: [win32]
+  '@parcel/watcher-win32-x64@2.5.6':
+    resolution: {integrity: sha512-hbQlYcCq5dlAX9Qx+kFb0FHue6vbjlf0FrNzSKdYK2APUf7tGfGxQCk2ihEREmbR6ZMc0MVAD5RIX/41gpUzTw==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [win32]
+  '@parcel/watcher@2.5.6':
+    resolution: {integrity: sha512-tmmZ3lQxAe/k/+rNnXQRawJ4NjxO2hqiOLTHvWchtGZULp4RyFeh6aU4XdOYBFe2KE1oShQTv4AblOs2iOrNnQ==}
+    engines: {node: '>= 10.0.0'}
  '@resvg/resvg-js-android-arm-eabi@2.6.2':
    resolution: {integrity: sha512-FrJibrAk6v29eabIPgcTUMPXiEz8ssrAk7TXxsiZzww9UTQ1Z5KAbFJs+Z0Ez+VZTYgnE5IQJqBcoSiMebtPHA==}
    engines: {node: '>= 10'}
@@ -198,6 +317,10 @@ packages:
    resolution: {integrity: sha512-xBaJish5OeGmniDj9cW5PRa/PtmuVU3ziqrbr5xJj901ZDN4TosrVaNZpEiLZAxdfnhAe7uQ7QFWfjPe9d9K2Q==}
    engines: {node: '>= 10'}
+  '@sindresorhus/merge-streams@4.0.0':
+    resolution: {integrity: sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ==}
+    engines: {node: '>=18'}
  '@stylistic/stylelint-plugin@3.1.1':
    resolution: {integrity: sha512-XagAHHIa528EvyGybv8EEYGK5zrVW74cHpsjhtovVATbhDRuJYfE+X4HCaAieW9lCkwbX6L+X0I4CiUG3w/hFw==}
    engines: {node: ^18.12 || >=20.9}
@@ -254,29 +377,25 @@ packages:
    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
    engines: {node: '>=8'}
-  ansi-regex@6.1.0:
+  ansi-regex@6.2.2:
-    resolution: {integrity: sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==}
+    resolution: {integrity: sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==}
    engines: {node: '>=12'}
  ansi-styles@2.2.1:
    resolution: {integrity: sha512-kmCevFghRiWM7HB5zTPULl4r9bVFSWjz62MhqizDGUrq2NWuNMQyuv4tHHoKJHs69M/MF64lEcHdYIocrdWQYA==}
    engines: {node: '>=0.10.0'}
-  ansi-styles@3.2.1:
-    resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==}
-    engines: {node: '>=4'}
  ansi-styles@4.3.0:
    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
    engines: {node: '>=8'}
+  anymatch@3.1.3:
+    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
+    engines: {node: '>= 8'}
  argparse@2.0.1:
    resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
-  array-union@2.1.0:
-    resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
-    engines: {node: '>=8'}
  asap@2.0.6:
    resolution: {integrity: sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==}
@@ -307,8 +426,13 @@ packages:
  balanced-match@1.0.2:
    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
-  balanced-match@2.0.0:
+  balanced-match@3.0.1:
-    resolution: {integrity: sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==}
+    resolution: {integrity: sha512-vjtV3hiLqYDNRoiAv0zC4QaGAMPomEoq83PRmYIofPswwZurCeWR5LByXm7SyoL0Zh5+2z0+HC7jG8gSZJUh0w==}
+    engines: {node: '>= 16'}
+  binary-extensions@2.3.0:
+    resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
+    engines: {node: '>=8'}
  boolbase@1.0.0:
    resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
@@ -320,6 +444,9 @@ packages:
    resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
    engines: {node: '>=8'}
+  cacheable@2.3.2:
+    resolution: {integrity: sha512-w+ZuRNmex9c1TR9RcsxbfTKCjSL0rh1WA5SABbrWprIHeNBdmyQLSYonlDy9gpD+63XT8DgZ/wNh1Smvc9WnJA==}
  call-bind@1.0.7:
    resolution: {integrity: sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==}
    engines: {node: '>= 0.4'}
@@ -340,15 +467,15 @@ packages:
    resolution: {integrity: sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A==}
    engines: {node: '>=0.10.0'}
-  chalk@2.4.2:
-    resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
-    engines: {node: '>=4'}
  character-parser@2.2.0:
    resolution: {integrity: sha512-+UqJQjFEFaTAs3bNsF2j2kEN1baG/zghZbdqoYEDxGZtJo9LBzl1A+m0D4n3qKx8N2FNv8/Xp6yV9mQmBuptaw==}
-  chokidar@4.0.1:
+  chokidar@3.6.0:
-    resolution: {integrity: sha512-n8enUVCED/KVRQlab1hr3MVpcVMvxtZjmEa956u+4YijlmQED223XMSYj2tLuKvr4jcCTzNNMpQDUer72MMmzA==}
+    resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
+    engines: {node: '>= 8.10.0'}
+  chokidar@4.0.3:
+    resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==}
    engines: {node: '>= 14.16.0'}
  clean-css@4.2.4:
@@ -433,8 +560,8 @@ packages:
      typescript:
        optional: true
-  css-functions-list@3.2.2:
+  css-functions-list@3.2.3:
-    resolution: {integrity: sha512-c+N0v6wbKVxTu5gOBBFkr9BEdBWaqqjQeiJ8QvSRIJOf+UxlJh930m8e6/WNeODIK0mYLFkoONrnj16i2EcvfQ==}
+    resolution: {integrity: sha512-IQOkD3hbR5KrN93MtcYuad6YPuTSUhntLHDuLEbFWE+ff2/XSZNdZG+LcbbIW5AXKg/WFIfYItIzVoHngHXZzA==}
    engines: {node: '>=12 || >=16'}
  css-select@4.3.0:
@@ -451,6 +578,10 @@ packages:
    resolution: {integrity: sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==}
    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
+  css-tree@3.1.0:
+    resolution: {integrity: sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
  css-what@6.1.0:
    resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==}
    engines: {node: '>= 6'}
@@ -467,8 +598,8 @@ packages:
  cssom@0.5.0:
    resolution: {integrity: sha512-iKuQcq+NdHqlAcwUY0o/HL69XQrUaQdMjmStJ8JFmUaiiQErlhrmuigkg/CU4E2J0IyUKUrMAgl36TvN67MqTw==}
-  debug@4.3.7:
+  debug@4.4.3:
-    resolution: {integrity: sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==}
+    resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
    engines: {node: '>=6.0'}
    peerDependencies:
      supports-color: '*'
@@ -484,8 +615,8 @@ packages:
    resolution: {integrity: sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==}
    engines: {node: '>= 0.4'}
-  dir-glob@3.0.1:
+  detect-libc@2.1.2:
-    resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
+    resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
    engines: {node: '>=8'}
  doctypes@1.1.0:
@@ -517,8 +648,8 @@ packages:
    resolution: {integrity: sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==}
    engines: {node: '>=6'}
-  error-ex@1.3.2:
+  error-ex@1.3.4:
-    resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==}
+    resolution: {integrity: sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==}
  es-define-property@1.0.0:
    resolution: {integrity: sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==}
@@ -543,37 +674,35 @@ packages:
  fast-deep-equal@3.1.3:
    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
-  fast-glob@3.3.2:
+  fast-glob@3.3.3:
-    resolution: {integrity: sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==}
+    resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
    engines: {node: '>=8.6.0'}
-  fast-uri@3.0.2:
+  fast-uri@3.1.0:
-    resolution: {integrity: sha512-GR6f0hD7XXyNJa25Tb9BuIdN0tdr+0BMi6/CJPH3wJO1JjNG3n/VsSw38AwRdKZABm8lGbPfakLRkYzx2V9row==}
+    resolution: {integrity: sha512-iPeeDKJSWf4IEOasVVrknXpaBV0IApz/gp7S2bb7Z4Lljbl2MGJRqInZiUrQwV16cpzw/D3S5j5Julj/gT52AA==}
  fastest-levenshtein@1.0.16:
    resolution: {integrity: sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==}
    engines: {node: '>= 4.9.1'}
-  fastq@1.17.1:
+  fastq@1.20.1:
-    resolution: {integrity: sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==}
+    resolution: {integrity: sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==}
  fecha@4.2.3:
    resolution: {integrity: sha512-OP2IUU6HeYKJi3i0z4A19kHMQoLVs4Hc+DPqqxI2h/DPZHTm/vjsfC6P0b4jCMy14XizLBqvndQ+UilD7707Jw==}
-  file-entry-cache@9.1.0:
+  file-entry-cache@11.1.2:
-    resolution: {integrity: sha512-/pqPFG+FdxWQj+/WSuzXSDaNzxgTLr/OrR1QuqfEZzDakpdYE70PwUxL7BPUa8hpjbvY1+qvCl8k+8Tq34xJgg==}
+    resolution: {integrity: sha512-N2WFfK12gmrK1c1GXOqiAJ1tc5YE+R53zvQ+t5P8S5XhnmKYVB5eZEiLNZKDSmoG8wqqbF9EXYBBW/nef19log==}
-    engines: {node: '>=18'}
  fill-range@7.1.1:
    resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
    engines: {node: '>=8'}
-  flat-cache@5.0.0:
+  flat-cache@6.1.20:
-    resolution: {integrity: sha512-JrqFmyUl2PnPi1OvLyTVHnQvwQ0S+e6lGSwu8OkAZlSaNIZciTY2H/cOOROxsBA1m/LZNHDsqAgDZt6akWcjsQ==}
+    resolution: {integrity: sha512-AhHYqwvN62NVLp4lObVXGVluiABTHapoB57EyegZVmazN+hhGhLTn3uZbOofoTw4DSDvVCadzzyChXhOAvy8uQ==}
-    engines: {node: '>=18'}
-  flatted@3.3.1:
+  flatted@3.3.3:
-    resolution: {integrity: sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==}
+    resolution: {integrity: sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==}
  fn.name@1.1.0:
    resolution: {integrity: sha512-GRnmB5gPyJpAhTQdSZTSp9uaPSvl09KoYcMQtsB9rQoOmzs9dH6ffeccH+Z+cv6P68Hu5bC6JjRh4Ah/mHSNRw==}
@@ -581,6 +710,11 @@ packages:
  fs.realpath@1.0.0:
    resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
+  fsevents@2.3.3:
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
  function-bind@1.1.2:
    resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
@@ -588,6 +722,10 @@ packages:
    resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
    engines: {node: 6.* || 8.* || >= 10.*}
+  get-east-asian-width@1.4.0:
+    resolution: {integrity: sha512-QZjmEOC+IT1uk6Rx0sX22V6uHWVwbdbxf1faPqJ1QhLdGgsRGCZoyaQBm/piRdJy/D2um6hM1UP7ZEeQ4EkP+Q==}
+    engines: {node: '>=18'}
  get-intrinsic@1.2.4:
    resolution: {integrity: sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==}
    engines: {node: '>= 0.4'}
@@ -608,9 +746,9 @@ packages:
    resolution: {integrity: sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==}
    engines: {node: '>=6'}
-  globby@11.1.0:
+  globby@16.1.0:
-    resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
+    resolution: {integrity: sha512-+A4Hq7m7Ze592k9gZRy4gJ27DrXRNnC1vPjxTt1qQxEY8RxagBkBxivkCwg7FxSTG0iLLEMaUx13oOr0R2/qcQ==}
-    engines: {node: '>=10'}
+    engines: {node: '>=20'}
  globjoin@0.1.4:
    resolution: {integrity: sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg==}
@@ -626,9 +764,9 @@ packages:
    resolution: {integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==}
    engines: {node: '>=4'}
-  has-flag@4.0.0:
+  has-flag@5.0.1:
-    resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
+    resolution: {integrity: sha512-CsNUt5x9LUdx6hnk/E2SZLsDyvfqANZSUq4+D3D8RzDJ2M+HDTIkF60ibS1vHaK55vzgiZw1bEPFG9yH7l33wA==}
-    engines: {node: '>=8'}
+    engines: {node: '>=12'}
  has-property-descriptors@1.0.2:
    resolution: {integrity: sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==}
@@ -645,31 +783,45 @@ packages:
    resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==}
    engines: {node: '>= 0.4'}
+  hashery@1.4.0:
+    resolution: {integrity: sha512-Wn2i1In6XFxl8Az55kkgnFRiAlIAushzh26PTjL2AKtQcEfXrcLa7Hn5QOWGZEf3LU057P9TwwZjFyxfS1VuvQ==}
+    engines: {node: '>=20'}
  hasown@2.0.2:
    resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
    engines: {node: '>= 0.4'}
-  html-tags@3.3.1:
+  hookified@1.15.0:
-    resolution: {integrity: sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==}
+    resolution: {integrity: sha512-51w+ZZGt7Zw5q7rM3nC4t3aLn/xvKDETsXqMczndvwyVQhAHfUmUuFBRFcos8Iyebtk7OAE9dL26wFNzZVVOkw==}
-    engines: {node: '>=8'}
+  html-tags@5.1.0:
+    resolution: {integrity: sha512-n6l5uca7/y5joxZ3LUePhzmBFUJ+U2YWzhMa8XUTecSeSlQiZdF5XAd/Q3/WUl0VsXgUwWi8I7CNIwdI5WN1SQ==}
+    engines: {node: '>=20.10'}
-  ignore@5.3.2:
+  ignore-by-default@1.0.1:
-    resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
+    resolution: {integrity: sha512-Ius2VYcGNk7T90CppJqcIkS5ooHUZyIQK+ClZfMfMNFEF9VSE73Fq+906u/CWu92x4gzZMWOwfFYckPObzdEbA==}
+  ignore@7.0.5:
+    resolution: {integrity: sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==}
    engines: {node: '>= 4'}
-  immutable@4.3.7:
+  immutable@5.1.4:
-    resolution: {integrity: sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==}
+    resolution: {integrity: sha512-p6u1bG3YSnINT5RQmx/yRZBpenIl30kVxkTLDyHLIMk0gict704Q9n+thfDI7lTRm9vXdDYutVzXhzcThxTnXA==}
-  import-fresh@3.3.0:
+  import-fresh@3.3.1:
-    resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
+    resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
    engines: {node: '>=6'}
+  import-meta-resolve@4.2.0:
+    resolution: {integrity: sha512-Iqv2fzaTQN28s/FwZAoFq0ZSs/7hMAHJVX+w8PZl3cY19Pxk6jFFalxQoIfW2826i/fDLXv8IiEZRIT0lDuWcg==}
  imurmurhash@0.1.4:
    resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
    engines: {node: '>=0.8.19'}
-  include-media@2.0.0:
+  include-media@https://codeload.github.com/eduardoboucas/include-media/tar.gz/423e815c8ed041e43184657e2acf03608f55a854:
-    resolution: {integrity: sha512-LSJcffPYIZ/Kln0rIi5UhqQbZxElDCMYA4dPC5MI1rkwwjptgEiOicHnzB0MMhMNJver0+4zULb4MKlgDyapZg==}
+    resolution: {tarball: https://codeload.github.com/eduardoboucas/include-media/tar.gz/423e815c8ed041e43184657e2acf03608f55a854}
+    version: 2.0.0
  inflight@1.0.6:
    resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
@@ -688,8 +840,8 @@ packages:
    peerDependencies:
      svg-sprite: ^2.0.2
-  iro-sass@git+https://git.vulpes.one/git/iro-sass.git#351814a60e8909814c7120db96314a1a25d962bd:
+  iro-sass@git+https://git.vulpes.one/git/iro-sass.git#9df4a41f916389715d505730268459326068e9b6:
-    resolution: {commit: 351814a60e8909814c7120db96314a1a25d962bd, repo: https://git.vulpes.one/git/iro-sass.git, type: git}
+    resolution: {commit: 9df4a41f916389715d505730268459326068e9b6, repo: https://git.vulpes.one/git/iro-sass.git, type: git}
    version: 1.0.2
  is-arrayish@0.2.1:
@@ -698,6 +850,10 @@ packages:
  is-arrayish@0.3.2:
    resolution: {integrity: sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==}
+  is-binary-path@2.1.0:
+    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
+    engines: {node: '>=8'}
  is-buffer@1.1.6:
    resolution: {integrity: sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==}
@@ -727,6 +883,10 @@ packages:
    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
    engines: {node: '>=0.12.0'}
+  is-path-inside@4.0.0:
+    resolution: {integrity: sha512-lJJV/5dYS+RcL8uQdBDW9c9uWFLLBNRyFhnAKXw5tVqLlKZ4RMGZKv+YQ/IA3OhD+RpbJa1LLFM1FQPGyIXvOA==}
+    engines: {node: '>=12'}
  is-plain-object@5.0.0:
    resolution: {integrity: sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==}
    engines: {node: '>=0.10.0'}
@@ -758,8 +918,9 @@ packages:
    resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
    hasBin: true
-  json-buffer@3.0.1:
+  js-yaml@4.1.1:
-    resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
+    resolution: {integrity: sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==}
+    hasBin: true
  json-parse-even-better-errors@2.3.1:
    resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
@@ -770,8 +931,8 @@ packages:
  jstransformer@1.0.0:
    resolution: {integrity: sha512-C9YK3Rf8q6VAPDCCU9fnqo3mAfOH6vUGnMcP4AQAYIEpWtfGLpwOTmZ+igtdK5y+VvI2n3CyYSzy4Qh34eq24A==}
-  keyv@4.5.4:
+  keyv@5.6.0:
-    resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
+    resolution: {integrity: sha512-CYDD3SOtsHtyXeEORYRx2qBtpDJFjRTGXUtmNEMGyzYOKj1TE3tycdlho7kA1Ufx9OYWZzg52QFBGALTirzDSw==}
  kind-of@3.2.2:
    resolution: {integrity: sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==}
@@ -784,6 +945,9 @@ packages:
  known-css-properties@0.34.0:
    resolution: {integrity: sha512-tBECoUqNFbyAY4RrbqsBQqDFpGXAEbdD5QKr8kACx3+rnArmuuR22nKQWKazvp07N9yjTyDZaw/20UIH8tL9DQ==}
+  known-css-properties@0.37.0:
+    resolution: {integrity: sha512-JCDrsP4Z1Sb9JwG0aJ8Eo2r7k4Ou5MwmThS/6lcIe1ICyb7UBJKGRIUUdqc2ASdE/42lgz6zFUnzAIhtXnBVrQ==}
  kuler@2.0.0:
    resolution: {integrity: sha512-Xq9nH7KlWZmXAtodXDDRE7vs6DU1gTU8zYDHDiWLSip45Egwq3plLHzPn27NgvzL2r1LMPC1vdqh98sQxtqj4A==}
@@ -814,8 +978,8 @@ packages:
    resolution: {integrity: sha512-k+yt5n3l48JU4k8ftnKG6V7u32wyH2NfKzeMto9F/QRE0amxy/LayxwlvjjkZEIzqR+19IrtFO8p5kB9QaYUFg==}
    engines: {node: '>=0.10.0'}
-  mathml-tag-names@2.1.3:
+  mathml-tag-names@4.0.0:
-    resolution: {integrity: sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==}
+    resolution: {integrity: sha512-aa6AU2Pcx0VP/XWnh8IGL0SYSgQHDT6Ucror2j2mXeFAlN3ahaNs8EZtG1YiticMkSLj3Gt6VPFfZogt7G5iFQ==}
  mdn-data@2.0.14:
    resolution: {integrity: sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==}
@@ -823,9 +987,12 @@ packages:
  mdn-data@2.0.30:
    resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
-  meow@13.2.0:
+  mdn-data@2.12.2:
-    resolution: {integrity: sha512-pxQJQzB6djGPXh08dacEloMFopsOqGVRKFPYvPOt9XDZ1HasbgDZA74CJGreSU4G3Ak7EFJGoiH2auq+yXISgA==}
+    resolution: {integrity: sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==}
-    engines: {node: '>=18'}
+  meow@14.0.0:
+    resolution: {integrity: sha512-JhC3R1f6dbspVtmF3vKjAWz1EVIvwFrGGPLSdU6rK79xBwHWTuHoLnRX/t1/zHS1Ch1Y2UtIrih7DAHuH9JFJA==}
+    engines: {node: '>=20'}
  merge2@1.4.1:
    resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
@@ -852,11 +1019,19 @@ packages:
    resolution: {integrity: sha512-71ippSywq5Yb7/tVYyGbkBggbU8H3u5Rz56fH60jGFgr8uHwxs+aSKeqmluIVzM0m0kB7xQjKS6qPfd0b2ZoqQ==}
    hasBin: true
-  nanoid@3.3.7:
+  nanoid@3.3.11:
-    resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==}
+    resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
    hasBin: true
+  node-addon-api@7.1.1:
+    resolution: {integrity: sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==}
+  nodemon@3.1.11:
+    resolution: {integrity: sha512-is96t8F/1//UHAjNPHpbsNY46ELPpftGUoSVNXwUfMk/qdjSylYrWSu1XavVTBOn526kFiOR733ATgNBCQyH0g==}
+    engines: {node: '>=10'}
+    hasBin: true
  normalize-path@3.0.0:
    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
    engines: {node: '>=0.10.0'}
@@ -889,20 +1064,20 @@ packages:
  path-parse@1.0.7:
    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
-  path-type@4.0.0:
-    resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
-    engines: {node: '>=8'}
  picocolors@1.0.1:
    resolution: {integrity: sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==}
-  picocolors@1.1.0:
+  picocolors@1.1.1:
-    resolution: {integrity: sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==}
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
  picomatch@2.3.1:
    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
    engines: {node: '>=8.6'}
+  picomatch@4.0.3:
+    resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==}
+    engines: {node: '>=12'}
  postcss-media-query-parser@0.2.3:
    resolution: {integrity: sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==}
@@ -925,20 +1100,20 @@ packages:
    resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
    engines: {node: '>=4'}
-  postcss-sorting@8.0.2:
+  postcss-selector-parser@7.1.1:
-    resolution: {integrity: sha512-M9dkSrmU00t/jK7rF6BZSZauA5MAaBW4i5EnJXspMwt4iqTh/L9j6fgMnbElEOfyRyfLfVbIHj/R52zHzAPe1Q==}
+    resolution: {integrity: sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==}
+    engines: {node: '>=4'}
+  postcss-sorting@9.1.0:
+    resolution: {integrity: sha512-Mn8KJ45HNNG6JBpBizXcyf6LqY/qyqetGcou/nprDnFwBFBLGj0j/sNKV2lj2KMOVOwdXu14aEzqJv8CIV6e8g==}
    peerDependencies:
      postcss: ^8.4.20
  postcss-value-parser@4.2.0:
    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
-  postcss@8.4.38:
+  postcss@8.5.6:
-    resolution: {integrity: sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==}
+    resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
-    engines: {node: ^10 || ^12 || >=14}
-  postcss@8.4.47:
-    resolution: {integrity: sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==}
    engines: {node: ^10 || ^12 || >=14}
  prettysize@2.0.0:
@@ -950,6 +1125,9 @@ packages:
  promise@7.3.1:
    resolution: {integrity: sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==}
+  pstree.remy@1.1.8:
+    resolution: {integrity: sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w==}
  pug-attrs@2.0.4:
    resolution: {integrity: sha512-TaZ4Z2TWUPDJcV3wjU3RtUXMrd3kM4Wzjbe3EWnSsZPsJ3LDI0F3yCnf2/W7PPFF+edUFQ0HgDL1IoxSz5K8EQ==}
@@ -1026,6 +1204,10 @@ packages:
  pug@3.0.3:
    resolution: {integrity: sha512-uBi6kmc9f3SZ3PXxqcHiUZLmIXgfgWooKWXcwSGwQd2Zi5Rb0bT14+8CJjJgI8AB+nndLaNgHGrcc6bPIB665g==}
+  qified@0.6.0:
+    resolution: {integrity: sha512-tsSGN1x3h569ZSU1u6diwhltLyfUWDp3YbFHedapTmpBl0B3P6U3+Qptg7xu+v+1io1EwhdPyyRHYbEw0KN2FA==}
+    engines: {node: '>=20'}
  queue-microtask@1.2.3:
    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
@@ -1036,9 +1218,13 @@ packages:
    resolution: {integrity: sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==}
    engines: {node: '>= 6'}
-  readdirp@4.0.2:
+  readdirp@3.6.0:
-    resolution: {integrity: sha512-yDMz9g+VaZkqBYS/ozoBJwaBhTbZo3UNYQHNRw1D3UFQB8oHB4uS/tAODO+ZLjGWmUbKnIlOWO+aaIiAxrUWHA==}
+    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
-    engines: {node: '>= 14.16.0'}
+    engines: {node: '>=8.10.0'}
+  readdirp@4.1.2:
+    resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==}
+    engines: {node: '>= 14.18.0'}
  regenerator-runtime@0.11.1:
    resolution: {integrity: sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==}
@@ -1066,16 +1252,12 @@ packages:
    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
    engines: {node: '>=4'}
-  resolve-from@5.0.0:
-    resolution: {integrity: sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==}
-    engines: {node: '>=8'}
  resolve@1.22.8:
    resolution: {integrity: sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==}
    hasBin: true
-  reusify@1.0.4:
+  reusify@1.1.0:
-    resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==}
+    resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
    engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
  right-align@0.1.3:
@@ -1095,11 +1277,16 @@ packages:
    resolution: {integrity: sha512-e2bDA2WJT0wxseVd4lsDP4+3ONX6HpMXQa1ZhFQ7SU+GjvORCmShbCMltrtIDfkYhVHrOcPtj+KhmDBdPdZD1g==}
    engines: {node: '>=10'}
-  sass@1.79.4:
+  sass@1.97.3:
-    resolution: {integrity: sha512-K0QDSNPXgyqO4GZq2HO5Q70TLxTH6cIT59RdoCHMivrC8rqzaTw5ab9prjz9KUN1El4FLXrBXJhik61JR4HcGg==}
+    resolution: {integrity: sha512-fDz1zJpd5GycprAbu4Q2PV/RprsRtKC/0z82z0JLgdytmcq0+ujJbJ/09bPGDxCLkKY3Np5cRAOcWiVkLXJURg==}
    engines: {node: '>=14.0.0'}
    hasBin: true
+  semver@7.7.3:
+    resolution: {integrity: sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==}
+    engines: {node: '>=10'}
+    hasBin: true
  set-function-length@1.2.2:
    resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==}
    engines: {node: '>= 0.4'}
@@ -1111,9 +1298,13 @@ packages:
  simple-swizzle@0.2.2:
    resolution: {integrity: sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==}
-  slash@3.0.0:
+  simple-update-notifier@2.0.0:
-    resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
+    resolution: {integrity: sha512-a2B9Y0KlNXl9u/vsW6sTIu9vGEpfKu2wRV6l1H3XEas/0gUIzGzBoP/IouTcUQbm9JWZLH3COxyn03TYlFax6w==}
-    engines: {node: '>=8'}
+    engines: {node: '>=10'}
+  slash@5.1.0:
+    resolution: {integrity: sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==}
+    engines: {node: '>=14.16'}
  slice-ansi@4.0.0:
    resolution: {integrity: sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==}
@@ -1142,6 +1333,10 @@ packages:
    resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
    engines: {node: '>=8'}
+  string-width@8.1.0:
+    resolution: {integrity: sha512-Kxl3KJGb/gxkaUMOjRsQ8IrXiGW75O4E3RPjFIINOVH8AMl2SQ/yWdTzWwF3FevIX9LcMAjJW+GRwAlAbTSXdg==}
+    engines: {node: '>=20'}
  string_decoder@1.1.1:
    resolution: {integrity: sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==}
@@ -1156,17 +1351,18 @@ packages:
    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
    engines: {node: '>=8'}
-  strip-ansi@7.1.0:
+  strip-ansi@7.1.2:
-    resolution: {integrity: sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==}
+    resolution: {integrity: sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==}
    engines: {node: '>=12'}
  style-search@0.1.0:
    resolution: {integrity: sha512-Dj1Okke1C3uKKwQcetra4jSuk0DqbzbYtXipzFlFMZtowbF1x7BKJwB9AayVMyFARvU8EDrZdcax4At/452cAg==}
-  stylelint-config-recess-order@5.1.1:
+  stylelint-config-recess-order@7.6.0:
-    resolution: {integrity: sha512-eDAHWVBelzDbMbdMj15pSw0Ycykv5eLeriJdbGCp0zd44yvhgZLI+wyVHegzXp5NrstxTPSxl0fuOVKdMm0XLA==}
+    resolution: {integrity: sha512-c3LXX4a8UEtrMD/KigK4I7LFexbM2p/eSTqnix5dmmvydEqX3dzrRt981h8giSEhA51vxdCEefQc3umH60i2bA==}
    peerDependencies:
-      stylelint: '>=16'
+      stylelint: ^16.18.0 || ^17.0.0
+      stylelint-order: ^7.0.0
  stylelint-config-sass-guidelines@12.1.0:
    resolution: {integrity: sha512-NTxEtVT6uNSqRvq+A3ScyKhjUrY/Z845TnpWEwnMgIPZ/+/Waa4+51r6OPuQRMu4XZS3D8DK1UaT4TWFBvuuAw==}
@@ -1175,10 +1371,11 @@ packages:
      postcss: ^8.4.21
      stylelint: ^16.1.0
-  stylelint-order@6.0.4:
+  stylelint-order@7.0.1:
-    resolution: {integrity: sha512-0UuKo4+s1hgQ/uAxlYU4h0o0HS4NiQDud0NAUNI0aa8FJdmYHA5ZZTFHiV5FpmE3071e9pZx5j0QpVJW5zOCUA==}
+    resolution: {integrity: sha512-GWPei1zBVDDjxM+/BmcSCiOcHNd8rSqW6FUZtqQGlTRpD0Z5nSzspzWD8rtKif5KPdzUG68DApKEV/y/I9VbTw==}
+    engines: {node: '>=20.19.0'}
    peerDependencies:
-      stylelint: ^14.0.0 || ^15.0.0 || ^16.0.1
+      stylelint: ^16.18.0 || ^17.0.0
  stylelint-scss@6.7.0:
    resolution: {integrity: sha512-RFIa2A+pVWS5wjNT+whtK7wsbZEWazyqesCuSaPbPlZ8lh2TujwVJSnCYJijg6ChZzwI8pZPRZS1L6A9aCbXDg==}
@@ -1186,11 +1383,15 @@ packages:
    peerDependencies:
      stylelint: ^16.0.2
-  stylelint@16.9.0:
+  stylelint@17.0.0:
-    resolution: {integrity: sha512-31Nm3WjxGOBGpQqF43o3wO9L5AC36TPIe6030Lnm13H3vDMTcS21DrLh69bMX+DBilKqMMVLian4iG6ybBoNRQ==}
+    resolution: {integrity: sha512-saMZ2mqdQre4AfouxcbTdpVglDRcROb4MIucKHvgsDb/0IX7ODhcaz+EOIyfxAsm8Zjl/7j4hJj6MgIYYM8Xwg==}
-    engines: {node: '>=18.12.0'}
+    engines: {node: '>=20.19.0'}
    hasBin: true
+  supports-color@10.2.2:
+    resolution: {integrity: sha512-SS+jx45GF1QjgEXQx4NJZV9ImqmO2NPz5FNsIHrsDjh2YsHnawpan7SNQ1o8NuhrbHZy9AZhIoCUiCeaW/C80g==}
+    engines: {node: '>=18'}
  supports-color@2.0.0:
    resolution: {integrity: sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g==}
    engines: {node: '>=0.8.0'}
@@ -1199,13 +1400,9 @@ packages:
    resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
    engines: {node: '>=4'}
-  supports-color@7.2.0:
+  supports-hyperlinks@4.4.0:
-    resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
+    resolution: {integrity: sha512-UKbpT93hN5Nr9go5UY7bopIB9YQlMz9nm/ct4IXt/irb5YRkn9WaqrOBJGZ5Pwvsd5FQzSVeYlGdXoCAPQZrPg==}
-    engines: {node: '>=8'}
+    engines: {node: '>=20'}
-  supports-hyperlinks@3.1.0:
-    resolution: {integrity: sha512-2rn0BZ+/f7puLOHZm1HOJfwBggfaHXUpPUSSG/SWM4TWp5KCfmNYwnC3hruy2rZlMnmWZ+QAGpZfchu3f3695A==}
-    engines: {node: '>=14.18'}
  supports-preserve-symlinks-flag@1.0.0:
    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
@@ -1224,8 +1421,8 @@ packages:
    engines: {node: '>=10.13.0'}
    hasBin: true
-  table@6.8.2:
+  table@6.9.0:
-    resolution: {integrity: sha512-w2sfv80nrAh2VCbqR5AK27wswXhqcck2AhfnNW76beQXskGZ1V12GwS//yYVa3d3fcvAip2OUnbDAjW2k3v9fA==}
+    resolution: {integrity: sha512-9kY+CygyYM6j02t5YFHbNz2FN5QmYGv9zAjVp4lCDjlCw7amdckXlEt/bjMhUIfj4ThGRE4gCUH5+yGnNuPo5A==}
    engines: {node: '>=10.0.0'}
  text-hex@1.0.0:
@@ -1249,6 +1446,10 @@ packages:
  token-stream@1.0.0:
    resolution: {integrity: sha512-VSsyNPPW74RpHwR8Fc21uubwHY7wMDeJLys2IX5zJNih+OnAnaifKHo+1LHT7DAdloQ7apeaaWg8l7qnf/TnEg==}
+  touch@3.1.1:
+    resolution: {integrity: sha512-r0eojU4bI8MnHr8c5bNo7lJDdI2qXlWWJk6a9EAFG7vbhTjElYhBVS3/miuE0uOuoLdb8Mc/rVfsmm6eo5o9GA==}
+    hasBin: true
  triple-beam@1.4.1:
    resolution: {integrity: sha512-aZbgViZrg1QNcG+LULa7nhZpJTZSLm/mXnHXnbAbjmN5aSa0y7V+wvv6+4WaBtpISJzThKy+PIPxc1Nq1EJ9mg==}
    engines: {node: '>= 14.0.0'}
@@ -1261,6 +1462,13 @@ packages:
  uglify-to-browserify@1.0.2:
    resolution: {integrity: sha512-vb2s1lYx2xBtUgy+ta+b2J/GLVUR+wmpINwHePmPRhOsIVCG2wDzKJ0n14GslH1BifsqVzSOwQhRaCAsZ/nI4Q==}
+  undefsafe@2.0.5:
+    resolution: {integrity: sha512-WxONCrssBM8TSPRqN5EmsjVrsv4A8X12J4ArBiiayv3DyyG3ZlIg6yysuuSYdZsVz3TKcTg2fd//Ujd4CHV1iA==}
+  unicorn-magic@0.4.0:
+    resolution: {integrity: sha512-wH590V9VNgYH9g3lH9wWjTrUoKsjLF6sGLjhR4sH1LWpLmCOH0Zf7PukhDA8BiS7KHe4oPNkcTHqYkj7SOGUOw==}
+    engines: {node: '>=20'}
  util-deprecate@1.0.2:
    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
@@ -1310,9 +1518,9 @@ packages:
  wrappy@1.0.2:
    resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
-  write-file-atomic@5.0.1:
+  write-file-atomic@7.0.0:
-    resolution: {integrity: sha512-+QU2zd6OTD8XWIJCbffaiQeH9U73qIqafo1x6V1snCWYGJf6cVE0cDR4D8xRzcEnfI21IFrUPzPGtcPf8AC+Rw==}
+    resolution: {integrity: sha512-YnlPC6JqnZl6aO4uRc+dx5PHguiR9S6WeoLtpxNT9wIG+BDya7ZNE1q7KOjVgaA73hKhKLpVPgJ5QA9THQ5BRg==}
-    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
+    engines: {node: ^20.17.0 || >=22.9.0}
  xpath@0.0.34:
    resolution: {integrity: sha512-FxF6+rkr1rNSQrhUNYrAFJpRXNzlDoMxeXN5qI84939ylEv3qqPFKa85Oxr6tDaJKqwW6KKyo2v26TSv3k6LeA==}
@@ -1335,23 +1543,17 @@ packages:
 snapshots:
-  '@babel/code-frame@7.25.7':
+  '@babel/code-frame@7.28.6':
    dependencies:
-      '@babel/highlight': 7.25.7
+      '@babel/helper-validator-identifier': 7.28.5
-      picocolors: 1.1.0
+      js-tokens: 4.0.0
+      picocolors: 1.1.1
  '@babel/helper-string-parser@7.24.7': {}
  '@babel/helper-validator-identifier@7.24.7': {}
-  '@babel/helper-validator-identifier@7.25.7': {}
+  '@babel/helper-validator-identifier@7.28.5': {}
-  '@babel/highlight@7.25.7':
-    dependencies:
-      '@babel/helper-validator-identifier': 7.25.7
-      chalk: 2.4.2
-      js-tokens: 4.0.0
-      picocolors: 1.1.0
  '@babel/parser@7.24.7':
    dependencies:
@@ -1363,22 +1565,51 @@ snapshots:
      '@babel/helper-validator-identifier': 7.24.7
      to-fast-properties: 2.0.0
+  '@cacheable/memory@2.0.7':
+    dependencies:
+      '@cacheable/utils': 2.3.3
+      '@keyv/bigmap': 1.3.1(keyv@5.6.0)
+      hookified: 1.15.0
+      keyv: 5.6.0
+  '@cacheable/utils@2.3.3':
+    dependencies:
+      hashery: 1.4.0
+      keyv: 5.6.0
  '@colors/colors@1.6.0': {}
  '@csstools/css-parser-algorithms@3.0.1(@csstools/css-tokenizer@3.0.1)':
    dependencies:
      '@csstools/css-tokenizer': 3.0.1
+  '@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0)':
+    dependencies:
+      '@csstools/css-tokenizer': 4.0.0
+  '@csstools/css-syntax-patches-for-csstree@1.0.26': {}
  '@csstools/css-tokenizer@3.0.1': {}
+  '@csstools/css-tokenizer@4.0.0': {}
  '@csstools/media-query-list-parser@3.0.1(@csstools/css-parser-algorithms@3.0.1(@csstools/css-tokenizer@3.0.1))(@csstools/css-tokenizer@3.0.1)':
    dependencies:
      '@csstools/css-parser-algorithms': 3.0.1(@csstools/css-tokenizer@3.0.1)
      '@csstools/css-tokenizer': 3.0.1
-  '@csstools/selector-specificity@4.0.0(postcss-selector-parser@6.1.2)':
+  '@csstools/media-query-list-parser@5.0.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)':
    dependencies:
-      postcss-selector-parser: 6.1.2
+      '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-tokenizer': 4.0.0
+  '@csstools/selector-resolve-nested@4.0.0(postcss-selector-parser@7.1.1)':
+    dependencies:
+      postcss-selector-parser: 7.1.1
+  '@csstools/selector-specificity@6.0.0(postcss-selector-parser@7.1.1)':
+    dependencies:
+      postcss-selector-parser: 7.1.1
  '@dabh/diagnostics@2.0.3':
    dependencies:
@@ -1386,7 +1617,13 @@ snapshots:
      enabled: 2.0.0
      kuler: 2.0.0
-  '@dual-bundle/import-meta-resolve@4.1.0': {}
+  '@keyv/bigmap@1.3.1(keyv@5.6.0)':
+    dependencies:
+      hashery: 1.4.0
+      hookified: 1.15.0
+      keyv: 5.6.0
+  '@keyv/serialize@1.1.1': {}
  '@nodelib/fs.scandir@2.1.5':
    dependencies:
@@ -1398,7 +1635,68 @@ snapshots:
  '@nodelib/fs.walk@1.2.8':
    dependencies:
      '@nodelib/fs.scandir': 2.1.5
-      fastq: 1.17.1
+      fastq: 1.20.1
+  '@parcel/watcher-android-arm64@2.5.6':
+    optional: true
+  '@parcel/watcher-darwin-arm64@2.5.6':
+    optional: true
+  '@parcel/watcher-darwin-x64@2.5.6':
+    optional: true
+  '@parcel/watcher-freebsd-x64@2.5.6':
+    optional: true
+  '@parcel/watcher-linux-arm-glibc@2.5.6':
+    optional: true
+  '@parcel/watcher-linux-arm-musl@2.5.6':
+    optional: true
+  '@parcel/watcher-linux-arm64-glibc@2.5.6':
+    optional: true
+  '@parcel/watcher-linux-arm64-musl@2.5.6':
+    optional: true
+  '@parcel/watcher-linux-x64-glibc@2.5.6':
+    optional: true
+  '@parcel/watcher-linux-x64-musl@2.5.6':
+    optional: true
+  '@parcel/watcher-win32-arm64@2.5.6':
+    optional: true
+  '@parcel/watcher-win32-ia32@2.5.6':
+    optional: true
+  '@parcel/watcher-win32-x64@2.5.6':
+    optional: true
+  '@parcel/watcher@2.5.6':
+    dependencies:
+      detect-libc: 2.1.2
+      is-glob: 4.0.3
+      node-addon-api: 7.1.1
+      picomatch: 4.0.3
+    optionalDependencies:
+      '@parcel/watcher-android-arm64': 2.5.6
+      '@parcel/watcher-darwin-arm64': 2.5.6
+      '@parcel/watcher-darwin-x64': 2.5.6
+      '@parcel/watcher-freebsd-x64': 2.5.6
+      '@parcel/watcher-linux-arm-glibc': 2.5.6
+      '@parcel/watcher-linux-arm-musl': 2.5.6
+      '@parcel/watcher-linux-arm64-glibc': 2.5.6
+      '@parcel/watcher-linux-arm64-musl': 2.5.6
+      '@parcel/watcher-linux-x64-glibc': 2.5.6
+      '@parcel/watcher-linux-x64-musl': 2.5.6
+      '@parcel/watcher-win32-arm64': 2.5.6
+      '@parcel/watcher-win32-ia32': 2.5.6
+      '@parcel/watcher-win32-x64': 2.5.6
+    optional: true
  '@resvg/resvg-js-android-arm-eabi@2.6.2':
    optional: true
@@ -1451,7 +1749,9 @@ snapshots:
      '@resvg/resvg-js-win32-ia32-msvc': 2.6.2
      '@resvg/resvg-js-win32-x64-msvc': 2.6.2
-  '@stylistic/stylelint-plugin@3.1.1(stylelint@16.9.0)':
+  '@sindresorhus/merge-streams@4.0.0': {}
+  '@stylistic/stylelint-plugin@3.1.1(stylelint@17.0.0)':
    dependencies:
      '@csstools/css-parser-algorithms': 3.0.1(@csstools/css-tokenizer@3.0.1)
      '@csstools/css-tokenizer': 3.0.1
@@ -1460,7 +1760,7 @@ snapshots:
      postcss-selector-parser: 6.1.2
      postcss-value-parser: 4.2.0
      style-search: 0.1.0
-      stylelint: 16.9.0
+      stylelint: 17.0.0
  '@trysound/sax@0.2.0': {}
@@ -1487,7 +1787,7 @@ snapshots:
  ajv@8.17.1:
    dependencies:
      fast-deep-equal: 3.1.3
-      fast-uri: 3.0.2
+      fast-uri: 3.1.0
      json-schema-traverse: 1.0.0
      require-from-string: 2.0.2
@@ -1501,21 +1801,20 @@ snapshots:
  ansi-regex@5.0.1: {}
-  ansi-regex@6.1.0: {}
+  ansi-regex@6.2.2: {}
  ansi-styles@2.2.1: {}
-  ansi-styles@3.2.1:
-    dependencies:
-      color-convert: 1.9.3
  ansi-styles@4.3.0:
    dependencies:
      color-convert: 2.0.1
-  argparse@2.0.1: {}
+  anymatch@3.1.3:
+    dependencies:
+      normalize-path: 3.0.0
+      picomatch: 2.3.1
-  array-union@2.1.0: {}
+  argparse@2.0.1: {}
  asap@2.0.6: {}
@@ -1545,7 +1844,9 @@ snapshots:
  balanced-match@1.0.2: {}
-  balanced-match@2.0.0: {}
+  balanced-match@3.0.1: {}
+  binary-extensions@2.3.0: {}
  boolbase@1.0.0: {}
@@ -1558,6 +1859,14 @@ snapshots:
    dependencies:
      fill-range: 7.1.1
+  cacheable@2.3.2:
+    dependencies:
+      '@cacheable/memory': 2.0.7
+      '@cacheable/utils': 2.3.3
+      hookified: 1.15.0
+      keyv: 5.6.0
+      qified: 0.6.0
  call-bind@1.0.7:
    dependencies:
      es-define-property: 1.0.0
@@ -1583,19 +1892,25 @@ snapshots:
      strip-ansi: 3.0.1
      supports-color: 2.0.0
-  chalk@2.4.2:
-    dependencies:
-      ansi-styles: 3.2.1
-      escape-string-regexp: 1.0.5
-      supports-color: 5.5.0
  character-parser@2.2.0:
    dependencies:
      is-regex: 1.1.4
-  chokidar@4.0.1:
+  chokidar@3.6.0:
+    dependencies:
+      anymatch: 3.1.3
+      braces: 3.0.3
+      glob-parent: 5.1.2
+      is-binary-path: 2.1.0
+      is-glob: 4.0.3
+      normalize-path: 3.0.0
+      readdirp: 3.6.0
+    optionalDependencies:
+      fsevents: 2.3.3
+  chokidar@4.0.3:
    dependencies:
-      readdirp: 4.0.2
+      readdirp: 4.1.2
  clean-css@4.2.4:
    dependencies:
@@ -1679,11 +1994,11 @@ snapshots:
  cosmiconfig@9.0.0:
    dependencies:
      env-paths: 2.2.1
-      import-fresh: 3.3.0
+      import-fresh: 3.3.1
-      js-yaml: 4.1.0
+      js-yaml: 4.1.1
      parse-json: 5.2.0
-  css-functions-list@3.2.2: {}
+  css-functions-list@3.2.3: {}
  css-select@4.3.0:
    dependencies:
@@ -1705,6 +2020,11 @@ snapshots:
      mdn-data: 2.0.30
      source-map-js: 1.2.1
+  css-tree@3.1.0:
+    dependencies:
+      mdn-data: 2.12.2
+      source-map-js: 1.2.1
  css-what@6.1.0: {}
  cssesc@3.0.0: {}
@@ -1715,9 +2035,11 @@ snapshots:
  cssom@0.5.0: {}
-  debug@4.3.7:
+  debug@4.4.3(supports-color@5.5.0):
    dependencies:
      ms: 2.1.3
+    optionalDependencies:
+      supports-color: 5.5.0
  decamelize@1.2.0: {}
@@ -1727,9 +2049,8 @@ snapshots:
      es-errors: 1.3.0
      gopd: 1.0.1
-  dir-glob@3.0.1:
+  detect-libc@2.1.2:
-    dependencies:
+    optional: true
-      path-type: 4.0.0
  doctypes@1.1.0: {}
@@ -1759,7 +2080,7 @@ snapshots:
  env-paths@2.2.1: {}
-  error-ex@1.3.2:
+  error-ex@1.3.4:
    dependencies:
      is-arrayish: 0.2.1
@@ -1777,7 +2098,7 @@ snapshots:
  fast-deep-equal@3.1.3: {}
-  fast-glob@3.3.2:
+  fast-glob@3.3.3:
    dependencies:
      '@nodelib/fs.stat': 2.0.5
      '@nodelib/fs.walk': 1.2.8
@@ -1785,39 +2106,45 @@ snapshots:
      merge2: 1.4.1
      micromatch: 4.0.8
-  fast-uri@3.0.2: {}
+  fast-uri@3.1.0: {}
  fastest-levenshtein@1.0.16: {}
-  fastq@1.17.1:
+  fastq@1.20.1:
    dependencies:
-      reusify: 1.0.4
+      reusify: 1.1.0
  fecha@4.2.3: {}
-  file-entry-cache@9.1.0:
+  file-entry-cache@11.1.2:
    dependencies:
-      flat-cache: 5.0.0
+      flat-cache: 6.1.20
  fill-range@7.1.1:
    dependencies:
      to-regex-range: 5.0.1
-  flat-cache@5.0.0:
+  flat-cache@6.1.20:
    dependencies:
-      flatted: 3.3.1
+      cacheable: 2.3.2
-      keyv: 4.5.4
+      flatted: 3.3.3
+      hookified: 1.15.0
-  flatted@3.3.1: {}
+  flatted@3.3.3: {}
  fn.name@1.1.0: {}
  fs.realpath@1.0.0: {}
+  fsevents@2.3.3:
+    optional: true
  function-bind@1.1.2: {}
  get-caller-file@2.0.5: {}
+  get-east-asian-width@1.4.0: {}
  get-intrinsic@1.2.4:
    dependencies:
      es-errors: 1.3.0
@@ -1849,14 +2176,14 @@ snapshots:
      kind-of: 6.0.3
      which: 1.3.1
-  globby@11.1.0:
+  globby@16.1.0:
    dependencies:
-      array-union: 2.1.0
+      '@sindresorhus/merge-streams': 4.0.0
-      dir-glob: 3.0.1
+      fast-glob: 3.3.3
-      fast-glob: 3.3.2
+      ignore: 7.0.5
-      ignore: 5.3.2
+      is-path-inside: 4.0.0
-      merge2: 1.4.1
+      slash: 5.1.0
-      slash: 3.0.0
+      unicorn-magic: 0.4.0
  globjoin@0.1.4: {}
@@ -1870,7 +2197,7 @@ snapshots:
  has-flag@3.0.0: {}
-  has-flag@4.0.0: {}
+  has-flag@5.0.1: {}
  has-property-descriptors@1.0.2:
    dependencies:
@@ -1884,24 +2211,34 @@ snapshots:
    dependencies:
      has-symbols: 1.0.3
+  hashery@1.4.0:
+    dependencies:
+      hookified: 1.15.0
  hasown@2.0.2:
    dependencies:
      function-bind: 1.1.2
-  html-tags@3.3.1: {}
+  hookified@1.15.0: {}
+  html-tags@5.1.0: {}
+  ignore-by-default@1.0.1: {}
-  ignore@5.3.2: {}
+  ignore@7.0.5: {}
-  immutable@4.3.7: {}
+  immutable@5.1.4: {}
-  import-fresh@3.3.0:
+  import-fresh@3.3.1:
    dependencies:
      parent-module: 1.0.1
      resolve-from: 4.0.0
+  import-meta-resolve@4.2.0: {}
  imurmurhash@0.1.4: {}
-  include-media@2.0.0: {}
+  include-media@https://codeload.github.com/eduardoboucas/include-media/tar.gz/423e815c8ed041e43184657e2acf03608f55a854: {}
  inflight@1.0.6:
    dependencies:
@@ -1916,12 +2253,16 @@ snapshots:
    dependencies:
      svg-sprite: 2.0.4
-  iro-sass@git+https://git.vulpes.one/git/iro-sass.git#351814a60e8909814c7120db96314a1a25d962bd: {}
+  iro-sass@git+https://git.vulpes.one/git/iro-sass.git#9df4a41f916389715d505730268459326068e9b6: {}
  is-arrayish@0.2.1: {}
  is-arrayish@0.3.2: {}
+  is-binary-path@2.1.0:
+    dependencies:
+      binary-extensions: 2.3.0
  is-buffer@1.1.6: {}
  is-core-module@2.14.0:
@@ -1948,6 +2289,8 @@ snapshots:
  is-number@7.0.0: {}
+  is-path-inside@4.0.0: {}
  is-plain-object@5.0.0: {}
  is-promise@2.2.2: {}
@@ -1971,7 +2314,9 @@ snapshots:
    dependencies:
      argparse: 2.0.1
-  json-buffer@3.0.1: {}
+  js-yaml@4.1.1:
+    dependencies:
+      argparse: 2.0.1
  json-parse-even-better-errors@2.3.1: {}
@@ -1982,9 +2327,9 @@ snapshots:
      is-promise: 2.2.2
      promise: 7.3.1
-  keyv@4.5.4:
+  keyv@5.6.0:
    dependencies:
-      json-buffer: 3.0.1
+      '@keyv/serialize': 1.1.1
  kind-of@3.2.2:
    dependencies:
@@ -1994,6 +2339,8 @@ snapshots:
  known-css-properties@0.34.0: {}
+  known-css-properties@0.37.0: {}
  kuler@2.0.0: {}
  lazy-cache@1.0.4: {}
@@ -2019,13 +2366,15 @@ snapshots:
  longest@1.0.1: {}
-  mathml-tag-names@2.1.3: {}
+  mathml-tag-names@4.0.0: {}
  mdn-data@2.0.14: {}
  mdn-data@2.0.30: {}
-  meow@13.2.0: {}
+  mdn-data@2.12.2: {}
+  meow@14.0.0: {}
  merge2@1.4.1: {}
@@ -2048,7 +2397,23 @@ snapshots:
  mustache@4.2.0: {}
-  nanoid@3.3.7: {}
+  nanoid@3.3.11: {}
+  node-addon-api@7.1.1:
+    optional: true
+  nodemon@3.1.11:
+    dependencies:
+      chokidar: 3.6.0
+      debug: 4.4.3(supports-color@5.5.0)
+      ignore-by-default: 1.0.1
+      minimatch: 3.1.2
+      pstree.remy: 1.1.8
+      semver: 7.7.3
+      simple-update-notifier: 2.0.0
+      supports-color: 5.5.0
+      touch: 3.1.1
+      undefsafe: 2.0.5
  normalize-path@3.0.0: {}
@@ -2072,8 +2437,8 @@ snapshots:
  parse-json@5.2.0:
    dependencies:
-      '@babel/code-frame': 7.25.7
+      '@babel/code-frame': 7.28.6
-      error-ex: 1.3.2
+      error-ex: 1.3.4
      json-parse-even-better-errors: 2.3.1
      lines-and-columns: 1.2.4
@@ -2081,47 +2446,47 @@ snapshots:
  path-parse@1.0.7: {}
-  path-type@4.0.0: {}
  picocolors@1.0.1: {}
-  picocolors@1.1.0: {}
+  picocolors@1.1.1: {}
  picomatch@2.3.1: {}
+  picomatch@4.0.3:
+    optional: true
  postcss-media-query-parser@0.2.3: {}
  postcss-resolve-nested-selector@0.1.6: {}
-  postcss-safe-parser@7.0.1(postcss@8.4.47):
+  postcss-safe-parser@7.0.1(postcss@8.5.6):
    dependencies:
-      postcss: 8.4.47
+      postcss: 8.5.6
-  postcss-scss@4.0.9(postcss@8.4.38):
+  postcss-scss@4.0.9(postcss@8.5.6):
    dependencies:
-      postcss: 8.4.38
+      postcss: 8.5.6
  postcss-selector-parser@6.1.2:
    dependencies:
      cssesc: 3.0.0
      util-deprecate: 1.0.2
-  postcss-sorting@8.0.2(postcss@8.4.38):
+  postcss-selector-parser@7.1.1:
    dependencies:
-      postcss: 8.4.38
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
-  postcss-value-parser@4.2.0: {}
-  postcss@8.4.38:
+  postcss-sorting@9.1.0(postcss@8.5.6):
    dependencies:
-      nanoid: 3.3.7
+      postcss: 8.5.6
-      picocolors: 1.0.1
-      source-map-js: 1.2.1
+  postcss-value-parser@4.2.0: {}
-  postcss@8.4.47:
+  postcss@8.5.6:
    dependencies:
-      nanoid: 3.3.7
+      nanoid: 3.3.11
-      picocolors: 1.1.0
+      picocolors: 1.1.1
      source-map-js: 1.2.1
  prettysize@2.0.0: {}
@@ -2132,6 +2497,8 @@ snapshots:
    dependencies:
      asap: 2.0.6
+  pstree.remy@1.1.8: {}
  pug-attrs@2.0.4:
    dependencies:
      constantinople: 3.1.2
@@ -2275,6 +2642,10 @@ snapshots:
      pug-runtime: 3.0.1
      pug-strip-comments: 2.0.0
+  qified@0.6.0:
+    dependencies:
+      hookified: 1.15.0
  queue-microtask@1.2.3: {}
  readable-stream@2.3.8:
@@ -2293,7 +2664,11 @@ snapshots:
      string_decoder: 1.3.0
      util-deprecate: 1.0.2
-  readdirp@4.0.2: {}
+  readdirp@3.6.0:
+    dependencies:
+      picomatch: 2.3.1
+  readdirp@4.1.2: {}
  regenerator-runtime@0.11.1: {}
@@ -2309,15 +2684,13 @@ snapshots:
  resolve-from@4.0.0: {}
-  resolve-from@5.0.0: {}
  resolve@1.22.8:
    dependencies:
      is-core-module: 2.14.0
      path-parse: 1.0.7
      supports-preserve-symlinks-flag: 1.0.0
-  reusify@1.0.4: {}
+  reusify@1.1.0: {}
  right-align@0.1.3:
    dependencies:
@@ -2333,11 +2706,15 @@ snapshots:
  safe-stable-stringify@2.4.3: {}
-  sass@1.79.4:
+  sass@1.97.3:
    dependencies:
-      chokidar: 4.0.1
+      chokidar: 4.0.3
-      immutable: 4.3.7
+      immutable: 5.1.4
      source-map-js: 1.2.1
+    optionalDependencies:
+      '@parcel/watcher': 2.5.6
+  semver@7.7.3: {}
  set-function-length@1.2.2:
    dependencies:
@@ -2354,7 +2731,11 @@ snapshots:
    dependencies:
      is-arrayish: 0.3.2
-  slash@3.0.0: {}
+  simple-update-notifier@2.0.0:
+    dependencies:
+      semver: 7.7.3
+  slash@5.1.0: {}
  slice-ansi@4.0.0:
    dependencies:
@@ -2378,6 +2759,11 @@ snapshots:
      is-fullwidth-code-point: 3.0.0
      strip-ansi: 6.0.1
+  string-width@8.1.0:
+    dependencies:
+      get-east-asian-width: 1.4.0
+      strip-ansi: 7.1.2
  string_decoder@1.1.1:
    dependencies:
      safe-buffer: 5.1.2
@@ -2394,32 +2780,32 @@ snapshots:
    dependencies:
      ansi-regex: 5.0.1
-  strip-ansi@7.1.0:
+  strip-ansi@7.1.2:
    dependencies:
-      ansi-regex: 6.1.0
+      ansi-regex: 6.2.2
  style-search@0.1.0: {}
-  stylelint-config-recess-order@5.1.1(stylelint@16.9.0):
+  stylelint-config-recess-order@7.6.0(stylelint-order@7.0.1(stylelint@17.0.0))(stylelint@17.0.0):
    dependencies:
-      stylelint: 16.9.0
+      stylelint: 17.0.0
-      stylelint-order: 6.0.4(stylelint@16.9.0)
+      stylelint-order: 7.0.1(stylelint@17.0.0)
-  stylelint-config-sass-guidelines@12.1.0(postcss@8.4.38)(stylelint@16.9.0):
+  stylelint-config-sass-guidelines@12.1.0(postcss@8.5.6)(stylelint@17.0.0):
    dependencies:
-      '@stylistic/stylelint-plugin': 3.1.1(stylelint@16.9.0)
+      '@stylistic/stylelint-plugin': 3.1.1(stylelint@17.0.0)
-      postcss: 8.4.38
+      postcss: 8.5.6
-      postcss-scss: 4.0.9(postcss@8.4.38)
+      postcss-scss: 4.0.9(postcss@8.5.6)
-      stylelint: 16.9.0
+      stylelint: 17.0.0
-      stylelint-scss: 6.7.0(stylelint@16.9.0)
+      stylelint-scss: 6.7.0(stylelint@17.0.0)
-  stylelint-order@6.0.4(stylelint@16.9.0):
+  stylelint-order@7.0.1(stylelint@17.0.0):
    dependencies:
-      postcss: 8.4.38
+      postcss: 8.5.6
-      postcss-sorting: 8.0.2(postcss@8.4.38)
+      postcss-sorting: 9.1.0(postcss@8.5.6)
-      stylelint: 16.9.0
+      stylelint: 17.0.0
-  stylelint-scss@6.7.0(stylelint@16.9.0):
+  stylelint-scss@6.7.0(stylelint@17.0.0):
    dependencies:
      css-tree: 2.3.1
      is-plain-object: 5.0.0
@@ -2428,67 +2814,64 @@ snapshots:
      postcss-resolve-nested-selector: 0.1.6
      postcss-selector-parser: 6.1.2
      postcss-value-parser: 4.2.0
-      stylelint: 16.9.0
+      stylelint: 17.0.0
-  stylelint@16.9.0:
+  stylelint@17.0.0:
    dependencies:
-      '@csstools/css-parser-algorithms': 3.0.1(@csstools/css-tokenizer@3.0.1)
+      '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
-      '@csstools/css-tokenizer': 3.0.1
+      '@csstools/css-syntax-patches-for-csstree': 1.0.26
-      '@csstools/media-query-list-parser': 3.0.1(@csstools/css-parser-algorithms@3.0.1(@csstools/css-tokenizer@3.0.1))(@csstools/css-tokenizer@3.0.1)
+      '@csstools/css-tokenizer': 4.0.0
-      '@csstools/selector-specificity': 4.0.0(postcss-selector-parser@6.1.2)
+      '@csstools/media-query-list-parser': 5.0.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
-      '@dual-bundle/import-meta-resolve': 4.1.0
+      '@csstools/selector-resolve-nested': 4.0.0(postcss-selector-parser@7.1.1)
-      balanced-match: 2.0.0
+      '@csstools/selector-specificity': 6.0.0(postcss-selector-parser@7.1.1)
+      balanced-match: 3.0.1
      colord: 2.9.3
      cosmiconfig: 9.0.0
-      css-functions-list: 3.2.2
+      css-functions-list: 3.2.3
-      css-tree: 2.3.1
+      css-tree: 3.1.0
-      debug: 4.3.7
+      debug: 4.4.3(supports-color@5.5.0)
-      fast-glob: 3.3.2
+      fast-glob: 3.3.3
      fastest-levenshtein: 1.0.16
-      file-entry-cache: 9.1.0
+      file-entry-cache: 11.1.2
      global-modules: 2.0.0
-      globby: 11.1.0
+      globby: 16.1.0
      globjoin: 0.1.4
-      html-tags: 3.3.1
+      html-tags: 5.1.0
-      ignore: 5.3.2
+      ignore: 7.0.5
+      import-meta-resolve: 4.2.0
      imurmurhash: 0.1.4
      is-plain-object: 5.0.0
-      known-css-properties: 0.34.0
+      known-css-properties: 0.37.0
-      mathml-tag-names: 2.1.3
+      mathml-tag-names: 4.0.0
-      meow: 13.2.0
+      meow: 14.0.0
      micromatch: 4.0.8
      normalize-path: 3.0.0
-      picocolors: 1.1.0
+      picocolors: 1.1.1
-      postcss: 8.4.47
+      postcss: 8.5.6
-      postcss-resolve-nested-selector: 0.1.6
+      postcss-safe-parser: 7.0.1(postcss@8.5.6)
-      postcss-safe-parser: 7.0.1(postcss@8.4.47)
+      postcss-selector-parser: 7.1.1
-      postcss-selector-parser: 6.1.2
      postcss-value-parser: 4.2.0
-      resolve-from: 5.0.0
+      string-width: 8.1.0
-      string-width: 4.2.3
+      supports-hyperlinks: 4.4.0
-      strip-ansi: 7.1.0
-      supports-hyperlinks: 3.1.0
      svg-tags: 1.0.0
-      table: 6.8.2
+      table: 6.9.0
-      write-file-atomic: 5.0.1
+      write-file-atomic: 7.0.0
    transitivePeerDependencies:
      - supports-color
      - typescript
+  supports-color@10.2.2: {}
  supports-color@2.0.0: {}
  supports-color@5.5.0:
    dependencies:
      has-flag: 3.0.0
-  supports-color@7.2.0:
+  supports-hyperlinks@4.4.0:
-    dependencies:
-      has-flag: 4.0.0
-  supports-hyperlinks@3.1.0:
    dependencies:
-      has-flag: 4.0.0
+      has-flag: 5.0.1
-      supports-color: 7.2.0
+      supports-color: 10.2.2
  supports-preserve-symlinks-flag@1.0.0: {}
@@ -2524,7 +2907,7 @@ snapshots:
      picocolors: 1.0.1
      stable: 0.1.8
-  table@6.8.2:
+  table@6.9.0:
    dependencies:
      ajv: 8.17.1
      lodash.truncate: 4.4.2
@@ -2546,6 +2929,8 @@ snapshots:
  token-stream@1.0.0: {}
+  touch@3.1.1: {}
  triple-beam@1.4.1: {}
  uglify-js@2.8.29:
@@ -2558,6 +2943,10 @@ snapshots:
  uglify-to-browserify@1.0.2:
    optional: true
+  undefsafe@2.0.5: {}
+  unicorn-magic@0.4.0: {}
  util-deprecate@1.0.2: {}
  vinyl@2.2.1:
@@ -2621,7 +3010,7 @@ snapshots:
  wrappy@1.0.2: {}
-  write-file-atomic@5.0.1:
+  write-file-atomic@7.0.0:
    dependencies:
      imurmurhash: 0.1.4
      signal-exit: 4.1.0
diff --git a/src/_apca.scss b/src/_apca.scss
index c65f46e..5baff02 100644
--- a/src/_apca.scss
+++ b/src/_apca.scss
@@ -7,121 +7,121 @@
 @use 'sass:math';
 $SA98G: (
-    mainTRC:     2.4,
+        mainTRC:     2.4,
-    sRco:        .2126729, 
+        sRco:        .2126729, 
-    sGco:        .7151522, 
+        sGco:        .7151522, 
-    sBco:        .072175,
+        sBco:        .072175,
-    normBG:      .56, 
+        normBG:      .56, 
-    normTXT:     .57,
+        normTXT:     .57,
-    revTXT:      .62,
+        revTXT:      .62,
-    revBG:       .65,
+        revBG:       .65,
-    blkThrs:     .022,
+        blkThrs:     .022,
-    blkClmp:     1.414,
+        blkClmp:     1.414,
-    scaleBoW:    1.14,
+        scaleBoW:    1.14,
-    scaleWoB:    1.14,
+        scaleWoB:    1.14,
-    loBoWoffset: .027,
+        loBoWoffset: .027,
-    loWoBoffset: .027,
+        loWoBoffset: .027,
-    deltaYmin:   .0005,
+        deltaYmin:   .0005,
-    loClip:      .0001,
+        loClip:      .0001,
-    mFactor:     1.9468554433171,
+        mFactor:     1.9468554433171,
-    mOffsetIn:   .0387393816571401,
+        mOffsetIn:   .0387393816571401,
-    mExpAdj:     .283343396420869,
+        mExpAdj:     .283343396420869,
-    mOffsetOut:  .312865795870758,
+        mOffsetOut:  .312865795870758,
 );
 @function sRGB_to_Y($color) {
-    $rgb: color.to-space($color, rgb);
+        $rgb: color.to-space($color, rgb);
-    @return map.get($SA98G, sRco) * math.pow(math.div(color.channel($rgb, 'red'), 255), map.get($SA98G, mainTRC)) +
+        @return map.get($SA98G, sRco) * math.pow(math.div(color.channel($rgb, 'red'), 255), map.get($SA98G, mainTRC)) +
-        map.get($SA98G, sGco) * math.pow(math.div(color.channel($rgb, 'green'), 255), map.get($SA98G, mainTRC)) +
+                map.get($SA98G, sGco) * math.pow(math.div(color.channel($rgb, 'green'), 255), map.get($SA98G, mainTRC)) +
-        map.get($SA98G, sBco) * math.pow(math.div(color.channel($rgb, 'blue'), 255), map.get($SA98G, mainTRC));
+                map.get($SA98G, sBco) * math.pow(math.div(color.channel($rgb, 'blue'), 255), map.get($SA98G, mainTRC));
 }
 @function Y_to_sRGB($y) {
-    $c: math.round(math.pow($y, math.div(1, map.get($SA98G, mainTRC))) * 255);
+        $c: math.round(math.pow($y, math.div(1, map.get($SA98G, mainTRC))) * 255);
-    @return rgb($c, $c, $c);
+        @return rgb($c, $c, $c);
 }
 @function contrast($txtY, $bgY) {
-    /* stylelint-disable-next-line @stylistic/number-no-trailing-zeros */
+        /* stylelint-disable-next-line @stylistic/number-no-trailing-zeros */
-    $icp: .0 1.1;
+        $icp: .0 1.1;
-    @if math.min($txtY, $bgY) < list.nth($icp, 1) or math.max($txtY, $bgY) > list.nth($icp, 2) {
+        @if math.min($txtY, $bgY) < list.nth($icp, 1) or math.max($txtY, $bgY) > list.nth($icp, 2) {
-        @return 0;
+                @return 0;
-    }
+        }
-    @if $txtY <= map.get($SA98G, blkThrs) {
+        @if $txtY <= map.get($SA98G, blkThrs) {
-        $txtY: $txtY + math.pow(map.get($SA98G, blkThrs) - $txtY, map.get($SA98G, blkClmp));
+                $txtY: $txtY + math.pow(map.get($SA98G, blkThrs) - $txtY, map.get($SA98G, blkClmp));
-    }
+        }
-    @if $bgY <= map.get($SA98G, blkThrs) {
+        @if $bgY <= map.get($SA98G, blkThrs) {
-        $bgY: $bgY + math.pow(map.get($SA98G, blkThrs) - $bgY, map.get($SA98G, blkClmp));
+                $bgY: $bgY + math.pow(map.get($SA98G, blkThrs) - $bgY, map.get($SA98G, blkClmp));
-    }
+        }
-    @if math.abs($bgY - $txtY) < map.get($SA98G, deltaYmin) {
+        @if math.abs($bgY - $txtY) < map.get($SA98G, deltaYmin) {
-        @return 0;
+                @return 0;
-    }
+        }
-    $outputContrast: 0;
+        $outputContrast: 0;
-    @if $bgY > $txtY {
+        @if $bgY > $txtY {
-        $SAPC: map.get($SA98G, scaleBoW) * (math.pow($bgY, map.get($SA98G, normBG)) - math.pow($txtY, map.get($SA98G, normTXT)));
+                $SAPC: map.get($SA98G, scaleBoW) * (math.pow($bgY, map.get($SA98G, normBG)) - math.pow($txtY, map.get($SA98G, normTXT)));
        
-        @if $SAPC >= map.get($SA98G, loClip) {
+                @if $SAPC >= map.get($SA98G, loClip) {
-            $outputContrast: $SAPC - map.get($SA98G, loBoWoffset);
+                        $outputContrast: $SAPC - map.get($SA98G, loBoWoffset);
-        }
+                }
-    } @else {
+        } @else {
-        $SAPC: map.get($SA98G, scaleWoB) * (math.pow($bgY, map.get($SA98G, revBG)) - math.pow($txtY, map.get($SA98G, revTXT)));
+                $SAPC: map.get($SA98G, scaleWoB) * (math.pow($bgY, map.get($SA98G, revBG)) - math.pow($txtY, map.get($SA98G, revTXT)));
        
-        @if $SAPC <= -1 * map.get($SA98G, loClip) {
+                @if $SAPC <= -1 * map.get($SA98G, loClip) {
-            $outputContrast: $SAPC + map.get($SA98G, loWoBoffset);
+                        $outputContrast: $SAPC + map.get($SA98G, loWoBoffset);
-        }
+                }
-    }
+        }
-    @return $outputContrast * 100;
+        @return $outputContrast * 100;
 }
 @function reverse($contrast, $knownY, $knownType: 'bg') {
-    $unknownY:   $knownY;
+        $unknownY:   $knownY;
-    $knownExp:   0;
+        $knownExp:   0;
-    $unknownExp: 0;
+        $unknownExp: 0;
-    $scale:  map.get($SA98G, if($contrast > 0, scaleBoW, scaleWoB));
+        $scale:  map.get($SA98G, if(sass($contrast > 0): scaleBoW; else: scaleWoB));
-    $offset: map.get($SA98G, if($contrast > 0, loBoWoffset, loWoBoffset));
+        $offset: map.get($SA98G, if(sass($contrast > 0): loBoWoffset; else: loWoBoffset));
-    $contrast: math.div($contrast * .01 + $offset, $scale);
+        $contrast: math.div($contrast * .01 + $offset, $scale);
-    @if $knownY <= map.get($SA98G, blkThrs) {
+        @if $knownY <= map.get($SA98G, blkThrs) {
-        $knownY: $knownY + math.pow(map.get($SA98G, blkThrs) - $knownY, map.get($SA98G, blkClmp));
+                $knownY: $knownY + math.pow(map.get($SA98G, blkThrs) - $knownY, map.get($SA98G, blkClmp));
-    }
+        }
-    @if $knownType == 'bg' {
+        @if $knownType == 'bg' {
-        $knownExp:   map.get($SA98G, if($contrast > 0, normBG, revBG));
+                $knownExp:   map.get($SA98G, if(sass($contrast > 0): normBG; else: revBG));
-        $unknownExp: map.get($SA98G, if($contrast > 0, normTXT, revTXT));
+                $unknownExp: map.get($SA98G, if(sass($contrast > 0): normTXT; else: revTXT));
-        $unknownY:   math.pow(math.pow($knownY, $knownExp) - $contrast, math.div(1, $unknownExp));
+                $unknownY:   math.pow(math.pow($knownY, $knownExp) - $contrast, math.div(1, $unknownExp));
-    } @else {
+        } @else {
-        $knownExp:   map.get($SA98G, if($contrast > 0, normTXT, revTXT));
+                $knownExp:   map.get($SA98G, if(sass($contrast > 0): normTXT; else: revTXT));
-        $unknownExp: map.get($SA98G, if($contrast > 0, normBG, revBG));
+                $unknownExp: map.get($SA98G, if(sass($contrast > 0): normBG; else: revBG));
-        $unknownY:   math.pow($contrast + math.pow($knownY, $knownExp), math.div(1, $unknownExp));
+                $unknownY:   math.pow($contrast + math.pow($knownY, $knownExp), math.div(1, $unknownExp));
-    }
+        }
-    @if '#{$unknownY}' == '#{math.sqrt(-1)}' {
+        @if '#{$unknownY}' == '#{math.sqrt(-1)}' {
-        @return false;
+                @return false;
-    }
+        }
-    @if $unknownY > 1.06 or $unknownY < 0 {
+        @if $unknownY > 1.06 or $unknownY < 0 {
-        @return false;
+                @return false;
-    }
+        }
-    @if $unknownY <= map.get($SA98G, blkThrs) {
+        @if $unknownY <= map.get($SA98G, blkThrs) {
-        $unknownY: math.pow(($unknownY + map.get($SA98G, mOffsetIn)) * map.get($SA98G, mFactor), math.div(map.get($SA98G, mExpAdj), map.get($SA98G, blkClmp))) * math.div(1, map.get($SA98G, mFactor)) - map.get($SA98G, mOffsetOut);
+                $unknownY: math.pow(($unknownY + map.get($SA98G, mOffsetIn)) * map.get($SA98G, mFactor), math.div(map.get($SA98G, mExpAdj), map.get($SA98G, blkClmp))) * math.div(1, map.get($SA98G, mFactor)) - map.get($SA98G, mOffsetOut);
-    }
+        }
-    $unknownY: math.max(math.min($unknownY, 1), 0);
+        $unknownY: math.max(math.min($unknownY, 1), 0);
-    @return $unknownY;
+        @return $unknownY;
 }
diff --git a/src/_config.defaults.scss b/src/_config.defaults.scss
index f2dd420..861b600 100644
--- a/src/_config.defaults.scss
+++ b/src/_config.defaults.scss
@@ -4,184 +4,194 @@
 @use 'iro-sass/src/easing' as easing;
 $static-colors: (
-    --base: hsl(0, 0%, 98%),
+        --base: hsl(0, 0%, 98%),
-    --levels: (
+        --levels: (
-        --100:  math.div(0, 12) * 110 - 10,
+                --100:  math.div(0, 12) * 110 - 10,
-        --200:  math.div(1, 12) * 110 - 10,
+                --200:  math.div(1, 12) * 110 - 10,
-        --300:  math.div(2, 12) * 110 - 10,
+                --300:  math.div(2, 12) * 110 - 10,
-        --400:  math.div(3, 12) * 110 - 10,
+                --400:  math.div(3, 12) * 110 - 10,
-        --500:  math.div(4, 12) * 110 - 10,
+                --500:  math.div(4, 12) * 110 - 10,
-        --600:  math.div(5, 12) * 110 - 10,
+                --600:  math.div(5, 12) * 110 - 10,
-        --700:  math.div(6, 12) * 110 - 10,
+                --700:  math.div(6, 12) * 110 - 10,
-        --800:  math.div(7, 12) * 110 - 10,
+                --800:  math.div(7, 12) * 110 - 10,
-        --900:  math.div(8, 12) * 110 - 10,
+                --900:  math.div(8, 12) * 110 - 10,
-        --1000: math.div(9, 12) * 110 - 10,
+                --1000: math.div(9, 12) * 110 - 10,
-        --1100: math.div(10, 12) * 110 - 10,
+                --1100: math.div(10, 12) * 110 - 10,
-        --1200: math.div(11, 12) * 110 - 10,
+                --1200: math.div(11, 12) * 110 - 10,
-        --1300: math.div(12, 12) * 110 - 10,
+                --1300: math.div(12, 12) * 110 - 10,
-    ),
+        ),
-    --palettes: (
+        --palettes: (
-        --blue:   oklch(56% .14 275.25),
+                --blue:   oklch(56% .14 275.25),
-        --purple: oklch(56% .14 305.58),
+                --purple: oklch(56% .14 305.58),
-        --red:    oklch(56% .14 14.69),
+                --red:    oklch(56% .14 14.69),
-        --green:  oklch(56% .14 150.48),
+                --green:  oklch(56% .14 150.48),
-        --yellow: oklch(56% .14 84.08),
+                --yellow: oklch(56% .14 84.08),
-    ),
+        ),
-    --transparents: (
+        --transparents: (
-        --100: 0,
+                --100: 0,
-        --200: .1,
+                --200: .1,
-        --300: .25,
+                --300: .25,
-        --400: .4,
+                --400: .4,
-        --500: .55,
+                --500: .55,
-        --600: .7,
+                --600: .7,
-        --700: .8,
+                --700: .8,
-        --800: .9,
+                --800: .9,
-        --900: 1,
+                --900: 1,
-    ),
+        ),
 );
 $semantic-colors-common: (
-    --accent:          --blue,
+        --accent:          --blue,
-    --accent-static:   --blue-static,
+        --accent-static:   --blue-static,
-    --positive:        --green,
+        --positive:        --green,
-    --positive-static: --green-static,
+        --positive-static: --green-static,
-    --negative:        --red,
+        --negative:        --red,
-    --negative-static: --red-static,
+        --negative-static: --red-static,
-    --warning:         --yellow,
+        --warning:         --yellow,
-    --warning-static:  --yellow-static,
+        --warning-static:  --yellow-static,
-    --focus-raw:       --accent,
+        --focus-raw:       --accent,
-    --focus-static:    --accent-static,
+        --focus-static:    --accent-static,
-    --border-mute:     --base --200,
+        --border-mute:     --base --200,
-    --border:          --base --300,
+        --border:          --base --300,
-    --border-strong:   --base --400,
+        --border-strong:   --base --400,
-    --text-disabled:   --base --500,
+        --text-disabled:   --base --500,
-    --text-mute-more:  --base --600,
+        --text-mute-more:  --base --600,
-    --text-mute:       --base --700,
+        --text-mute:       --base --700,
-    --text:            --base --800,
+        --text:            --base --800,
-    --heading:         --base --900,
+        --heading:         --base --900,
-    --focus: (
+        --focus: (
-        --outline:       --focus-raw --400,
+                --outline:       --focus-raw --400,
-        --border-mute:   --focus-raw --900,
+                --border-mute:   --focus-raw --900,
-        --border:        --focus-raw --1000,
+                --border:        --focus-raw --1000,
-        --border-text:   --focus-raw --1000-text,
+                --border-text:   --focus-raw --1000-text,
-        --border-strong: --focus-raw --1100,
+                --border-strong: --focus-raw --1100,
-        --text:          --focus-raw --1100,
+                --text:          --focus-raw --1100,
-    ),
+        ),
 );
 $theme-light: (
-    --levels: (
+        --levels: (
-        --grays: (
+                --grays: (
-            --50:  (-8) (.2 + .8 * easing.ease(math.div(0, 12))),
+                        --50:  (-8) (.2 + .8 * easing.ease(math.div(0, 12))),
-            --75:  (-4) (.2 + .8 * easing.ease(math.div(1, 12))),
+                        --75:  (-4) (.2 + .8 * easing.ease(math.div(1, 12))),
-            --100: (0) (.2 + .8 * easing.ease(math.div(2, 12))),
+                        --100: (0) (.2 + .8 * easing.ease(math.div(2, 12))),
        
-            --200: (easing.cubic-bezier(.2, .1, .9, .9, math.div(1, 7)) * 98) (.2 + .8 * easing.ease(math.div(3, 12))),
+                        --200: (easing.cubic-bezier(.2, .1, .9, .9, math.div(1, 7)) * 98) (.2 + .8 * easing.ease(math.div(3, 12))),
-            --300: (easing.cubic-bezier(.2, .1, .9, .9, math.div(2, 7)) * 98) (.2 + .8 * easing.ease(math.div(4, 12))),
+                        --300: (easing.cubic-bezier(.2, .1, .9, .9, math.div(2, 7)) * 98) (.2 + .8 * easing.ease(math.div(4, 12))),
-            --400: (easing.cubic-bezier(.2, .1, .9, .9, math.div(3, 7)) * 98) (.2 + .8 * easing.ease(math.div(5, 12))),
+                        --400: (easing.cubic-bezier(.2, .1, .9, .9, math.div(3, 7)) * 98) (.2 + .8 * easing.ease(math.div(5, 12))),
        
-            --500: (easing.cubic-bezier(.2, .1, .9, .9, math.div(4, 7)) * 98) (.2 + .8 * easing.ease(math.div(6, 12))),
+                        --500: (easing.cubic-bezier(.2, .1, .9, .9, math.div(4, 7)) * 98) (.2 + .8 * easing.ease(math.div(6, 12))),
-            --600: (easing.cubic-bezier(.2, .1, .9, .9, math.div(5, 7)) * 98) (.2 + .8 * easing.ease(math.div(7, 12))),
+                        --600: (easing.cubic-bezier(.2, .1, .9, .9, math.div(5, 7)) * 98) (.2 + .8 * easing.ease(math.div(7, 12))),
-            --700: (easing.cubic-bezier(.2, .1, .9, .9, math.div(6, 7)) * 98) (.2 + .8 * easing.ease(math.div(8, 12))),
+                        --700: (easing.cubic-bezier(.2, .1, .9, .9, math.div(6, 7)) * 98) (.2 + .8 * easing.ease(math.div(8, 12))),
-            --800: (easing.cubic-bezier(.2, .1, .9, .9, math.div(7, 7)) * 98) (.2 + .8 * easing.ease(math.div(9, 12))),
+                        --800: (easing.cubic-bezier(.2, .1, .9, .9, math.div(7, 7)) * 98) (.2 + .8 * easing.ease(math.div(9, 12))),
-            --900: (106) (.2 + .8 * easing.ease(math.div(10, 12))),
+                        --900: (106) (.2 + .8 * easing.ease(math.div(10, 12))),
-        ),
+                ),
-        --colors: (
+                --colors: (
-            --100:  (math.div(0, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(0, 12))),
+                        --100:  (math.div(0, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(0, 12))),
-            --200:  (math.div(1, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(1, 12))),
+                        --200:  (math.div(1, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(1, 12))),
-            --300:  (math.div(2, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(2, 12))),
+                        --300:  (math.div(2, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(2, 12))),
-            --400:  (math.div(3, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(3, 12))),
+                        --400:  (math.div(3, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(3, 12))),
-            --500:  (math.div(4, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(4, 12))),
+                        --500:  (math.div(4, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(4, 12))),
-            --600:  (math.div(5, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(5, 12))),
+                        --600:  (math.div(5, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(5, 12))),
-            --700:  (math.div(6, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(6, 12))),
+                        --700:  (math.div(6, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(6, 12))),
-            --800:  (math.div(7, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(7, 12))),
+                        --800:  (math.div(7, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(7, 12))),
-            --900:  (math.div(8, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(8, 12))),
+                        --900:  (math.div(8, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(8, 12))),
-            --1000: (math.div(9, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(9, 12))),
+                        --1000: (math.div(9, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(9, 12))),
-            --1100: (math.div(10, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(10, 12))),
+                        --1100: (math.div(10, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(10, 12))),
-            --1200: (math.div(11, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(11, 12))),
+                        --1200: (math.div(11, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(11, 12))),
-            --1300: (math.div(12, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(12, 12))),
+                        --1300: (math.div(12, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(12, 12))),
-        ),
+                ),
-    ),
+        ),
    
-    --palettes: (
+        --palettes: (
-        --base:   hsl(260, 70%, 98%)    --grays,
+                --base:   hsl(260, 70%, 98%)    --grays,
-        --blue:   oklch(56% .16 275.25) --colors,
+                --blue:   oklch(56% .16 275.25) --colors,
-        --purple: oklch(56% .16 305.58) --colors,
+                --purple: oklch(56% .16 305.58) --colors,
-        --red:    oklch(56% .16 14.69)  --colors,
+                --red:    oklch(56% .16 14.69)  --colors,
-        --green:  oklch(56% .16 150.48) --colors,
+                --green:  oklch(56% .16 150.48) --colors,
-        --yellow: oklch(56% .16 84.08)  --colors,
+                --yellow: oklch(56% .16 84.08)  --colors,
-    ),
+        ),
-    --semantic: map.merge($semantic-colors-common, (
+        --semantic: map.merge($semantic-colors-common, (
-        --bg-l2:   --base --50,
+                --bg-l2:   --base --50,
-        --bg-l1:   --base --100,
+                --bg-l1:   --base --100,
-        --bg-base: --base --200,
+                --bg-base: --base --200,
-    )),
-    --constants: (
+                --box: (
-        --shadow: rgba(#000, .15),
+                        --border:        --base --200,
-    ),
+                        --border-strong: --base --300,
+                ),
+        )),
+        --constants: (
+                --shadow: rgba(#000, .1),
+        ),
 );
 $theme-dark: (
-    --levels: (
+        --levels: (
-        --grays: (
+                --grays: (
-            --50:  (4.4) (.3 + .7 * easing.ease(math.div(10, 12))),
+                        --50:  (4.4) (.3 + .7 * easing.ease(math.div(10, 12))),
-            --75:  (2.2) (.3 + .7 * easing.ease(math.div(9, 12))),
+                        --75:  (2.5) (.3 + .7 * easing.ease(math.div(9, 12))),
-            --100: (0) (.3 + .7 * easing.ease(math.div(8, 12))),
+                        --100: (0) (.3 + .7 * easing.ease(math.div(8, 12))),
        
-            --200: (easing.cubic-bezier(.3, .1, .8, .8, math.div(1, 8)) * -108) (.3 + .7 * easing.ease(math.div(7, 12))),
+                        --200: (easing.cubic-bezier(.3, .1, .8, .8, math.div(1, 8)) * -108) (.3 + .7 * easing.ease(math.div(7, 12))),
-            --300: (easing.cubic-bezier(.3, .1, .8, .8, math.div(2, 8)) * -108) (.3 + .7 * easing.ease(math.div(6, 12))),
+                        --300: (easing.cubic-bezier(.3, .1, .8, .8, math.div(2, 8)) * -108) (.3 + .7 * easing.ease(math.div(6, 12))),
-            --400: (easing.cubic-bezier(.3, .1, .8, .8, math.div(3, 8)) * -108) (.3 + .7 * easing.ease(math.div(5, 12))),
+                        --400: (easing.cubic-bezier(.3, .1, .8, .8, math.div(3, 8)) * -108) (.3 + .7 * easing.ease(math.div(5, 12))),
        
-            --500: (easing.cubic-bezier(.3, .1, .8, .8, math.div(4, 8)) * -108) (.3 + .7 * easing.ease(math.div(4, 12))),
+                        --500: (easing.cubic-bezier(.3, .1, .8, .8, math.div(4, 8)) * -108) (.3 + .7 * easing.ease(math.div(4, 12))),
-            --600: (easing.cubic-bezier(.3, .1, .8, .8, math.div(5, 8)) * -108) (.3 + .7 * easing.ease(math.div(3, 12))),
+                        --600: (easing.cubic-bezier(.3, .1, .8, .8, math.div(5, 8)) * -108) (.3 + .7 * easing.ease(math.div(3, 12))),
-            --700: (easing.cubic-bezier(.3, .1, .8, .8, math.div(6, 8)) * -108) (.3 + .7 * easing.ease(math.div(2, 12))),
+                        --700: (easing.cubic-bezier(.3, .1, .8, .8, math.div(6, 8)) * -108) (.3 + .7 * easing.ease(math.div(2, 12))),
-            --800: (easing.cubic-bezier(.3, .1, .8, .8, math.div(7, 8)) * -108) (.3 + .7 * easing.ease(math.div(1, 12))),
+                        --800: (easing.cubic-bezier(.3, .1, .8, .8, math.div(7, 8)) * -108) (.3 + .7 * easing.ease(math.div(1, 12))),
-            --900: (easing.cubic-bezier(.3, .1, .8, .8, math.div(8, 8)) * -108) (.3 + .7 * easing.ease(math.div(0, 12))),
+                        --900: (easing.cubic-bezier(.3, .1, .8, .8, math.div(8, 8)) * -108) (.3 + .7 * easing.ease(math.div(0, 12))),
-        ),
+                ),
-        --colors: (
+                --colors: (
-            --100:  (math.div(0, 12) * -100 - 5) (.3 + .7 * easing.ease(math.div(0, 12))),
+                        --100:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(0, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(0, 12))),
-            --200:  (math.div(1, 12) * -100 - 5) (.3 + .7 * easing.ease(math.div(1, 12))),
+                        --200:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(1, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(1, 12))),
-            --300:  (math.div(2, 12) * -100 - 5) (.3 + .7 * easing.ease(math.div(2, 12))),
+                        --300:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(2, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(2, 12))),
-            --400:  (math.div(3, 12) * -100 - 5) (.3 + .7 * easing.ease(math.div(3, 12))),
+                        --400:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(3, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(3, 12))),
-            --500:  (math.div(4, 12) * -100 - 5) (.3 + .7 * easing.ease(math.div(4, 12))),
+                        --500:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(4, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(4, 12))),
-            --600:  (math.div(5, 12) * -100 - 5) (.3 + .7 * easing.ease(math.div(5, 12))),
+                        --600:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(5, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(5, 12))),
-            --700:  (math.div(6, 12) * -100 - 5) (.3 + .7 * easing.ease(math.div(6, 12))),
+                        --700:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(6, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(6, 12))),
-            --800:  (math.div(7, 12) * -100 - 5) (.3 + .7 * easing.ease(math.div(7, 12))),
+                        --800:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(7, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(7, 12))),
-            --900:  (math.div(8, 12) * -100 - 5) (.3 + .7 * easing.ease(math.div(8, 12))),
+                        --900:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(8, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(8, 12))),
-            --1000: (math.div(9, 12) * -100 - 5) (.3 + .7 * easing.ease(math.div(9, 12))),
+                        --1000: (easing.cubic-bezier(.2, .1, .8, .8, math.div(9, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(9, 12))),
-            --1100: (math.div(10, 12) * -100 - 5) (.3 + .7 * easing.ease(math.div(10, 12))),
+                        --1100: (easing.cubic-bezier(.2, .1, .8, .8, math.div(10, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(10, 12))),
-            --1200: (math.div(11, 12) * -100 - 5) (.3 + .7 * easing.ease(math.div(11, 12))),
+                        --1200: (easing.cubic-bezier(.2, .1, .8, .8, math.div(11, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(11, 12))),
-            --1300: (math.div(12, 12) * -100 - 5) (.3 + .7 * easing.ease(math.div(12, 12))),
+                        --1300: (easing.cubic-bezier(.2, .1, .8, .8, math.div(12, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(12, 12))),
-        ),
+                ),
-    ),
+        ),
    
-    --palettes: (
+        --palettes: (
-        --base:   hsl(257, 7%, 19%)     --grays,
+                --base:   hsl(257, 7%, 20%)     --grays,
-        --blue:   oklch(56% .16 275.25) --colors,
+                --blue:   oklch(56% .16 275.25) --colors,
-        --purple: oklch(56% .16 305.58) --colors,
+                --purple: oklch(56% .16 305.58) --colors,
-        --red:    oklch(56% .16 14.69)  --colors,
+                --red:    oklch(56% .16 14.69)  --colors,
-        --green:  oklch(56% .16 150.48) --colors,
+                --green:  oklch(56% .16 150.48) --colors,
-        --yellow: oklch(56% .16 84.08)  --colors,
+                --yellow: oklch(56% .16 84.08)  --colors,
-    ),
+        ),
+        --semantic: map.merge($semantic-colors-common, (
+                --bg-base: --base --50,
+                --bg-l1:   --base --75,
+                --bg-l2:   --base --100,
-    --semantic: map.merge($semantic-colors-common, (
+                --box: (
-        --bg-base: --base --50,
+                        --border:        --base --100,
-        --bg-l1:   --base --75,
+                        --border-strong: --base --100,
-        --bg-l2:   --base --100,
+                ),
-    )),
+        )),
-    --constants: (
+        --constants: (
-        --shadow: rgba(#000, .5),
+                --shadow: rgba(#000, .35),
-    ),
+        ),
 );
diff --git a/src/_config.scss b/src/_config.scss
index 284d6e7..764d953 100644
--- a/src/_config.scss
+++ b/src/_config.scss
@@ -18,10 +18,12 @@ $theme-dark: map.deep-merge(def.$theme-dark, $theme-dark-override) !default;
 $themes-override: () !default;
 $themes: map.deep-merge((
-    --main: (
+        --main: (
-        light: $theme-light,
+                light: $theme-light,
-        dark:  $theme-dark,
+                dark:  $theme-dark,
-    ),
+        ),
 ), $themes-override) !default;
 $theme-default: list.nth(map.keys($themes), 1) !default;
+$explicit-dark-theme: false !default;
diff --git a/src/_core.scss b/src/_core.scss
index 7b7a384..7be4b0d 100644
--- a/src/_core.scss
+++ b/src/_core.scss
@@ -9,30 +9,37 @@
 @forward 'core.vars';
 @mixin styles {
-    @each $theme-name, $theme in vars.$themes {
+        @each $theme-name, $theme in vars.$themes {
-        @if $theme-name == config.$theme-default {
+                @if $theme-name == config.$theme-default {
-            :root {
+                        :root {
-                @include props.materialize(map.values(meta.module-variables('vars')));
+                                @include props.materialize(map.values(meta.module-variables('vars')));
                
-                @if map.has-key($theme, 'dark') {
+                                @if map.has-key($theme, 'dark') {
-                    @media (prefers-color-scheme: dark) {
+                                        @media (prefers-color-scheme: dark) {
-                        @include props.materialize(map.get($theme, 'dark'));
+                                                @include props.materialize(map.get($theme, 'dark'));
-                    }
+                                        }
-                }
+                                }
-            }
+                        }
-        } @else {
-            @include bem.theme(string.slice($theme-name, 3)) {
-                @include props.materialize(map.get($theme, 'light'));
-                color:            props.get(vars.$theme, --text);
+                        @if map.has-key($theme, 'dark') and config.$explicit-dark-theme {
-                background-color: props.get(vars.$theme, --bg-base);
+                                @include bem.theme('dark') {
+                                        @include props.materialize(map.values(meta.module-variables('vars')));
+                                        @include props.materialize(map.get($theme, 'dark'));
+                                }
+                        }
+                } @else {
+                        @include bem.theme(string.slice($theme-name, 3)) {
+                                @include props.materialize(map.get($theme, 'light'));
-                @if map.has-key($theme, 'dark') {
+                                color:            props.get(vars.$theme, --text);
-                    @media (prefers-color-scheme: dark) {
+                                background-color: props.get(vars.$theme, --bg-base);
-                        @include props.materialize(map.get($theme, 'dark'));
-                    }
+                                @if map.has-key($theme, 'dark') {
-                }
+                                        @media (prefers-color-scheme: dark) {
-            }
+                                                @include props.materialize(map.get($theme, 'dark'));
-        }
+                                        }
-    }
+                                }
+                        }
+                }
+        }
 }
diff --git a/src/_core.vars.scss b/src/_core.vars.scss
index 53c7067..486b4af 100644
--- a/src/_core.vars.scss
+++ b/src/_core.vars.scss
@@ -61,7 +61,7 @@ $font--standard--family:           props.def(--font--standard--family, ('Inter',
 $font--standard--line-height:      props.def(--font--standard--line-height, 1.5) !default;
 $font--standard--feature-settings: props.def(--font--standard--feature-settings, ('\'ss01\'')) !default;
-$font--headline--family:           props.def(--font--headline--family, ('Inter', props.get($font--standard--family))) !default;
+$font--headline--family:           props.def(--font--headline--family, props.get($font--standard--family)) !default;
 $font--headline--line-height:      props.def(--font--headline--line-height, 1.3) !default;
 $font--headline--weight:           props.def(--font--headline--weight, 800) !default;
 $font--headline--feature-settings: props.def(--font--headline--feature-settings, ('\'opsz\'' 32, '\'ss01\'', '\'cv06\'')) !default;
@@ -84,16 +84,25 @@ $font-size--800:  props.def(--font-size--800, functions.px-to-rem(40px)) !defaul
 $font-size--900:  props.def(--font-size--900, functions.px-to-rem(45px)) !default;
 $font-size--1000: props.def(--font-size--1000, functions.px-to-rem(50px)) !default;
 $font-size--1100: props.def(--font-size--1100, functions.px-to-rem(60px)) !default;
+$font-size--1200: props.def(--font-size--1200, functions.px-to-rem(70px)) !default;
+$font-size--1300: props.def(--font-size--1300, functions.px-to-rem(80px)) !default;
 $border-width--thick:  props.def(--border-width--thick, 4px) !default;
 $border-width--medium: props.def(--border-width--medium, 2px) !default;
 $border-width--thin:   props.def(--border-width--thin, 1px) !default;
-$shadow--x:    props.def(--shadow--x, 0) !default;
+$shadow--l1--x:    props.def(--shadow--l1--x, 0) !default;
-$shadow--y:    props.def(--shadow--y, 1px) !default;
+$shadow--l1--y:    props.def(--shadow--l1--y, 2px) !default;
-$shadow--blur: props.def(--shadow--blur, 4px) !default;
+$shadow--l1--blur: props.def(--shadow--l1--blur, 3px) !default;
+$shadow--l1--grow: props.def(--shadow--l1--grow, -1px) !default;
-$rounding: props.def(--rounding, 4px) !default;
+$shadow--l2--x:    props.def(--shadow--l2--x, 0) !default;
+$shadow--l2--y:    props.def(--shadow--l2--y, 5px) !default;
+$shadow--l2--blur: props.def(--shadow--l2--blur, 12px) !default;
+$shadow--l2--grow: props.def(--shadow--l2--grow, -4px) !default;
+$rounding:     props.def(--rounding, 12px) !default;
+$rounding--sm: props.def(--rounding--sm, 4px) !default;
 $key-focus--outline-width: props.def(--key-focus--outline-width, props.get($border-width--thick)) !default;
 $key-focus--border-width:  props.def(--key-focus--border-width, props.get($border-width--medium)) !default;
@@ -102,13 +111,15 @@ $key-focus--border-offset: props.def(--key-focus--border-offset, props.get($bord
 $list--indent:         props.def(--list--indent, props.get($size--400)) !default;
 $list--compact-indent: props.def(--list--compact-indent, props.get($size--250)) !default;
+$sticky-top-offset: props.def(--sticky-top-offset, 0rem) !default;
 //
 $-static-colors: ();
 @each $palette-name, $palette in map.get(config.$static-colors, --palettes) {
-    $palette: fn.palette($palette, map.get(config.$static-colors, --levels), map.get(config.$static-colors, --base));
+        $palette: fn.palette($palette, map.get(config.$static-colors, --levels), map.get(config.$static-colors, --base));
-    $-static-colors: map.merge($-static-colors, ( $palette-name: $palette ));
+        $-static-colors: map.merge($-static-colors, ( $palette-name: $palette ));
 }
 //
@@ -116,11 +127,11 @@ $-static-colors: ();
 $transparent-colors: props.def(--transparent-colors, (), 'color');
 @each $palette-name, $palette in (--black: #000 #fff, --white: #fff #000) {
-    $color: list.nth($palette, 1);
+        $color: list.nth($palette, 1);
-    $text:  list.nth($palette, 2);
+        $text:  list.nth($palette, 2);
-    $palette: fn.transparent-palette($color, $text, map.get(config.$static-colors, --transparents));
+        $palette: fn.transparent-palette($color, $text, map.get(config.$static-colors, --transparents));
-    $transparent-colors: props.merge($transparent-colors, ( $palette-name: $palette ));
+        $transparent-colors: props.merge($transparent-colors, ( $palette-name: $palette ));
 }
 //
@@ -128,47 +139,47 @@ $transparent-colors: props.def(--transparent-colors, (), 'color');
 $themes: ();
 @each $theme-name, $theme in config.$themes {
-    @each $variant-name, $variant in $theme {
+        @each $variant-name, $variant in $theme {
-        @if $variant != null {
+                @if $variant != null {
-            $compiled: props.def(--colors, (), 'color');
+                        $compiled: props.def(--colors, (), 'color');
-            @each $palette-name, $palette in $-static-colors {
+                        @each $palette-name, $palette in $-static-colors {
-                $compiled: props.merge($compiled, ( #{$palette-name}-static: $palette ));
+                                $compiled: props.merge($compiled, ( #{$palette-name}-static: $palette ));
-            }
+                        }
-            @each $palette-name, $palette in map.get($variant, --palettes) {
+                        @each $palette-name, $palette in map.get($variant, --palettes) {
-                $base-color: list.nth($palette, 1);
+                                $base-color: list.nth($palette, 1);
-                $levels:     list.nth($palette, 2);
+                                $levels:     list.nth($palette, 2);
-                $palette: fn.palette($base-color, map.get($variant, --levels, $levels), list.nth(map.get($variant, --palettes, --base), 1));
+                                $palette: fn.palette($base-color, map.get($variant, --levels, $levels), list.nth(map.get($variant, --palettes, --base), 1));
-                $compiled: props.merge($compiled, ( $palette-name: $palette ));
+                                $compiled: props.merge($compiled, ( $palette-name: $palette ));
-            }
+                        }
-            @each $color, $value in map.get($variant, --constants) {
+                        @each $color, $value in map.get($variant, --constants) {
-                $compiled: props.merge($compiled, ( $color: $value ));
+                                $compiled: props.merge($compiled, ( $color: $value ));
-            }
+                        }
-            @each $color, $ref in map.get($variant, --semantic) {
+                        @each $color, $ref in map.get($variant, --semantic) {
-                $res: ();
+                                $res: ();
-                @if meta.type-of($ref) == 'map' {
+                                @if meta.type-of($ref) == 'map' {
-                    @each $key, $r in $ref {
+                                        @each $key, $r in $ref {
-                        $re1: list.nth($r, 1);
+                                                $re1: list.nth($r, 1);
-                        $re2: functions.list-slice($r, 2);
+                                                $re2: functions.list-slice($r, 2);
-                        $res: map.merge($res, ($key: props.get($compiled, $re1, $re2...)));
+                                                $res: map.merge($res, ($key: props.get($compiled, $re1, $re2...)));
-                    }
+                                        }
-                } @else {
+                                } @else {
-                    $ref1: list.nth($ref, 1);
+                                        $ref1: list.nth($ref, 1);
-                    $ref2: functions.list-slice($ref, 2);
+                                        $ref2: functions.list-slice($ref, 2);
-                    $res:  props.get($compiled, $ref1, $ref2...);
+                                        $res:  props.get($compiled, $ref1, $ref2...);
-                }
+                                }
-                $compiled: props.merge($compiled, ( $color: $res ));
+                                $compiled: props.merge($compiled, ( $color: $res ));
-            }
+                        }
-            $themes: map.set($themes, $theme-name, $variant-name, $compiled);
+                        $themes: map.set($themes, $theme-name, $variant-name, $compiled);
-        }
+                }
-    }
+        }
 }
 $theme: map.get($themes, config.$theme-default, light) !default;
diff --git a/src/_functions.scss b/src/_functions.scss
index 62caf8c..71dae99 100644
--- a/src/_functions.scss
+++ b/src/_functions.scss
@@ -8,59 +8,63 @@
 @use 'apca';
 @function palette($base-color, $levels, $ref-color: $base-color) {
-    $base-lch: color.to-space($base-color, oklch);
+        $base-lch: color.to-space($base-color, oklch);
-    $ref-lch: color.to-space($ref-color, oklch);
+        $ref-lch: color.to-space($ref-color, oklch);
-    $ref-l: color.channel($ref-lch, 'lightness');
+        $ref-l: color.channel($ref-lch, 'lightness');
-    $ref-y: apca.sRGB_to_Y($ref-lch);
+        $ref-y: apca.sRGB_to_Y($ref-lch);
-    $black-y: apca.sRGB_to_Y(#000);
+        $black-y: apca.sRGB_to_Y(#000);
-    $white-y: apca.sRGB_to_Y(#fff);
+        $white-y: apca.sRGB_to_Y(#fff);
-    $palette: ();
+        $palette: ();
-    @each $key, $level in $levels {
+        @each $key, $level in $levels {
-        $color: list.nth($level, 1);
+                $color: list.nth($level, 1);
-        $y: 0;
+                $y: 0;
-        $c: 1;
+                $c: 1;
+                $h: 0deg;
-        @if list.length($level) > 1 {
+                @if list.length($level) > 1 {
-            $c: list.nth($level, 2);
+                        $c: list.nth($level, 2);
-        }
+                }
+                @if list.length($level) > 2 {
+                        $h: list.nth($level, 3);
+                }
-        @if meta.type-of($color) != 'color' {
+                @if meta.type-of($color) != 'color' {
-            $y: apca.reverse($color, $ref-y);
+                        $y: apca.reverse($color, $ref-y);
-            $l: color.channel($base-lch, 'lightness');
+                        $l: color.channel($base-lch, 'lightness');
-            @if $y != false {
+                        @if $y != false {
-                $l: color.channel(apca.Y_to_sRGB($y), 'lightness', oklch);
+                                $l: color.channel(apca.Y_to_sRGB($y), 'lightness', oklch);
-            } @else {
+                        } @else {
-                $y: $ref-y;
+                                $y: $ref-y;
-            }
+                        }
-            $color: oklch($l ($c * color.channel($base-lch, 'chroma')) color.channel($base-lch, 'hue'));
+                        $color: oklch($l ($c * color.channel($base-lch, 'chroma')) ($h + color.channel($base-lch, 'hue')));
-        } @else {
+                } @else {
-            $y: apca.sRGB_to_Y($color);
+                        $y: apca.sRGB_to_Y($color);
-        }
+                }
-        $contrast-black: apca.contrast($black-y, $y);
+                $contrast-black: apca.contrast($black-y, $y);
-        $contrast-white: apca.contrast($white-y, $y);
+                $contrast-white: apca.contrast($white-y, $y);
-        $palette: map.set($palette, $key, $color);
+                $palette: map.set($palette, $key, $color);
-        $palette: map.set($palette, #{$key}-text, if(math.abs($contrast-black) > math.abs($contrast-white), #000, #fff));
+                $palette: map.set($palette, #{$key}-text, if(sass(math.abs($contrast-black) > math.abs($contrast-white)): #000; else: #fff));
-    }
+        }
-    @return $palette;
+        @return $palette;
 }
 @function transparent-palette($color, $text, $alphas) {
-    $palette: (
+        $palette: (
-        --text: $text,
+                --text: $text,
-    );
+        );
-    @each $key, $alpha in $alphas {
+        @each $key, $alpha in $alphas {
-        $palette: map.set($palette, $key, rgba($color, $alpha));
+                $palette: map.set($palette, $key, rgba($color, $alpha));
-    }
+        }
-    @return $palette;
+        @return $palette;
 }
diff --git a/src/_iro-design.scss b/src/_iro-design.scss
index 3132199..83d5a9d 100644
--- a/src/_iro-design.scss
+++ b/src/_iro-design.scss
@@ -1,68 +1,73 @@
 $breakpoints: (
-    lg: 1340px,
+        lg: 1340px,
-    md: 900px,
+        md: 900px,
-    sm: 620px,
+        sm: 620px,
-    xs: 400px,
+        xs: 400px,
 ) !default;
 @use 'iro-sass/src/responsive' with (
-    $named-viewports: $breakpoints
+        $named-viewports: $breakpoints
 );
 @forward 'include-media/dist/include-media' as media--* with (
-    $breakpoints: $breakpoints,
+        $breakpoints: $breakpoints,
-    $unit-intervals: (
+        $unit-intervals: (
-        'px':  1,
+                'px':  1,
-        'em':  .01,
+                'em':  .01,
-        'rem': .01,
+                'rem': .01,
-        '':    0
+                '':    0
-    ) !default,
+        ) !default,
 );
 @forward 'config.defaults' as config-defaults--*;
 @forward 'config' as config--*;
 @forward 'props' as props--*;
 @forward 'core' as core--*;
+@forward 'layers' as layers--*;
-@forward 'layouts/button-group' as l-button-group--*;
 @forward 'layouts/card-list' as l-card-list--*;
 @forward 'layouts/container' as l-container--*;
 @forward 'layouts/flex' as l-flex--*;
 @forward 'layouts/form' as l-form--*;
+@forward 'layouts/hlist' as l-hlist--*;
 @forward 'layouts/media' as l-media--*;
 @forward 'layouts/overflow' as l-overflow--*;
 @forward 'layouts/split-view' as l-split-view--*;
 @forward 'scopes/implicit' as s-implicit--*;
+@forward 'scopes/body' as s-body--*;
 @forward 'scopes/blockquotes' as s-blockquotes--*;
 @forward 'scopes/code' as s-code--*;
+@forward 'scopes/figures' as s-figures--*;
 @forward 'scopes/headings' as s-headings--*;
 @forward 'scopes/links' as s-links--*;
 @forward 'scopes/lists' as s-lists--*;
 @forward 'scopes/tables' as s-tables--*;
-@forward 'objects/action-button' as o-action-button--*;
 @forward 'objects/alert' as o-alert--*;
 @forward 'objects/avatar' as o-avatar--*;
 @forward 'objects/backdrop' as o-backdrop--*;
-@forward 'objects/badge' as o-badge--*;
 @forward 'objects/button' as o-button--*;
 @forward 'objects/card' as o-card--*;
 @forward 'objects/checkbox' as o-checkbox--*;
 @forward 'objects/divider' as o-divider--*;
 @forward 'objects/emoji' as o-emoji--*;
+@forward 'objects/figure' as o-figure--*;
 @forward 'objects/field-label' as o-field-label--*;
 @forward 'objects/heading' as o-heading--*;
 @forward 'objects/icon' as o-icon--*;
 @forward 'objects/lightbox' as o-lightbox--*;
 @forward 'objects/menu' as o-menu--*;
+@forward 'objects/navbar' as o-navbar--*;
 @forward 'objects/palette' as o-palette--*;
+@forward 'objects/placeholders' as o-placeholders--*;
 @forward 'objects/popover' as o-popover--*;
 @forward 'objects/radio' as o-radio--*;
 @forward 'objects/side-nav' as o-side-nav--*;
 @forward 'objects/status-indicator' as o-status-indicator--*;
 @forward 'objects/switch' as o-switch--*;
 @forward 'objects/table' as o-table--*;
+@forward 'objects/tabbar' as o-tabbar--*;
 @forward 'objects/text-field' as o-text-field--*;
 @forward 'objects/thumbnail' as o-thumbnail--*;
diff --git a/src/_layers.scss b/src/_layers.scss
new file mode 100644
index 0000000..2a80190
--- /dev/null
+++ b/src/_layers.scss
@@ -0,0 +1,3 @@
+@mixin styles {
+        @layer scope, theme, object, layout, component, utility;
+}
diff --git a/src/_mixins.scss b/src/_mixins.scss
index 49d3b6f..8899778 100644
--- a/src/_mixins.scss
+++ b/src/_mixins.scss
@@ -2,37 +2,37 @@
 @use 'functions' as fn;
 @mixin set-font($basis, $values: ()) {
-    $values: fn.set-font($basis, $values);
+        $values: fn.set-font($basis, $values);
-    @each $prop, $value in $values {
+        @each $prop, $value in $values {
-        @if $value != null {
+                @if $value != null {
-            #{$prop}: $value;
+                        #{$prop}: $value;
-        }
+                }
-    }
+        }
 }
 @mixin heading-strong($size) {
-    font-size: fn.global-dim(list.join(--heading, $size));
+        font-size: fn.global-dim(list.join(--heading, $size));
-    color:     fn.global-color(--heading);
+        color:     fn.global-color(--heading);
 }
 @mixin heading-medium($size) {
-    @include set-font(--standard, (
+        @include set-font(--standard, (
-        --line-height: null,
+                --line-height: null,
-        --size:        fn.global-dim(list.join(--heading, $size)),
+                --size:        fn.global-dim(list.join(--heading, $size)),
-        --weight:      bold
+                --weight:      bold
-    ));
+        ));
-    color: fn.global-color(--heading);
+        color: fn.global-color(--heading);
 }
 @mixin heading-faint($size) {
-    @include set-font(--standard, (
+        @include set-font(--standard, (
-        --line-height: null,
+                --line-height: null,
-        --size:        fn.global-dim(list.join(--heading, $size)),
+                --size:        fn.global-dim(list.join(--heading, $size)),
-        --weight:      500,
+                --weight:      500,
-        --spacing:     1px
+                --spacing:     1px
-    ));
+        ));
-    color: fn.global-color(--text-mute);
+        color: fn.global-color(--text-mute);
 }
diff --git a/src/_props.scss b/src/_props.scss
index ffba054..0b2306d 100644
--- a/src/_props.scss
+++ b/src/_props.scss
@@ -8,34 +8,41 @@
 @use 'iro-sass/src/props';
 @mixin materialize-at-root($ref) {
-    @if meta.type-of($ref) == 'map' {
+        @if meta.type-of($ref) == 'map' {
-        $ref: map.values($ref);
+                $ref: map.values($ref);
-    }
+        }
-    :root {
+        :root {
-        @include props.materialize($ref, null);
+                @include props.materialize($ref, null);
-        @include props.materialize($ref, 'color');
+                @include props.materialize($ref, 'color');
-        @each $breakpoint in map.keys(media.$breakpoints) {
+                @each $breakpoint in map.keys(media.$breakpoints) {
-            @include media.media('<=#{$breakpoint}') {
+                        @include media.media('<=#{$breakpoint}') {
-                @include props.materialize($ref, $breakpoint);
+                                @include props.materialize($ref, $breakpoint);
-            }
+                        }
-        }
+                }
-        @media (prefers-color-scheme: dark) {
+                @media (prefers-color-scheme: dark) {
-            @include props.materialize($ref, 'dark');
+                        @include props.materialize($ref, 'dark');
-        }
+                }
-    }
+        }
-    @each $theme-name in map.keys(config.$themes) {
+        @if config.$explicit-dark-theme {
-        @if $theme-name != config.$theme-default {
+                @include bem.theme('dark') {
-            @include bem.theme(string.slice($theme-name, 3)) {
+                        @include props.materialize($ref, 'color');
-                @include props.materialize($ref, 'color');
+                        @include props.materialize($ref, 'dark');
+                }
+        }
-                @media (prefers-color-scheme: dark) {
+        @each $theme-name in map.keys(config.$themes) {
-                    @include props.materialize($ref, 'dark');
+                @if $theme-name != config.$theme-default {
-                }
+                        @include bem.theme(string.slice($theme-name, 3)) {
-            }
+                                @include props.materialize($ref, 'color');
-        }
-    }
+                                @media (prefers-color-scheme: dark) {
+                                        @include props.materialize($ref, 'dark');
+                                }
+                        }
+                }
+        }
 }
diff --git a/src/_themes.scss b/src/_themes.scss
index 32b617b..fe5a0cb 100644
--- a/src/_themes.scss
+++ b/src/_themes.scss
@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:string';
 @use 'iro-sass/src/bem';
 @use 'iro-sass/src/props';
 @use 'include-media/dist/include-media' as media;
@@ -7,67 +8,67 @@
 @forward 'core.vars';
 @mixin styles {
-    @include bem.theme('base') {
+        @include bem.theme('base') {
-        background-color: props.get(vars.$theme, --bg-base);
+                background-color: props.get(vars.$theme, --bg-base);
-        @include bem.suffix('light') {
+                @include bem.suffix('light') {
-            @media (prefers-color-scheme: light) {
+                        @media (prefers-color-scheme: light) {
-                background-color: props.get(vars.$theme, --bg-base);
+                                background-color: props.get(vars.$theme, --bg-base);
-            }
+                        }
-        }
+                }
-        @include bem.suffix('dark') {
+                @include bem.suffix('dark') {
-            @media (prefers-color-scheme: dark) {
+                        @media (prefers-color-scheme: dark) {
-                background-color: props.get(vars.$theme, --bg-base);
+                                background-color: props.get(vars.$theme, --bg-base);
-            }
+                        }
-        }
+                }
-    }
+        }
-    @include bem.theme('l1') {
+        @include bem.theme('l1') {
-        background-color: props.get(vars.$theme, --bg-l1);
+                background-color: props.get(vars.$theme, --bg-l1);
-        @include bem.suffix('light') {
+                @include bem.suffix('light') {
-            @media (prefers-color-scheme: light) {
+                        @media (prefers-color-scheme: light) {
-                background-color: props.get(vars.$theme, --bg-l1);
+                                background-color: props.get(vars.$theme, --bg-l1);
-            }
+                        }
-        }
+                }
-        @include bem.suffix('dark') {
+                @include bem.suffix('dark') {
-            @media (prefers-color-scheme: dark) {
+                        @media (prefers-color-scheme: dark) {
-                background-color: props.get(vars.$theme, --bg-l1);
+                                background-color: props.get(vars.$theme, --bg-l1);
-            }
+                        }
-        }
+                }
-    }
+        }
-    @include bem.theme('l2') {
+        @include bem.theme('l2') {
-        background-color: props.get(vars.$theme, --bg-l2);
+                background-color: props.get(vars.$theme, --bg-l2);
-        @include bem.suffix('light') {
+                @include bem.suffix('light') {
-            @media (prefers-color-scheme: light) {
+                        @media (prefers-color-scheme: light) {
-                background-color: props.get(vars.$theme, --bg-l2);
+                                background-color: props.get(vars.$theme, --bg-l2);
-            }
+                        }
-        }
+                }
-        @include bem.suffix('dark') {
+                @include bem.suffix('dark') {
-            @media (prefers-color-scheme: dark) {
+                        @media (prefers-color-scheme: dark) {
-                background-color: props.get(vars.$theme, --bg-l2);
+                                background-color: props.get(vars.$theme, --bg-l2);
-            }
+                        }
-        }
+                }
-    }
+        }
-    @include bem.theme('50') {
+        @include bem.theme('50') {
-        background-color: props.get(vars.$theme, --base, --50);
+                background-color: props.get(vars.$theme, --base, --50);
-        @include bem.suffix('light') {
+                @include bem.suffix('light') {
-            @media (prefers-color-scheme: light) {
+                        @media (prefers-color-scheme: light) {
-                background-color: props.get(vars.$theme, --base, --50);
+                                background-color: props.get(vars.$theme, --base, --50);
-            }
+                        }
-        }
+                }
-        @include bem.suffix('dark') {
+                @include bem.suffix('dark') {
-            @media (prefers-color-scheme: dark) {
+                        @media (prefers-color-scheme: dark) {
-                background-color: props.get(vars.$theme, --base, --50);
+                                background-color: props.get(vars.$theme, --base, --50);
-            }
+                        }
-        }
+                }
-    }
+        }
 }
diff --git a/src/_utils.scss b/src/_utils.scss
index 598eae4..3dae3b6 100644
--- a/src/_utils.scss
+++ b/src/_utils.scss
@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:string';
 @use 'iro-sass/src/bem';
 @use 'iro-sass/src/props';
 @use 'include-media/dist/include-media' as media;
@@ -8,297 +9,372 @@
 /* stylelint-disable-next-line scss/dollar-variable-pattern */
 $-dirs: (
-    '': '',
+        '': '',
-    'bs': '-block-start',
+        'b':  '-block',
-    'be': '-block-end',
+        'bs': '-block-start',
-    'b':  '-block',
+        'be': '-block-end',
-    'is': '-inline-start',
+        'i':  '-inline',
-    'ie': '-inline-end',
+        'is': '-inline-start',
-    'i':  '-inline',
+        'ie': '-inline-end',
 ) !default;
 /* stylelint-disable-next-line scss/dollar-variable-pattern */
 $-sizes: (
-    0: vars.$size--0,
+        0: vars.$size--0,
-    10: vars.$size--10,
+        10: vars.$size--10,
-    50: vars.$size--50,
+        50: vars.$size--50,
-    75: vars.$size--75,
+        75: vars.$size--75,
-    100: vars.$size--100,
+        100: vars.$size--100,
-    125: vars.$size--125,
+        125: vars.$size--125,
-    200: vars.$size--200,
+        200: vars.$size--200,
-    400: vars.$size--400,
+        400: vars.$size--400,
-    700: vars.$size--700,
+        700: vars.$size--700,
-    800: vars.$size--800,
+        800: vars.$size--800,
+) !default;
+$-font-sizes: (
+        50: vars.$font-size--50,
+        75: vars.$font-size--75,
+        100: vars.$font-size--100,
+        150: vars.$font-size--150,
+        200: vars.$font-size--200,
+        300: vars.$font-size--300,
 ) !default;
 @mixin styles {
-    @include bem.utility('d-block') {
+        @include bem.utility('d-block') {
-        display: block;
+                display: block;
-    }
+        }
+        @include bem.utility('d-inline-block') {
+                display: inline-block;
+        }
+        @include bem.utility('d-contents') {
+                display: contents;
+        }
+        @include bem.utility('d-flex') {
+                display: flex;
+        }
+        @include bem.utility('td-none') {
+                text-decoration: none;
+        }
-    @include bem.utility('d-inline-block') {
+        @include bem.utility('d-none') {
-        display: inline-block;
+                display: none;
-    }
-    @include bem.utility('d-contents') {
+                @each $breakpoint in map.keys(media.$breakpoints) {
-        display: contents;
+                        @include media.media('<=#{$breakpoint}') {
-    }
+                                @include bem.suffix('#{$breakpoint}-lo') {
+                                        display: none;
+                                }
+                        }
-    @include bem.utility('d-flex') {
+                        @include media.media('>#{$breakpoint}') {
-        display: flex;
+                                @include bem.suffix('#{$breakpoint}-hi') {
-    }
+                                        display: none;
+                                }
+                        }
+                }
-    @include bem.utility('td-none') {
+                @include bem.at-theme('js') {
-        text-decoration: none;
+                        @include bem.suffix('js') {
-    }
+                                display: none;
+                        }
+                }
-    @include bem.utility('d-none') {
+                @include bem.at-theme('no-js') {
-        display: none;
+                        @include bem.suffix('no-js') {
+                                display: none;
+                        }
+                }
-        @each $breakpoint in map.keys(media.$breakpoints) {
+                @include bem.suffix('empty') {
-            @include media.media('<=#{$breakpoint}') {
+                        &:empty {
-                @include bem.suffix('#{$breakpoint}-lo') {
+                                display: none;
-                    display: none;
+                        }
-                }
+                }
-            }
+        }
-            @include media.media('>#{$breakpoint}') {
+        @include bem.utility('va-top') {
-                @include bem.suffix('#{$breakpoint}-hi') {
+                vertical-align: top;
-                    display: none;
+        }
-                }
-            }
-        }
-        @include bem.at-theme('js') {
+        @include bem.utility('va-baseline') {
-            @include bem.suffix('js') {
+                vertical-align: baseline;
-                display: none;
+        }
-            }
-        }
-        @include bem.at-theme('no-js') {
+        @include bem.utility('va-middle') {
-            @include bem.suffix('no-js') {
+                vertical-align: middle;
-                display: none;
+        }
-            }
-        }
-        @include bem.suffix('empty') {
+        @include bem.utility('va-bottom') {
-            &:empty {
+                vertical-align: bottom;
-                display: none;
+        }
-            }
-        }
-    }
-    @include bem.utility('va-top') {
+        @include bem.utility('ta-start') {
-        vertical-align: top;
+                text-align: start;
-    }
+        }
-    @include bem.utility('va-baseline') {
+        @include bem.utility('ta-end') {
-        vertical-align: baseline;
+                text-align: end;
-    }
+        }
-    @include bem.utility('va-center') {
+        @include bem.utility('ta-center') {
-        vertical-align: center;
+                text-align: center;
-    }
+        }
-    @include bem.utility('va-bottom') {
+        @include bem.utility('fw-normal') {
-        vertical-align: bottom;
+                font-weight: normal;
-    }
+        }
-    @include bem.utility('ta-start') {
+        @include bem.utility('ai-center') {
-        text-align: start;
+                align-items: center;
-    }
+        }
-    @include bem.utility('ta-end') {
+        @include bem.utility('ai-start') {
-        text-align: end;
+                align-items: flex-start;
-    }
+        }
-    @include bem.utility('ta-center') {
+        @include bem.utility('ai-end') {
-        text-align: center;
+                align-items: flex-end;
-    }
+        }
-    @include bem.utility('fw-normal') {
+        @include bem.utility('ac-center') {
-        font-weight: normal;
+                align-content: center;
-    }
+        }
-    @include bem.utility('ai-center') {
+        @include bem.utility('jc-center') {
-        align-items: center;
+                justify-content: center;
-    }
+        }
-    @include bem.utility('ai-start') {
+        @include bem.utility('jc-start') {
-        align-items: flex-start;
+                justify-content: flex-start;
-    }
+        }
-    @include bem.utility('ai-end') {
+        @include bem.utility('jc-end') {
-        align-items: flex-end;
+                justify-content: flex-end;
-    }
+        }
-    @include bem.utility('jc-center') {
+        @include bem.utility('tt-upper') {
-        justify-content: center;
+                text-transform: uppercase;
-    }
+        }
-    @include bem.utility('jc-start') {
+        @include bem.utility('tt-lower') {
-        justify-content: flex-start;
+                text-transform: lowercase;
-    }
+        }
-    @include bem.utility('jc-end') {
+        @include bem.utility('c-heading') {
-        justify-content: flex-end;
+                color: props.get(vars.$theme, --heading);
-    }
-    @include bem.utility('tt-upper') {
+                @each $theme in map.keys(props.get(vars.$transparent-colors)) {
-        text-transform: uppercase;
+                        $theme-name: static-#{string.slice($theme, 3)};
-    }
+    
+                        @include bem.at-theme($theme-name) {
+                                color: props.get(vars.$transparent-colors, $theme, --900);
+                        }
+                }
+        }
-    @include bem.utility('tt-lower') {
+        @include bem.utility('c-text') {
-        text-transform: lowercase;
+                color: props.get(vars.$theme, --text);
-    }
-    @include bem.utility('c-heading') {
+                @each $theme in map.keys(props.get(vars.$transparent-colors)) {
-        color: props.get(vars.$theme, --heading);
+                        $theme-name: static-#{string.slice($theme, 3)};
-    }
+    
+                        @include bem.at-theme($theme-name) {
+                                color: props.get(vars.$transparent-colors, $theme, --800);
+                        }
+                }
+        }
-    @include bem.utility('c-text') {
+        @include bem.utility('c-mute') {
-        color: props.get(vars.$theme, --text);
+                color: props.get(vars.$theme, --text-mute);
-    }
-    @include bem.utility('c-mute') {
+                @each $theme in map.keys(props.get(vars.$transparent-colors)) {
-        color: props.get(vars.$theme, --text-mute);
+                        $theme-name: static-#{string.slice($theme, 3)};
-    }
+    
+                        @include bem.at-theme($theme-name) {
+                                color: props.get(vars.$transparent-colors, $theme, --700);
+                        }
+                }
+        }
-    @include bem.utility('c-mute-more') {
+        @include bem.utility('c-mute-more') {
-        color: props.get(vars.$theme, --text-mute-more);
+                color: props.get(vars.$theme, --text-mute-more);
-    }
-    @each $dir, $prop in (is: inline-size, bs: block-size) {
+                @each $theme in map.keys(props.get(vars.$transparent-colors)) {
-        @include bem.utility('#{$dir}-100') {
+                        $theme-name: static-#{string.slice($theme, 3)};
-            #{$prop}: 100%;
+    
-        }
+                        @include bem.at-theme($theme-name) {
+                                color: props.get(vars.$transparent-colors, $theme, --600);
+                        }
+                }
+        }
+        @each $mod, $size in $-font-sizes {
+                @include bem.utility('fs-#{$mod}') {
+                        font-size: props.get($size);
+                }
+        }
+        @each $dir, $prop in (is: inline-size, bs: block-size) {
+                @include bem.utility('#{$dir}-100') {
+                        #{$prop}: 100%;
+                }
        
-        @include bem.utility('#{$dir}-75') {
+                @include bem.utility('#{$dir}-75') {
-            #{$prop}: 75%;
+                        #{$prop}: 75%;
-        }
+                }
        
-        @include bem.utility('#{$dir}-50') {
+                @include bem.utility('#{$dir}-50') {
-            #{$prop}: 50%;
+                        #{$prop}: 50%;
-        }
+                }
        
-        @include bem.utility('#{$dir}-25') {
+                @include bem.utility('#{$dir}-25') {
-            #{$prop}: 25%;
+                        #{$prop}: 25%;
-        }
+                }
        
-        @include bem.utility('#{$dir}-1px') {
+                @include bem.utility('#{$dir}-1px') {
-            #{$prop}: 1px;
+                        #{$prop}: 1px;
-        }
+                }
        
-        @include bem.utility('#{$dir}-0') {
+                @include bem.utility('#{$dir}-0') {
-            #{$prop}: 0;
+                        #{$prop}: 0;
-        }
+                }
-    }
+        }
+        @include bem.utility('elp') {
+                overflow:      hidden;
+                text-overflow: ellipsis;
+                white-space:   nowrap;
+        }
+        @include bem.utility('o-auto') {
+                overflow: auto;
+        }
+        @include bem.utility('o-hidden') {
+                overflow: hidden;
+        }
-    @include bem.utility('elp') {
+        @include bem.utility('p-static') {
-        overflow:      hidden;
+                position: static;
-        text-overflow: ellipsis;
+        }
-        white-space:   nowrap;
-    }
-    @include bem.utility('p-static') {
+        @include bem.utility('p-relative') {
-        position: static;
+                position: relative;
-    }
+        }
-    @include bem.utility('p-relative') {
+        @include bem.utility('p-fixed') {
-        position: relative;
+                position: fixed;
-    }
+        }
-    @include bem.utility('p-fixed') {
+        @include bem.utility('p-sticky-bs') {
-        position: fixed;
+                position:          sticky;
-    }
+                inset-block-start: props.get(vars.$sticky-top-offset);
+        }
-    @include bem.utility('p-sticky-bs') {
+        @include bem.utility('p-sticky-be') {
-        position:          sticky;
+                position:        sticky;
-        inset-block-start: 0;
+                inset-block-end: 0;
-    }
+        }
-    @include bem.utility('p-sticky-be') {
+        @include bem.utility('br-round') {
-        position:        sticky;
+                border-radius: props.get(vars.$rounding);
-        inset-block-end: 0;
+        }
-    }
-    @include bem.utility('br-round') {
+        @include bem.utility('br-round-sm') {
-        border-radius: props.get(vars.$rounding);
+                border-radius: props.get(vars.$rounding--sm);
-    }
+        }
-    @each $dir, $suffix in $-dirs {
+        @each $dir, $suffix in $-dirs {
-        @include bem.utility('m#{$dir}-auto') {
+                @include bem.utility('m#{$dir}-auto') {
-            margin#{$suffix}: auto;
+                        margin#{$suffix}: auto;
-        }
+                }
        
-        @include bem.utility('p#{$dir}-auto') {
+                @include bem.utility('p#{$dir}-auto') {
-            padding#{$suffix}: auto;
+                        padding#{$suffix}: auto;
-        }
+                }
-        @each $mod, $size in $-sizes {
+                @each $mod, $size in $-sizes {
-            @include bem.utility('m#{$dir}-#{$mod}') {
+                        @include bem.utility('m#{$dir}-#{$mod}') {
-                margin#{$suffix}: props.get($size);
+                                margin#{$suffix}: props.get($size);
-            }
+                        }
            
-            @include bem.utility('p#{$dir}-#{$mod}') {
+                        @include bem.utility('p#{$dir}-#{$mod}') {
-                padding#{$suffix}: props.get($size);
+                                padding#{$suffix}: props.get($size);
-            }
+                        }
-        }
+                }
        
-        @include bem.utility('b#{$dir}-0') {
+                @include bem.utility('b#{$dir}-0') {
-            border#{$suffix}: 0;
+                        border#{$suffix}: 0;
-            @include bem.suffix('light') {
+                        @include bem.suffix('light') {
-                @media (prefers-color-scheme: light) {
+                                @media (prefers-color-scheme: light) {
-                    border#{$suffix}: 0;
+                                        border#{$suffix}: 0;
-                }
+                                }
-            }
+                        }
        
-            @include bem.suffix('dark') {
+                        @include bem.suffix('dark') {
-                @media (prefers-color-scheme: dark) {
+                                @media (prefers-color-scheme: dark) {
-                    border#{$suffix}: 0;
+                                        border#{$suffix}: 0;
-                }
+                                }
-            }
+                        }
-        }
+                }
        
-        @include bem.utility('b#{$dir}-1') {
+                @include bem.utility('b#{$dir}-1') {
-            border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border);
+                        border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border);
-            @include bem.suffix('light') {
+                        @include bem.suffix('light') {
-                @media (prefers-color-scheme: light) {
+                                @media (prefers-color-scheme: light) {
-                    border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border);
+                                        border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border);
-                }
+                                }
-            }
+                        }
        
-            @include bem.suffix('dark') {
+                        @include bem.suffix('dark') {
-                @media (prefers-color-scheme: dark) {
+                                @media (prefers-color-scheme: dark) {
-                    border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border);
+                                        border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border);
-                }
+                                }
-            }
+                        }
-        }
+                }
        
-        @include bem.utility('b#{$dir}-1-mute') {
+                @include bem.utility('b#{$dir}-1-mute') {
-            border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border-mute);
+                        border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border-mute);
-            @include bem.suffix('light') {
+                        @include bem.suffix('light') {
-                @media (prefers-color-scheme: light) {
+                                @media (prefers-color-scheme: light) {
-                    border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border-mute);
+                                        border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border-mute);
-                }
+                                }
-            }
+                        }
        
-            @include bem.suffix('dark') {
+                        @include bem.suffix('dark') {
-                @media (prefers-color-scheme: dark) {
+                                @media (prefers-color-scheme: dark) {
-                    border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border-mute);
+                                        border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border-mute);
-                }
+                                }
-            }
+                        }
-        }
+                }
-    }
+        }
-    @include bem.utility('mbs-neutralize') {
+        @include bem.utility('mbs-neutralize') {
-        &::before {
+                &::before {
-            display:       block;
+                        display:       block;
-            margin-block:  -100em 100em;
+                        margin-block:  -100em 100em;
-            content:       '';
+                        content:       '';
-        }
+                }
-    }
+        }
+    
+        @include bem.utility('sr-only') {
+                position:    absolute;
+                width:       1px;
+                height:      1px;
+                padding:     0;
+                margin:      -1px;
+                overflow:    hidden;
+                white-space: nowrap;
+                border:      0;
+                clip-path:   inset(50%);
+        }
 }
diff --git a/src/layouts/_button-group.scss b/src/layouts/_button-group.scss
deleted file mode 100644
index c51ae7e..0000000
--- a/src/layouts/_button-group.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-@use 'sass:meta';
-@use 'iro-sass/src/bem';
-@use 'iro-sass/src/props';
-@use '../props' as *;
-@forward 'button-group.vars';
-@use 'button-group.vars' as vars;
-@mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
-    @include bem.layout('button-group') {
-        display:   flex;
-        flex-wrap: wrap;
-        gap:       props.get(vars.$spacing);
-    }
-}
diff --git a/src/layouts/_button-group.vars.scss b/src/layouts/_button-group.vars.scss
deleted file mode 100644
index 95ac8f8..0000000
--- a/src/layouts/_button-group.vars.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-@use 'iro-sass/src/props';
-@use '../core.vars' as core;
-$spacing: props.def(--l-button-group--spacing, props.get(core.$size--150)) !default;
diff --git a/src/layouts/_card-list.scss b/src/layouts/_card-list.scss
index 8ef40c5..aedbfd0 100644
--- a/src/layouts/_card-list.scss
+++ b/src/layouts/_card-list.scss
@@ -8,75 +8,151 @@
 @use 'card-list.vars' as vars;
 @mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables('vars'));
-    @include bem.layout('card-list') {
+        @include bem.layout('card-list') {
-        display:        flex;
+                display:        flex;
-        flex-direction: column;
+                flex-direction: column;
-        gap:            props.get(vars.$row-gap);
+                gap:            props.get(vars.$row-gap);
-        @include bem.modifier('quiet') {
+                @include bem.modifier('merge') {
-            row-gap: props.get(vars.$quiet--row-gap);
+                        position:         relative;
-        }
+                        gap:              calc(2 * props.get(vars.$merge-padding) + props.get(vars.$border-width));
+                        padding:          props.get(vars.$merge-padding);
+                        background-color: props.get(vars.$card-bg-color);
+                        border:           props.get(vars.$border-width) solid props.get(vars.$border-color);
+                        border-radius:    calc(props.get(vars.$rounding) + props.get(vars.$merge-padding));
-        @include bem.modifier('grid') {
+                        @include bem.elem('card') {
-            display:               grid;
+                                &:not(:last-child) {
-            grid-template-columns: repeat(auto-fill, minmax(props.get(vars.$grid--col-width), 1fr));
+                                        position:                relative;
-            gap:                   props.get(vars.$grid--row-gap) props.get(vars.$grid--col-gap);
+                                        border-end-start-radius: 0;
+                                        border-end-end-radius:   0;
-            @include bem.modifier('quiet') {
+                                        &::after {
-                row-gap: props.get(vars.$grid--quiet--row-gap);
+                                                position:          absolute;
-            }
+                                                inset-block-start: calc(100% + props.get(vars.$merge-padding) + props.get(vars.$border-width));
-        }
+                                                inset-inline:      calc(-1 * props.get(vars.$merge-padding) - props.get(vars.$border-width));
+                                                display:           block;
+                                                block-size:        props.get(vars.$border-width);
+                                                content:           '';
+                                                background-color:  props.get(vars.$border-color);
+                                        }
+                                }
-        @include bem.modifier('masonry') {
+                                &:hover,
-            display:    block;
+                                &:active,
-            columns:    auto props.get(vars.$masonry--col-width);
+                                &:focus-visible {
-            column-gap: props.get(vars.$masonry--col-gap);
+                                        transform:  none;
+                                }
-            @include bem.elem('card') {
+                                @include bem.next-twin-elem {
-                margin-block-end: props.get(vars.$masonry--row-gap);
+                                        border-start-start-radius: 0;
-                break-inside:     avoid;
+                                        border-start-end-radius:   0;
-            }
+                                }
+                        }
-            @include bem.modifier('quiet') {
+                        @include bem.modifier('borderless') {
-                @include bem.elem('card') {
+                                border-color: props.get(vars.$card-bg-color);
-                    margin-block-end: props.get(vars.$masonry--quiet--row-gap);
-                }
-            }
-        }
-        @include bem.modifier('masonry-h') {
+                                @include bem.elem('card') {
-            flex-flow: row wrap;
+                                        &:not(:last-child) {
-            gap:       props.get(vars.$masonry-h--row-gap) props.get(vars.$masonry-h--col-gap);
+                                                &::after {
+                                                        inset-inline: calc(-1 * props.get(vars.$merge-padding) - 2 * props.get(vars.$border-width));
+                                                }
+                                        }
+                                }
+                        }
-            @include bem.modifier('no-flush') {
+                        @include bem.modifier('shadow') {
-                &::after {
+                                box-shadow:
-                    display:     block;
+                                        props.get(vars.$shadow-x)
-                    flex:        1 0 auto;
+                                        props.get(vars.$shadow-y)
-                    inline-size: props.get(vars.$masonry-h--row-height);
+                                        props.get(vars.$shadow-blur)
-                    content:     '';
+                                        props.get(vars.$shadow-grow)
-                }
+                                        props.get(vars.$shadow-color);
-            }
+                        }
+                }
-            @include bem.elem('card') {
+                @include bem.modifier('quiet') {
-                flex:            1 0 auto;
+                        row-gap: props.get(vars.$quiet--row-gap);
-                max-inline-size: 100%;
+                }
-            }
-            @include bem.elem('card-image') {
+                @include bem.modifier('grid') {
-                block-size: props.get(vars.$masonry-h--row-height);
+                        display:               grid;
-            }
+                        grid-template-columns: repeat(auto-fill, minmax(props.get(vars.$grid--col-width), 1fr));
+                        gap:                   props.get(vars.$grid--row-gap) props.get(vars.$grid--col-gap);
-            @include bem.modifier('quiet') {
+                        @include bem.modifier('quiet') {
-                row-gap: props.get(vars.$masonry-h--quiet--row-gap);
+                                row-gap: props.get(vars.$grid--quiet--row-gap);
-            }
+                        }
-        }
+                }
-        @include bem.modifier('aspect-5\\/4') {
+                @include bem.modifier('grid-sm') {
-            @include bem.elem('card-image') {
+                        display:               grid;
-                aspect-ratio: 5 / 4;
+                        grid-template-columns: repeat(auto-fill, minmax(props.get(vars.$grid-sm--col-width), 1fr));
-            }
+                        gap:                   props.get(vars.$grid-sm--row-gap) props.get(vars.$grid-sm--col-gap);
-        }
-    }
+                        @include bem.modifier('grid-sm') {
+                                @include media.media('<=md') {
+                                        display: flex;
+                                        gap:     props.get(vars.$row-gap);
+                                }
+                        }
+                        @include bem.modifier('quiet') {
+                                row-gap: props.get(vars.$grid-sm--quiet--row-gap);
+                        }
+                }
+                @include bem.modifier('masonry') {
+                        display:    block;
+                        columns:    auto props.get(vars.$masonry--col-width);
+                        column-gap: props.get(vars.$masonry--col-gap);
+                        @include bem.elem('card') {
+                                margin-block-end: props.get(vars.$masonry--row-gap);
+                                break-inside:     avoid;
+                        }
+                        @include bem.modifier('quiet') {
+                                @include bem.elem('card') {
+                                        margin-block-end: props.get(vars.$masonry--quiet--row-gap);
+                                }
+                        }
+                }
+                @include bem.modifier('masonry-h') {
+                        flex-flow: row wrap;
+                        gap:       props.get(vars.$masonry-h--row-gap) props.get(vars.$masonry-h--col-gap);
+                        @include bem.modifier('no-flush') {
+                                &::after {
+                                        display:     block;
+                                        flex:        1 0 auto;
+                                        inline-size: props.get(vars.$masonry-h--row-height);
+                                        content:     '';
+                                }
+                        }
+                        @include bem.elem('card') {
+                                flex:            1 0 auto;
+                                max-inline-size: 100%;
+                        }
+                        @include bem.elem('card-image') {
+                                block-size: props.get(vars.$masonry-h--row-height);
+                        }
+                        @include bem.modifier('quiet') {
+                                row-gap: props.get(vars.$masonry-h--quiet--row-gap);
+                        }
+                }
+                @include bem.modifier('aspect-5\\/4') {
+                        @include bem.elem('card-image') {
+                                aspect-ratio: 5 / 4;
+                        }
+                }
+        }
 }
diff --git a/src/layouts/_card-list.vars.scss b/src/layouts/_card-list.vars.scss
index f77bfbf..75e72cc 100644
--- a/src/layouts/_card-list.vars.scss
+++ b/src/layouts/_card-list.vars.scss
@@ -1,5 +1,10 @@
 @use 'iro-sass/src/props';
 @use '../core.vars' as core;
+@use '../objects/card' as card;
+$border-width:   props.def(--l-card-list--border-width, props.get(card.$border-width)) !default;
+$merge-padding:  props.def(--l-card-list--merge-padding, props.get(core.$border-width--thick)) !default;
+$rounding:       props.def(--l-card-list--rounding, props.get(card.$rounding)) !default;
 $row-gap:        props.def(--l-card-list--row-gap, props.get(core.$size--200)) !default;
 $quiet--row-gap: props.def(--l-card-list--quiet--row-gap, props.get(core.$size--800)) !default;
@@ -9,6 +14,11 @@ $grid--col-gap:        props.def(--l-card-list--grid--col-gap, props.get(core.$s
 $grid--col-width:      props.def(--l-card-list--grid--col-width, props.get(core.$size--3200)) !default;
 $grid--quiet--row-gap: props.def(--l-card-list--grid--quiet--row-gap, props.get(core.$size--800)) !default;
+$grid-sm--row-gap:        props.def(--l-card-list--grid-md--row-gap, props.get(core.$size--200)) !default;
+$grid-sm--col-gap:        props.def(--l-card-list--grid-md--col-gap, props.get(core.$size--200)) !default;
+$grid-sm--col-width:      props.def(--l-card-list--grid-md--col-width, props.get(core.$size--4600)) !default;
+$grid-sm--quiet--row-gap: props.def(--l-card-list--grid-sm--quiet--row-gap, props.get(core.$size--800)) !default;
 $masonry--row-gap:        props.def(--l-card-list--masonry--row-gap, props.get(core.$size--400)) !default;
 $masonry--col-gap:        props.def(--l-card-list--masonry--col-gap, props.get(core.$size--400)) !default;
 $masonry--col-width:      props.def(--l-card-list--masonry--col-width, props.get(core.$size--3200)) !default;
@@ -19,4 +29,13 @@ $masonry-h--col-gap:        props.def(--l-card-list--masonry-h--col-gap, props.g
 $masonry-h--row-height:     props.def(--l-card-list--masonry-h--row-height, props.get(core.$size--3200)) !default;
 $masonry-h--quiet--row-gap: props.def(--l-card-list--masonry-h--quiet--row-gap, props.get(core.$size--800)) !default;
-$border-color: props.def(--l-card-list--border-color, props.get(core.$theme, --border), 'color') !default;
+$shadow-x:    props.def(--l-card-list--shadow-x, props.get(card.$shadow-x)) !default;
+$shadow-y:    props.def(--l-card-list--shadow-y, props.get(card.$shadow-y)) !default;
+$shadow-blur: props.def(--l-card-list--shadow-blur, props.get(card.$shadow-blur)) !default;
+$shadow-grow: props.def(--l-card-list--shadow-grow, props.get(card.$shadow-grow)) !default;
+$card-bg-color:      props.def(--l-card-list--bg-color, props.get(card.$bg-color), 'color') !default;
+$border-color:       props.def(--l-card-list--border-color, props.get(card.$border-color), 'color') !default;
+$shadow-color:       props.def(--l-card-list--shadow-color, props.get(card.$shadow-color), 'color') !default;
+$border-color-dark:  props.def(--l-card-list--border-color, props.get(core.$theme, --bg-l1), 'dark') !default;
diff --git a/src/layouts/_container.scss b/src/layouts/_container.scss
index 17ab2f0..05d99a8 100644
--- a/src/layouts/_container.scss
+++ b/src/layouts/_container.scss
@@ -7,22 +7,34 @@
 @use 'container.vars' as vars;
 @mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables('vars'));
-    @include bem.layout('container') {
+        @include bem.layout('container') {
-        @each $mod, $size in vars.$fixed-sizes {
+                @each $mod, $size in vars.$fixed-sizes {
-            @include bem.modifier($mod) {
+                        @include bem.modifier($mod) {
-                max-inline-size: props.get($size);
+                                max-inline-size: props.get($size);
-                margin-inline:   auto;
+                                margin-inline:   auto;
-            }
+                        }
-        }
+                }
-        @include bem.modifier('pad-i') {
+                @include bem.modifier('pad-i') {
-            padding-inline: props.get(vars.$pad-i);
+                        padding-inline: props.get(vars.$pad-i);
-        }
+                }
-        @include bem.modifier('pad-b') {
+                @include bem.modifier('pad-b') {
-            padding-block: props.get(vars.$pad-b);
+                        padding-block: props.get(vars.$pad-b);
-        }
+                }
-    }
+                @each $mod, $pad-i, $pad-b in vars.$sizes {
+                        @include bem.modifier($mod) {
+                                @include bem.modifier('pad-i') {
+                                        padding-inline: props.get($pad-i);
+                                }
+                                @include bem.modifier('pad-b') {
+                                        padding-block: props.get($pad-b);
+                                }
+                        }
+                }
+        }
 }
diff --git a/src/layouts/_container.vars.scss b/src/layouts/_container.vars.scss
index cba7574..285b784 100644
--- a/src/layouts/_container.vars.scss
+++ b/src/layouts/_container.vars.scss
@@ -2,21 +2,38 @@
 @use 'iro-sass/src/props';
 @use '../core.vars' as core;
-$fixed-125: props.def(--l-container--fixed-125, fn.px-to-rem(720px)) !default;
+$fixed-200: props.def(--l-container--fixed-200, fn.px-to-rem(1300px)) !default;
-$fixed:     props.def(--l-container--fixed, fn.px-to-rem(610px)) !default;
+$fixed-150: props.def(--l-container--fixed-150, fn.px-to-rem(860px)) !default;
-$fixed-75:  props.def(--l-container--fixed-75, fn.px-to-rem(500px)) !default;
+$fixed:     props.def(--l-container--fixed, fn.px-to-rem(680px)) !default;
 $fixed-sizes: (
-    'fixed-125': $fixed-125,
+        'fixed-200': $fixed-200,
-    'fixed':     $fixed,
+        'fixed-150': $fixed-150,
-    'fixed-75':  $fixed-75
+        'fixed':     $fixed
 ) !default;
-$pad-i: props.def(--l-container--pad-i, props.get(core.$size--400)) !default;
+$pad-i: props.def(--l-container--pad-i, props.get(core.$size--600)) !default;
 $pad-b: props.def(--l-container--pad-b, props.get(core.$size--800)) !default;
+$pad-i--md: props.def(--l-container--pad-i, props.get(core.$size--400), 'md') !default;
+$pad-b--md: props.def(--l-container--pad-b, props.get(core.$size--700), 'md') !default;
 $pad-i--sm: props.def(--l-container--pad-i, props.get(core.$size--200), 'sm') !default;
 $pad-b--sm: props.def(--l-container--pad-b, props.get(core.$size--600), 'sm') !default;
 $pad-i--xs: props.def(--l-container--pad-i, props.get(core.$size--150), 'xs') !default;
 $pad-b--xs: props.def(--l-container--pad-b, props.get(core.$size--450), 'xs') !default;
+$sm--pad-i: props.def(--l-container--sm--pad-i, props.get(core.$size--300)) !default;
+$sm--pad-b: props.def(--l-container--sm--pad-b, props.get(core.$size--800)) !default;
+$sm--pad-i--sm: props.def(--l-container--sm--pad-i, props.get(core.$size--200), 'sm') !default;
+$sm--pad-b--sm: props.def(--l-container--sm--pad-b, props.get(core.$size--600), 'sm') !default;
+$sm--pad-i--xs: props.def(--l-container--sm--pad-i, props.get(core.$size--150), 'xs') !default;
+$sm--pad-b--xs: props.def(--l-container--sm--pad-b, props.get(core.$size--450), 'xs') !default;
+$sizes: (
+        'sm' $sm--pad-i $sm--pad-b,
+        'md' $sm--pad-i $sm--pad-b,
+) !default;
diff --git a/src/layouts/_flex.scss b/src/layouts/_flex.scss
index 902ecdb..c99b253 100644
--- a/src/layouts/_flex.scss
+++ b/src/layouts/_flex.scss
@@ -1,19 +1,19 @@
 @use 'iro-sass/src/bem';
 @mixin styles {
-    @include bem.layout('flex') {
+        @include bem.layout('flex') {
-        display: flex;
+                display: flex;
-        @include bem.modifier('column') {
+                @include bem.modifier('column') {
-            flex-direction: column;
+                        flex-direction: column;
-        }
+                }
-        @include bem.modifier('wrap') {
+                @include bem.modifier('wrap') {
-            flex-wrap: wrap;
+                        flex-wrap: wrap;
-        }
+                }
-        @include bem.modifier('wrap-reverse') {
+                @include bem.modifier('wrap-reverse') {
-            flex-wrap: wrap-reverse;
+                        flex-wrap: wrap-reverse;
-        }
+                }
-    }
+        }
 }
diff --git a/src/layouts/_form.scss b/src/layouts/_form.scss
index 5f0567b..c804262 100644
--- a/src/layouts/_form.scss
+++ b/src/layouts/_form.scss
@@ -7,53 +7,53 @@
 @use 'form.vars' as vars;
 @mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables('vars'));
-    @include bem.layout('form') {
+        @include bem.layout('form') {
-        display:        flex;
+                display:        flex;
-        flex-direction: column;
+                flex-direction: column;
-        gap:            props.get(vars.$item-spacing-b) props.get(vars.$label-spacing-i);
+                gap:            props.get(vars.$item-spacing-b) props.get(vars.$label-spacing-i);
-        @include bem.elem('item') {
+                @include bem.elem('item') {
-            display: block;
+                        display: block;
-        }
+                }
        
-        @include bem.elem('item-content') {
+                @include bem.elem('item-content') {
-            @include bem.modifier('align-start') {
+                        @include bem.modifier('align-start') {
-                align-self: start;
+                                align-self: start;
-            }
+                        }
-        }
+                }
-        @include bem.modifier('row') {
+                @include bem.modifier('row') {
-            flex-direction: row;
+                        flex-direction: row;
-            align-items:    flex-end;
+                        align-items:    flex-end;
-        }
+                }
-        @include bem.modifier('labels-start', 'labels-end') {
+                @include bem.modifier('labels-start', 'labels-end') {
-            display:               grid;
+                        display:               grid;
-            grid-template-rows:    auto;
+                        grid-template-rows:    auto;
-            grid-template-columns: auto 1fr;
+                        grid-template-columns: auto 1fr;
-            align-items:           baseline;
+                        align-items:           baseline;
-            @include bem.elem('item') {
+                        @include bem.elem('item') {
-                display: contents;
+                                display: contents;
-            }
+                        }
        
-            @include bem.elem('item-label') {
+                        @include bem.elem('item-label') {
-                grid-column:        1;
+                                grid-column:        1;
-                padding-inline-end: 0;
+                                padding-inline-end: 0;
-            }
+                        }
        
-            @include bem.elem('item-content') {
+                        @include bem.elem('item-content') {
-                grid-column:        2;
+                                grid-column:        2;
-                margin-block-start: 0;
+                                margin-block-start: 0;
-            }
+                        }
-        }
+                }
-        @include bem.modifier('labels-end') {
+                @include bem.modifier('labels-end') {
-            @include bem.elem('item-label') {
+                        @include bem.elem('item-label') {
-                text-align: end;
+                                text-align: end;
-            }
+                        }
-        }
+                }
-    }
+        }
 }
diff --git a/src/layouts/_hlist.scss b/src/layouts/_hlist.scss
new file mode 100644
index 0000000..5c81259
--- /dev/null
+++ b/src/layouts/_hlist.scss
@@ -0,0 +1,50 @@
+@use 'sass:meta';
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use '../props' as *;
+@forward 'hlist.vars';
+@use 'hlist.vars' as vars;
+@use '../objects/button.vars' as button;
+@mixin styles {
+        @include materialize-at-root(meta.module-variables('vars'));
+        @include bem.layout('hlist') {
+                display:   inline-flex;
+                flex-wrap: wrap;
+                gap:       props.get(vars.$gap);
+                @each $mod, $size in vars.$sizes {
+                        @include bem.modifier($mod) {
+                                gap: props.get($size);
+                        }
+                }
+                @include bem.modifier('buttons') {
+                        margin-inline: calc(-1 * props.get(button.$pad-i) - props.get(button.$border-width));
+                        @include bem.modifier('pill') {
+                                margin-inline: calc(-1 * props.get(button.$pad-i-pill) - props.get(button.$border-width));
+                        }
+                        @include bem.modifier('icon') {
+                                margin-inline: calc(-1 * props.get(button.$pad-b) - props.get(button.$border-width) - .5em * (props.get(button.$line-height) - 1));
+                        }
+                        @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in button.$fixed-sizes {
+                                @include bem.modifier('buttons-#{$mod}') {
+                                        margin-inline: calc(-1 * props.get($pad-i) - props.get(button.$border-width));
+    
+                                        @include bem.modifier('pill') {
+                                                margin-inline: calc(-1 * props.get($pad-i-pill) - props.get(button.$border-width));
+                                        }
+                                        @include bem.modifier('icon') {
+                                                margin-inline: calc(-1 * props.get($pad-b) - props.get(button.$border-width) - .5em * (props.get(button.$line-height) - 1));
+                                        }
+                                }
+                        }
+                }
+        }
+}
diff --git a/src/layouts/_hlist.vars.scss b/src/layouts/_hlist.vars.scss
new file mode 100644
index 0000000..fecded5
--- /dev/null
+++ b/src/layouts/_hlist.vars.scss
@@ -0,0 +1,16 @@
+@use 'iro-sass/src/props';
+@use '../core.vars' as core;
+$gap: props.def(--l-hlist--gap, props.get(core.$size--150)) !default;
+$gapless: props.def(--l-hlist--gapless, 0) !default;
+$sm:      props.def(--l-hlist--sm, props.get(core.$size--100)) !default;
+$lg:      props.def(--l-hlist--lg, props.get(core.$size--300)) !default;
+$xl:      props.def(--l-hlist--xl, props.get(core.$size--450)) !default;
+$sizes: (
+        'gapless': $gapless,
+        'sm':      $sm,
+        'lg':      $lg,
+        'xl':      $xl,
+) !default;
diff --git a/src/layouts/_media.scss b/src/layouts/_media.scss
index 2192db5..929e60f 100644
--- a/src/layouts/_media.scss
+++ b/src/layouts/_media.scss
@@ -7,35 +7,35 @@
 @use 'media.vars' as vars;
 @mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables('vars'));
-    @include bem.layout('media') {
+        @include bem.layout('media') {
-        display:     flex;
+                display:     flex;
-        gap:         props.get(vars.$gap);
+                gap:         props.get(vars.$gap);
-        align-items: center;
+                align-items: center;
-        line-height: 1.4;
+                line-height: 1.4;
-        @each $mod, $size in vars.$sizes {
+                @each $mod, $size in vars.$sizes {
-            @include bem.modifier($mod) {
+                        @include bem.modifier($mod) {
-                gap: props.get($size);
+                                gap: props.get($size);
-            }
+                        }
-        }
+                }
-        @include bem.modifier('wrap') {
+                @include bem.modifier('wrap') {
-            flex-wrap: wrap;
+                        flex-wrap: wrap;
-        }
+                }
-        @include bem.elem('block') {
+                @include bem.elem('block') {
-            flex: 0 0 auto;
+                        flex: 0 0 auto;
-            @include bem.modifier('shrink', 'main') {
+                        @include bem.modifier('shrink', 'main') {
-                flex-shrink:     1;
+                                flex-shrink:     1;
-                min-inline-size: 0;
+                                min-inline-size: 0;
-            }
+                        }
-            @include bem.modifier('main') {
+                        @include bem.modifier('main') {
-                inline-size: 100%;
+                                inline-size: 100%;
-            }
+                        }
-        }
+                }
-    }
+        }
 }
diff --git a/src/layouts/_media.vars.scss b/src/layouts/_media.vars.scss
index fd6d986..dcb10de 100644
--- a/src/layouts/_media.vars.scss
+++ b/src/layouts/_media.vars.scss
@@ -9,8 +9,8 @@ $lg:      props.def(--l-media--lg, props.get(core.$size--300)) !default;
 $xl:      props.def(--l-media--xl, props.get(core.$size--450)) !default;
 $sizes: (
-    'gapless': $gapless,
+        'gapless': $gapless,
-    'sm':      $sm,
+        'sm':      $sm,
-    'lg':      $lg,
+        'lg':      $lg,
-    'xl':      $xl,
+        'xl':      $xl,
 ) !default;
diff --git a/src/layouts/_overflow.scss b/src/layouts/_overflow.scss
index 9fba7eb..6d31d37 100644
--- a/src/layouts/_overflow.scss
+++ b/src/layouts/_overflow.scss
@@ -3,9 +3,9 @@
 @use '../core.vars' as core;
 @mixin styles {
-    @include bem.layout('overflow') {
+        @include bem.layout('overflow') {
-        overflow:        auto;
+                overflow:        auto;
-        scrollbar-color: props.get(core.$theme, --text-disabled) transparent;
+                scrollbar-color: props.get(core.$theme, --text-disabled) transparent;
-    }
+        }
 }
diff --git a/src/layouts/_split-view.scss b/src/layouts/_split-view.scss
index a76f6e8..6469a7d 100644
--- a/src/layouts/_split-view.scss
+++ b/src/layouts/_split-view.scss
@@ -8,64 +8,84 @@
 @use 'split-view.vars' as vars;
 @mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables('vars'));
-    @include bem.layout('split-view') {
+        @include bem.layout('split-view') {
-        display:     flex;
+                display:     flex;
-        gap:         props.get(vars.$col-gap);
+                gap:         props.get(vars.$col-gap);
-        align-items: start;
+                align-items: start;
-        @include bem.modifier('gapless') {
+                @include bem.elem('panel') {
-            gap: props.get(vars.$gapless);
+                        flex:            1 1 auto;
-        }
+                        inline-size:     100%;
+                        min-inline-size: 0;
-        @include bem.elem('panel') {
+                        @include bem.modifier('side-25') {
-            flex:            1 1 auto;
+                                flex:            0 0 auto;
-            inline-size:     100%;
+                                inline-size:     25%;
-            min-inline-size: 0;
+                                min-inline-size: props.get(vars.$panel--side-25--min);
+                        }
-            @include bem.modifier('side-25') {
+                        @include bem.modifier('sticky-0') {
-                flex:            0 0 auto;
+                                position:          sticky;
-                inline-size:     25%;
+                                inset-block-start: 0;
-                min-inline-size: props.get(vars.$panel--side-25--min);
+                        }
-            }
-            @include bem.modifier('sticky') {
+                        @include bem.modifier('sticky') {
-                position:          sticky;
+                                position:          sticky;
-                inset-block-start: 0;
+                                inset-block-start: props.get(vars.$panel--sticky-offset);
-            }
+                        }
-            @include bem.modifier('sticky-400') {
+                        @include bem.modifier('sticky-400') {
-                position:          sticky;
+                                position:          sticky;
-                inset-block-start: props.get(vars.$panel--sticky-400--inset);
+                                inset-block-start: calc(props.get(vars.$panel--sticky-400--inset) + props.get(vars.$panel--sticky-offset));
-            }
+                        }
-        }
-        @include bem.elem('content') {
+                        @include bem.modifier('sticky-1200') {
-            inline-size: 100%;
+                                position:          sticky;
-        }
+                                inset-block-start: calc(props.get(vars.$panel--sticky-1200--inset) + props.get(vars.$panel--sticky-offset));
+                        }
+                }
-        @include media.media('<=md') {
+                @include bem.modifier('gapless') {
-            flex-direction: column;
+                        gap: props.get(vars.$gapless);
-            gap:            props.get(vars.$row-gap);
-            align-items:    stretch;
-            @include bem.modifier('wrap-reverse') {
+                        @include bem.elem('panel') {
-                flex-direction: column-reverse;
+                                @include bem.modifier('side-25') {
-            }
+                                        min-inline-size: calc(props.get(vars.$panel--side-25--min) + props.get(vars.$col-gap) - props.get(vars.$gapless));
+                                }
+                        }
+                }
-            @include bem.elem('panel') {
+                @include bem.elem('content') {
-                flex: 1 1 auto;
+                        inline-size: 100%;
+                }
-                @include bem.modifier('side-25') {
+                @include media.media('<=md') {
-                    inline-size:     auto;
+                        flex-direction: column;
-                    min-inline-size: 0;
+                        gap:            props.get(vars.$row-gap);
-                }
+                        align-items:    stretch;
-                @include bem.modifier('sticky', 'sticky-400') {
+                        @include bem.modifier('gapless') {
-                    position: static;
+                                gap: props.get(vars.$gapless);
-                }
+                        }
-            }
-        }
+                        @include bem.modifier('wrap-reverse') {
-    }
+                                flex-direction: column-reverse;
+                        }
+                        @include bem.elem('panel') {
+                                inline-size: auto;
+                
+                                @include bem.modifier('side-25') {
+                                        inline-size:     auto;
+                                        min-inline-size: 0;
+                                }
+                                @include bem.modifier('sticky', 'sticky-400', 'sticky-1200') {
+                                        position: static;
+                                }
+                        }
+                }
+        }
 }
diff --git a/src/layouts/_split-view.vars.scss b/src/layouts/_split-view.vars.scss
index 8f6bf93..d519939 100644
--- a/src/layouts/_split-view.vars.scss
+++ b/src/layouts/_split-view.vars.scss
@@ -4,7 +4,10 @@
 $col-gap:  props.def(--l-split-view--col-gap, props.get(core.$size--800)) !default;
 $row-gap:  props.def(--l-split-view--row-gap, props.get(core.$size--600)) !default;
-$gapless: props.def(--l-split-view--gapless, 0) !default;
+$gapless: props.def(--l-split-view--gapless, 0rem) !default;
 $panel--side-25--min: props.def(--l-split-view--panel--side-25--min, props.get(core.$size--3200)) !default;
 $panel--sticky-400--inset: props.def(--l-split-view--panel--sticky-400--inset, props.get(core.$size--400)) !default;
+$panel--sticky-1200--inset: props.def(--l-split-view--panel--sticky-1200--inset, props.get(core.$size--1200)) !default;
+$panel--sticky-offset: props.def(--l-split-view--panel--sticky-offset, props.get(core.$sticky-top-offset)) !default;
diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss
deleted file mode 100644
index ca047bc..0000000
--- a/src/objects/_action-button.scss
+++ /dev/null
@@ -1,181 +0,0 @@
-@use 'sass:list';
-@use 'sass:map';
-@use 'sass:meta';
-@use 'sass:string';
-@use 'iro-sass/src/bem';
-@use 'iro-sass/src/props';
-@use '../props' as *;
-@forward 'action-button.vars';
-@use 'action-button.vars' as vars;
-@mixin -apply-theme($theme, $key: ()) {
-    color:            props.get($theme, list.join($key, --disabled --label-color)...);
-    background-color: props.get($theme, list.join($key, --disabled --bg-color)...);
-    border-color:     props.get($theme, list.join($key, --disabled --border-color)...);
-    &::after {
-        outline-color: props.get($theme, list.join($key, --key-focus --border-color)...);
-        box-shadow:
-            0
-            0
-            0
-            calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
-            props.get($theme, list.join($key, --key-focus --outline-color)...);
-    }
-    &:link,
-    &:visited,
-    &:enabled {
-        color:            props.get($theme, list.join($key, --label-color)...);
-        background-color: props.get($theme, list.join($key, --bg-color)...);
-        border-color:     props.get($theme, list.join($key, --border-color)...);
-        &:hover,
-        &:focus-visible {
-            color:            props.get($theme, list.join($key, --hover --label-color)...);
-            background-color: props.get($theme, list.join($key, --hover --bg-color)...);
-            border-color:     props.get($theme, list.join($key, --hover --border-color)...);
-        }
-        &:active {
-            color:            props.get($theme, list.join($key, --active --label-color)...);
-            background-color: props.get($theme, list.join($key, --active --bg-color)...);
-            border-color:     props.get($theme, list.join($key, --active --border-color)...);
-        }
-    }
-    @include bem.modifier('quiet') {
-        color:            props.get($theme, list.join($key, --quiet --disabled --label-color)...);
-        background-color: transparent;
-        border-color:     transparent;
-        &:link,
-        &:visited,
-        &:enabled {
-            color:            props.get($theme, list.join($key, --quiet --label-color)...);
-            background-color: transparent;
-            border-color:     transparent;
-            &:hover,
-            &:focus-visible {
-                color:            props.get($theme, list.join($key, --quiet --hover --label-color)...);
-                background-color: props.get($theme, list.join($key, --quiet --hover --bg-color)...);
-                border-color:     transparent;
-            }
-            &:active {
-                color:            props.get($theme, list.join($key, --quiet --active --label-color)...);
-                background-color: props.get($theme, list.join($key, --quiet --active --bg-color)...);
-                border-color:     transparent;
-            }
-        }
-    }
-    @include bem.is('selected') {
-        color:            props.get($theme, list.join($key, --selected --disabled --label-color)...);
-        background-color: props.get($theme, list.join($key, --selected --disabled --bg-color)...);
-        border-color:     props.get($theme, list.join($key, --selected --disabled --border-color)...);
-        &:link,
-        &:visited,
-        &:enabled {
-            color:            props.get($theme, list.join($key, --selected --label-color)...);
-            background-color: props.get($theme, list.join($key, --selected --bg-color)...);
-            border-color:     props.get($theme, list.join($key, --selected --border-color)...);
-    
-            &:hover,
-            &:focus-visible {
-                color:            props.get($theme, list.join($key, --selected --hover --label-color)...);
-                background-color: props.get($theme, list.join($key, --selected --hover --bg-color)...);
-                border-color:     props.get($theme, list.join($key, --selected --hover --border-color)...);
-            }
-    
-            &:active {
-                color:            props.get($theme, list.join($key, --selected --active --label-color)...);
-                background-color: props.get($theme, list.join($key, --selected --active --bg-color)...);
-                border-color:     props.get($theme, list.join($key, --selected --active --border-color)...);
-            }
-        }
-    }
-}
-@mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
-    @include bem.object('action-button') {
-        position:         relative;
-        display:          inline-block;
-        padding-block:    props.get(vars.$pad-b);
-        padding-inline:   props.get(vars.$pad-i);
-        line-height:      props.get(vars.$line-height);
-        text-align:       center;
-        text-decoration:  none;
-        text-overflow:    ellipsis;
-        white-space:      nowrap;
-        border:           props.get(vars.$border-width) solid transparent;
-        border-radius:    props.get(vars.$rounding);
-        &::after {
-            position:       absolute;
-            inset:          calc(-1 * props.get(vars.$border-width) - props.get(vars.$key-focus--border-offset));
-            z-index:        1;
-            display:        none;
-            pointer-events: none;
-            content:        '';
-            border-radius:  calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
-            outline:        transparent solid props.get(vars.$key-focus--border-width);
-        }
-        &:link,
-        &:visited,
-        &:enabled {
-            &:focus-visible {
-                &::after {
-                    display: block;
-                }
-            }
-        }
-        @include -apply-theme(vars.$default-theme);
-        @each $theme in map.keys(props.get(vars.$themes)) {
-            @include bem.modifier(string.slice($theme, 3)) {
-                @include -apply-theme(vars.$themes, $theme);
-            }
-        }
-        @include bem.modifier('pill') {
-            padding-inline: props.get(vars.$pad-i-pill);
-            border-radius:  100em;
-            &::after {
-                border-radius:  100em;
-            }
-        }
-        @each $mod, $pad-i, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes {
-            @include bem.modifier($mod) {
-                padding-block:  props.get($pad-b);
-                padding-inline: props.get($pad-i);
-                font-size:      props.get($font-size);
-                @include bem.modifier('pill') {
-                    padding-inline: props.get($pad-i-pill);
-                }
-            }
-        }
-        @include bem.modifier('icon') {
-            inline-size:    calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b));
-            padding-inline: 0;
-            @each $mod, $pad-i, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes {
-                @include bem.modifier($mod) {
-                    inline-size:    calc(1em * props.get(vars.$line-height) + 2 * props.get($pad-b));
-                    padding-inline: 0;
-                }
-            }
-        }
-    }
-}
diff --git a/src/objects/_action-button.vars.scss b/src/objects/_action-button.vars.scss
deleted file mode 100644
index 9afd5d7..0000000
--- a/src/objects/_action-button.vars.scss
+++ /dev/null
@@ -1,189 +0,0 @@
-@use 'sass:map';
-@use 'sass:string';
-@use 'iro-sass/src/props';
-@use '../core.vars' as core;
-$line-height:  props.def(--o-action-button--line-height, 1.4) !default;
-$pad-i:        props.def(--o-action-button--pad-i, props.get(core.$size--150)) !default;
-$pad-i-pill:   props.def(--o-action-button--pad-i-pill, props.get(core.$size--200)) !default;
-$pad-b:        props.def(--o-action-button--pad-b, props.get(core.$size--85)) !default;
-$border-width: props.def(--o-action-button--border-width, props.get(core.$border-width--thin)) !default;
-$rounding:     props.def(--o-action-button--rounding, props.get(core.$rounding)) !default;
-$font-size:    props.def(--o-action-button--font-size, props.get(core.$font-size--100)) !default;
-$pad-i--sm:      props.def(--o-action-button--sm--pad-i, props.get(core.$size--100)) !default;
-$pad-i-pill--sm: props.def(--o-action-button--sm--pad-i-pill, props.get(core.$size--150)) !default;
-$pad-b--sm:      props.def(--o-action-button--sm--pad-b, props.get(core.$size--40)) !default;
-$font-size--sm:  props.def(--o-action-button--sm--font-size, props.get(core.$font-size--75)) !default;
-$pad-i--lg:      props.def(--o-action-button--lg--pad-i, props.get(core.$size--175)) !default;
-$pad-i-pill--lg: props.def(--o-action-button--lg--pad-i-pill, props.get(core.$size--225)) !default;
-$pad-b--lg:      props.def(--o-action-button--lg--pad-b, props.get(core.$size--115)) !default;
-$font-size--lg:  props.def(--o-action-button--lg--font-size, props.get(core.$font-size--150)) !default;
-$pad-i--xl:      props.def(--o-action-button--xl--pad-i, props.get(core.$size--225)) !default;
-$pad-i-pill--xl: props.def(--o-action-button--xl--pad-i-pill, props.get(core.$size--300)) !default;
-$pad-b--xl:      props.def(--o-action-button--xl--pad-b, props.get(core.$size--150)) !default;
-$font-size--xl:  props.def(--o-action-button--xl--font-size, props.get(core.$font-size--200)) !default;
-$key-focus--border-width:  props.def(--o-action-button--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
-$key-focus--border-offset: props.def(--o-action-button--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
-$key-focus--outline-width: props.def(--o-action-button--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
-$fixed-sizes: (
-    'sm' $pad-i--sm $pad-i-pill--sm $pad-b--sm $font-size--sm,
-    'lg' $pad-i--lg $pad-i-pill--lg $pad-b--lg $font-size--lg,
-    'xl' $pad-i--xl $pad-i-pill--xl $pad-b--xl $font-size--xl,
-) !default;
-$themes: props.def(--o-action-button, (), 'color');
-$default-theme-override: () !default;
-$default-theme: map.deep-merge((
-    --bg-color:     props.get(core.$theme, --base, --75),
-    --label-color:  props.get(core.$theme, --text),
-    --border-color: props.get(core.$theme, --border-strong),
-    --hover: (
-        --bg-color:     props.get(core.$theme, --border-mute),
-        --label-color:  props.get(core.$theme, --heading),
-        --border-color: props.get(core.$theme, --text-mute-more),
-    ),
-    --active: (
-        --bg-color:     props.get(core.$theme, --border),
-        --label-color:  props.get(core.$theme, --heading),
-        --border-color: props.get(core.$theme, --text-mute),
-    ),
-    --disabled: (
-        --bg-color:     props.get(core.$theme, --bg-l1),
-        --label-color:  props.get(core.$theme, --border-strong),
-        --border-color: props.get(core.$theme, --border),
-    ),
-    --key-focus: (
-        --border-color:  props.get(core.$theme, --focus, --border),
-        --outline-color: props.get(core.$theme, --focus, --outline),
-    ),
-    --selected: (
-        --bg-color:     props.get(core.$theme, --text-mute),
-        --label-color:  props.get(core.$theme, --base, --50),
-        --border-color: props.get(core.$theme, --text-mute),
-        --hover: (
-            --bg-color:     props.get(core.$theme, --text),
-            --label-color:  props.get(core.$theme, --base, --50),
-            --border-color: props.get(core.$theme, --text),
-        ),
-        --active: (
-            --bg-color:     props.get(core.$theme, --heading),
-            --label-color:  props.get(core.$theme, --base, --50),
-            --border-color: props.get(core.$theme, --heading),
-        ),
-        --disabled: (
-            --bg-color:     props.get(core.$theme, --border-mute),
-            --label-color:  props.get(core.$theme, --border-strong),
-            --border-color: props.get(core.$theme, --border-mute),
-        ),
-    ),
-    --quiet: (
-        --label-color:  props.get(core.$theme, --text),
-        --hover: (
-            --bg-color:    props.get(core.$theme, --border-mute),
-            --label-color: props.get(core.$theme, --heading),
-        ),
-        --active: (
-            --bg-color:    props.get(core.$theme, --border),
-            --label-color: props.get(core.$theme, --heading),
-        ),
-        --disabled: (
-            --label-color: props.get(core.$theme, --border-strong),
-        ),
-    ),
-), $default-theme-override) !default;
-$default-theme: props.def(--o-action-button, $default-theme, 'color');
-@each $theme in map.keys(props.get(core.$transparent-colors)) {
-    $button-theme: --static-#{string.slice($theme, 3)};
-    $themes: props.merge($themes, (
-        $button-theme: (
-            --bg-color:     props.get(core.$transparent-colors, $theme, --100),
-            --label-color:  props.get(core.$transparent-colors, $theme, --900),
-            --border-color: props.get(core.$transparent-colors, $theme, --400),
-            --hover: (
-                --bg-color:     props.get(core.$transparent-colors, $theme, --300),
-                --label-color:  props.get(core.$transparent-colors, $theme, --900),
-                --border-color: props.get(core.$transparent-colors, $theme, --500),
-            ),
-            --active: (
-                --bg-color:     props.get(core.$transparent-colors, $theme, --400),
-                --label-color:  props.get(core.$transparent-colors, $theme, --900),
-                --border-color: props.get(core.$transparent-colors, $theme, --600),
-            ),
-            --disabled: (
-                --bg-color:     props.get(core.$transparent-colors, $theme, --100),
-                --label-color:  props.get(core.$transparent-colors, $theme, --500),
-                --border-color: props.get(core.$transparent-colors, $theme, --300),
-            ),
-            --key-focus: (
-                --border-color:  props.get(core.$transparent-colors, $theme, --900),
-                --outline-color: props.get(core.$transparent-colors, $theme, --300),
-            ),
-            --selected: (
-                --bg-color:     props.get(core.$transparent-colors, $theme, --800),
-                --label-color:  props.get(core.$transparent-colors, $theme, --text),
-                --border-color: props.get(core.$transparent-colors, $theme, --100),
-                --hover: (
-                    --bg-color:     props.get(core.$transparent-colors, $theme, --900),
-                    --label-color:  props.get(core.$transparent-colors, $theme, --text),
-                    --border-color: props.get(core.$transparent-colors, $theme, --100),
-                ),
-                --active: (
-                    --bg-color:     props.get(core.$transparent-colors, $theme, --900),
-                    --label-color:  props.get(core.$transparent-colors, $theme, --text),
-                    --border-color: props.get(core.$transparent-colors, $theme, --100),
-                ),
-                --disabled: (
-                    --bg-color:     props.get(core.$transparent-colors, $theme, --200),
-                    --label-color:  props.get(core.$transparent-colors, $theme, --500),
-                    --border-color: props.get(core.$transparent-colors, $theme, --100),
-                ),
-            ),
-            --quiet: (
-                --label-color:  props.get(core.$transparent-colors, $theme, --900),
-        
-                --hover: (
-                    --bg-color:    props.get(core.$transparent-colors, $theme, --300),
-                    --label-color: props.get(core.$transparent-colors, $theme, --900),
-                ),
-        
-                --active: (
-                    --bg-color:    props.get(core.$transparent-colors, $theme, --400),
-                    --label-color: props.get(core.$transparent-colors, $theme, --900),
-                ),
-        
-                --disabled: (
-                    --label-color: props.get(core.$transparent-colors, $theme, --500),
-                ),
-            ),
-        )
-    ));
-}
diff --git a/src/objects/_alert.scss b/src/objects/_alert.scss
index 825f7ce..697ac18 100644
--- a/src/objects/_alert.scss
+++ b/src/objects/_alert.scss
@@ -8,19 +8,33 @@
 @use 'alert.vars' as vars;
 @mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables('vars'));
-    @include bem.object('alert') {
+        @include bem.object('alert') {
-        padding-block:    props.get(vars.$pad-b);
+                padding-block:    props.get(vars.$pad-b);
-        padding-inline:   props.get(vars.$pad-i);
+                padding-inline:   props.get(vars.$pad-i);
-        background-color: props.get(vars.$bg-color);
+                background-color: props.get(vars.$bg-color);
-        border:           props.get(vars.$border-width) solid props.get(vars.$border-color);
+                border:           props.get(vars.$border-width) solid transparent;
-        border-radius:    props.get(vars.$rounding);
+                border-color:     props.get(vars.$border-color);
+                border-radius:    props.get(vars.$rounding);
+                box-shadow:
+                        props.get(vars.$shadow-x)
+                        props.get(vars.$shadow-y)
+                        props.get(vars.$shadow-blur)
+                        props.get(vars.$shadow-grow)
+                        props.get(vars.$shadow-color);
-        @each $mod, $theme in vars.$themes-config {
+                @each $mod, $theme in vars.$themes-config {
-            @include bem.modifier($mod) {
+                        @include bem.modifier($mod) {
-                border-color: props.get(vars.$themes, $theme, --border-color);
+                                background-color: props.get(vars.$themes, $theme, --bg-color);
-            }
+                                border-color: props.get(vars.$themes, $theme, --border-color);
-        }
+                                box-shadow:
-    }
+                                        props.get(vars.$shadow-x)
+                                        props.get(vars.$shadow-y)
+                                        props.get(vars.$shadow-blur)
+                                        props.get(vars.$shadow-grow)
+                                        props.get(vars.$themes, $theme, --shadow-color);
+                        }
+                }
+        }
 }
diff --git a/src/objects/_alert.vars.scss b/src/objects/_alert.vars.scss
index 53c9e68..62d3414 100644
--- a/src/objects/_alert.vars.scss
+++ b/src/objects/_alert.vars.scss
@@ -6,22 +6,31 @@ $pad-i:        props.def(--o-alert--pad-i, props.get(core.$size--250)) !default;
 $pad-b:        props.def(--o-alert--pad-b, props.get(core.$size--200)) !default;
 $rounding:     props.def(--o-alert--rounding, props.get(core.$rounding)) !default;
+$shadow-x:    props.def(--o-alert--shadow-x, props.get(core.$shadow--l2--x)) !default;
+$shadow-y:    props.def(--o-alert--shadow-y, props.get(core.$shadow--l2--y)) !default;
+$shadow-blur: props.def(--o-alert--shadow-blur, props.get(core.$shadow--l2--blur)) !default;
+$shadow-grow: props.def(--o-alert--shadow-grow, props.get(core.$shadow--l2--grow)) !default;
 $bg-color:     props.def(--o-alert--bg-color, props.get(core.$theme, --bg-l2), 'color') !default;
-$border-color: props.def(--o-alert--border-color, props.get(core.$theme, --text-mute-more), 'color') !default;
+$border-color: props.def(--o-alert--border-color, props.get(core.$theme, --text-mute-more) props.get(core.$theme, --text-mute-more) props.get(core.$theme, --text-mute), 'color') !default;
+$shadow-color:  props.def(--o-alert--shadow-color, props.get(core.$transparent-colors, --black, --200), 'color') !default;
 $themes-config: (
-    accent:   --accent,
+        accent:   --accent,
-    positive: --positive,
+        positive: --positive,
-    negative: --negative,
+        negative: --negative,
-    warning:  --warning,
+        warning:  --warning,
 ) !default;
 $themes: props.def(--o-alert, (), 'color');
 @each $theme, $key in $themes-config {
-    $themes: props.merge($themes, (
+        $themes: props.merge($themes, (
-        $key: (
+                $key: (
-            --border-color: props.get(core.$theme, $key, --700),
+                        --bg-color:     props.get(core.$theme, --bg-l2),
-        )
+                        --border-color: props.get(core.$theme, $key, --700) props.get(core.$theme, $key, --700) props.get(core.$theme, $key, --800),
-    ));
+                        --shadow-color: props.get(core.$theme, $key, --200),
+                )
+        ));
 }
diff --git a/src/objects/_avatar.scss b/src/objects/_avatar.scss
index fc4ffcd..9d51ffb 100644
--- a/src/objects/_avatar.scss
+++ b/src/objects/_avatar.scss
@@ -7,111 +7,120 @@
 @use 'avatar.vars' as vars;
 @mixin status($indicator-size) {
-    @include bem.elem('status') {
+        @include bem.elem('status') {
-        inline-size: props.get($indicator-size);
+                inline-size: props.get($indicator-size);
-        block-size:  props.get($indicator-size);
+                block-size:  props.get($indicator-size);
-        @include bem.next-elem('content') {
+                @include bem.sibling-elem('content') {
-            mask-image: radial-gradient(circle calc(.5 * props.get($indicator-size) + props.get(vars.$indicator-spacing)) at
+                        mask-image: radial-gradient(circle calc(.5 * props.get($indicator-size) + props.get(vars.$indicator-spacing)) at
-            calc(100% - .5 * props.get($indicator-size))
+                        calc(100% - .5 * props.get($indicator-size))
-            calc(100% - .5 * props.get($indicator-size)),
+                        calc(100% - .5 * props.get($indicator-size)),
-            transparent 95%,
+                        transparent 95%,
-            #fff);
+                        #fff);
-        }
+                }
-    }
+        }
 }
 @mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables('vars'));
-    @include bem.object('avatar') {
+        @include bem.object('avatar') {
-        position:       relative;
+                position:       relative;
-        display:        inline-block;
+                display:        inline-block;
-        font-size:      props.get(vars.$font-size);
+                font-size:      props.get(vars.$font-size);
-        font-style:     normal;
+                font-style:     normal;
-        vertical-align: .05em;
+                vertical-align: .05em;
-        border-radius:  props.get(vars.$rounding);
+                border-radius:  props.get(vars.$rounding);
-        &::after {
+                &::after {
-            position:       absolute;
+                        position:       absolute;
-            inset:          calc(-1 * props.get(vars.$key-focus--border-offset));
+                        inset:          calc(-1 * props.get(vars.$key-focus--border-offset));
-            z-index:        1;
+                        z-index:        1;
-            display:        none;
+                        display:        none;
-            pointer-events: none;
+                        pointer-events: none;
-            content:        '';
+                        outline:        props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
-            border:         props.get(vars.$key-focus--border-offset) solid transparent;
+                        content:        '';
-            border-radius:  props.get(vars.$rounding);
+                        border:         props.get(vars.$key-focus--border-offset) solid transparent;
-            outline:        props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
+                        border-radius:  props.get(vars.$rounding);
-            box-shadow:
+                        box-shadow:
-                0
+                                0
-                0
+                                0
-                0
+                                0
-                calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
+                                calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
-                props.get(vars.$key-focus--outline-color);
+                                props.get(vars.$key-focus--outline-color);
-        }
+                }
-        @include bem.elem('status') {
+                @include bem.elem('status') {
-            position:         absolute;
+                        position:         absolute;
-            inset-block-end:  0;
+                        inset-block-end:  0;
-            inset-inline-end: 0;
+                        inset-inline-end: 0;
-        }
+                }
-        @include status(vars.$indicator-size);
+                @include status(vars.$indicator-size);
-        @include bem.elem('content') {
+                @include bem.elem('content') {
-            display:          block;
+                        display:          block;
-            inline-size:      props.get(vars.$size);
+                        inline-size:      props.get(vars.$size);
-            block-size:       props.get(vars.$size);
+                        block-size:       props.get(vars.$size);
-            line-height:      props.get(vars.$size);
+                        line-height:      props.get(vars.$size);
-            text-align:       center;
+                        text-align:       center;
-            object-fit:       cover;
+                        object-fit:       cover;
-            object-position:  center center;
+                        object-position:  center center;
-            border-radius:    props.get(vars.$rounding);
+                        border-radius:    props.get(vars.$rounding);
-        }
+                }
-        @include bem.modifier('circle') {
+                @include bem.modifier('circle') {
-            border-radius: 100%;
+                        border-radius: 100%;
-            &::after {
+                        &::after {
-                border-radius: 100%;
+                                border-radius: 100%;
-            }
+                        }
-            @include bem.elem('content') {
+                        @include bem.elem('content') {
-                border-radius: 100%;
+                                border-radius: 100%;
-            }
+                        }
-        }
+                }
-        @include bem.modifier('placeholder') {
+                @include bem.modifier('placeholder') {
-            @include bem.elem('content') {
+                        @include bem.elem('content') {
-                background-color: hsl(0, 0%, props.get(vars.$bg-color--l));
+                                background-color: hsl(0, 0%, props.get(vars.$bg-color--l));
-            }
+                        }
-        }
+                }
-        @include bem.modifier('colored') {
+                @include bem.modifier('colored') {
-            @include bem.elem('content') {
+                        @include bem.elem('content') {
-                color:            #fff;
+                                color:            #fff;
-                background-color: hsl(props.get(vars.$bg-color--h), props.get(vars.$bg-color--s), props.get(vars.$bg-color--l));
+                                background-color: hsl(props.get(vars.$bg-color--h), props.get(vars.$bg-color--s), props.get(vars.$bg-color--l));
-            }
+                        }
-        }
+                }
-        @each $mod, $size, $font-size, $indicator-size in vars.$sizes {
+                @include bem.modifier('colored-gradient') {
-            @include bem.modifier($mod) {
+                        @include bem.elem('content') {
-                font-size: props.get($font-size);
+                                color:      #fff;
+                                background: linear-gradient(props.get(vars.$bg-angle),
+                                hsl(props.get(vars.$bg-color--h), props.get(vars.$bg-color--s), props.get(vars.$bg-color--l)),
+                                hsl(props.get(vars.$bg-color-2--h), props.get(vars.$bg-color-2--s), props.get(vars.$bg-color-2--l)));
+                        }
+                }
+                @each $mod, $size, $font-size, $indicator-size in vars.$sizes {
+                        @include bem.modifier($mod) {
+                                font-size: props.get($font-size);
    
-                @include status($indicator-size);
+                                @include status($indicator-size);
    
-                @include bem.elem('content') {
+                                @include bem.elem('content') {
-                    inline-size: props.get($size);
+                                        inline-size: props.get($size);
-                    block-size:  props.get($size);
+                                        block-size:  props.get($size);
-                    line-height: props.get($size);
+                                        line-height: props.get($size);
-                }
+                                }
-            }
+                        }
-        }
+                }
    
-        &:focus-visible {
+                &:focus-visible {
-            &::after {
+                        &::after {
-                display: block;
+                                display: block;
-            }
+                        }
-        }
+                }
-    }
+        }
 }
diff --git a/src/objects/_avatar.vars.scss b/src/objects/_avatar.vars.scss
index 72fb397..2374f5a 100644
--- a/src/objects/_avatar.vars.scss
+++ b/src/objects/_avatar.vars.scss
@@ -39,14 +39,20 @@ $bg-color--h: props.def(--o-avatar--bg-color--h, 354, 'color') !default;
 $bg-color--s: props.def(--o-avatar--bg-color--s, 44%, 'color') !default;
 $bg-color--l: props.def(--o-avatar--bg-color--l, 45%, 'color') !default;
+$bg-color-2--h: props.def(--o-avatar--bg-color-2--h, 354, 'color') !default;
+$bg-color-2--s: props.def(--o-avatar--bg-color-2--s, 44%, 'color') !default;
+$bg-color-2--l: props.def(--o-avatar--bg-color-2--l, 45%, 'color') !default;
+$bg-angle: props.def(--o-avatar--bg-angle, 180deg) !default;
 $key-focus--border-color:  props.def(--o-avatar--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
 $key-focus--outline-color: props.def(--o-avatar--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default;
 $sizes: (
-    'xs'   $size--xs   $font-size--xs   $indicator-size--xs,
+        'xs'   $size--xs   $font-size--xs   $indicator-size--xs,
-    'sm'   $size--sm   $font-size--sm   $indicator-size--sm,
+        'sm'   $size--sm   $font-size--sm   $indicator-size--sm,
-    'lg'   $size--lg   $font-size--lg   $indicator-size--lg,
+        'lg'   $size--lg   $font-size--lg   $indicator-size--lg,
-    'xl'   $size--xl   $font-size--xl   $indicator-size--xl,
+        'xl'   $size--xl   $font-size--xl   $indicator-size--xl,
-    'xxl'  $size--xxl  $font-size--xxl  $indicator-size--xxl,
+        'xxl'  $size--xxl  $font-size--xxl  $indicator-size--xxl,
-    'xxxl' $size--xxxl $font-size--xxxl $indicator-size--xxxl,
+        'xxxl' $size--xxxl $font-size--xxxl $indicator-size--xxxl,
 ) !default;
diff --git a/src/objects/_backdrop.scss b/src/objects/_backdrop.scss
index 9cc9e2e..346cf5f 100644
--- a/src/objects/_backdrop.scss
+++ b/src/objects/_backdrop.scss
@@ -7,17 +7,17 @@
 @use 'backdrop.vars' as vars;
 @mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables('vars'));
-    @include bem.object('backdrop') {
+        @include bem.object('backdrop') {
-        position:         fixed;
+                position:         fixed;
-        inset:            0;
+                inset:            0;
-        z-index:          props.get(vars.$z-index);
+                z-index:          props.get(vars.$z-index);
-        box-sizing:       border-box;
+                box-sizing:       border-box;
-        display:          flex;
+                display:          flex;
-        flex-direction:   column;
+                flex-direction:   column;
-        overflow:         auto;
+                overflow:         auto;
-        background-color: props.get(vars.$bg-color);
+                background-color: props.get(vars.$bg-color);
-        backdrop-filter:  blur(props.get(vars.$blur));
+                backdrop-filter:  blur(props.get(vars.$blur));
-    }
+        }
 }
diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss
deleted file mode 100644
index 9f3e307..0000000
--- a/src/objects/_badge.scss
+++ /dev/null
@@ -1,144 +0,0 @@
-@use 'sass:list';
-@use 'sass:map';
-@use 'sass:meta';
-@use 'sass:string';
-@use 'iro-sass/src/bem';
-@use 'iro-sass/src/props';
-@use '../props' as *;
-@use '../core.vars' as core;
-@forward 'badge.vars';
-@use 'badge.vars' as vars;
-@mixin -apply-theme($theme, $key: (), $static: false) {
-    color:            props.get($theme, list.join($key, --label)...);
-    background-color: props.get($theme, list.join($key, --bg)...);
-    &:link,
-    &:visited,
-    &:enabled {
-        &:hover,
-        &:focus-visible {
-            color:            props.get($theme, list.join($key, --hover --label)...);
-            background-color: props.get($theme, list.join($key, --hover --bg)...);
-        }
-        &:active {
-            color:            props.get($theme, list.join($key, --active --label)...);
-            background-color: props.get($theme, list.join($key, --active --bg)...);
-        }
-    }
-    @include bem.modifier('quiet') {
-        color:            props.get($theme, list.join($key, --quiet --label)...);
-        background-color: props.get($theme, list.join($key, --quiet --bg)...);
-        &:link,
-        &:visited,
-        &:enabled {
-            &:hover,
-            &:focus-visible {
-                color:            props.get($theme, list.join($key, --quiet --hover --label)...);
-                background-color: props.get($theme, list.join($key, --quiet --hover --bg)...);
-            }
-            &:active {
-                color:            props.get($theme, list.join($key, --quiet --active --label)...);
-                background-color: props.get($theme, list.join($key, --quiet --active --bg)...);
-            }
-        }
-    }
-    @if $static {
-        &::after {
-            outline-color: props.get($theme, list.join($key, --key-focus --border)...);
-            box-shadow:
-                0
-                0
-                0
-                calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
-                props.get($theme, list.join($key, --key-focus --outline)...);
-        }
-    }
-}
-@mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
-    @include bem.object('badge') {
-        position:         relative;
-        display:          inline-block;
-        padding-block:    props.get(vars.$pad-b);
-        padding-inline:   props.get(vars.$pad-i);
-        font-size:        props.get(vars.$font-size);
-        line-height:      props.get(core.$font--standard--line-height);
-        text-align:       center;
-        text-decoration:  none;
-        background-clip:  padding-box;
-        border-radius:    props.get(vars.$rounding);
-        &::after {
-            position:       absolute;
-            inset:          calc(-1 * props.get(vars.$key-focus--border-offset));
-            z-index:        1;
-            display:        none;
-            pointer-events: none;
-            content:        '';
-            border-radius:  calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
-            outline:        transparent solid props.get(vars.$key-focus--border-width);
-        }
-        &:link,
-        &:visited,
-        &:enabled {
-            &:focus-visible {
-                &::after {
-                    display: block;
-                }
-            }
-        }
-        @include bem.elem('label') {
-            margin-inline: props.get(vars.$pad-i-label);
-        }
-        @include -apply-theme(vars.$default-theme, $static: true);
-        @each $theme in map.keys(props.get(vars.$themes)) {
-            @include bem.modifier(string.slice($theme, 3)) {
-                @include -apply-theme(vars.$themes, $theme);
-            }
-        }
-        @each $theme in map.keys(props.get(vars.$static-themes)) {
-            @include bem.modifier(string.slice($theme, 3)) {
-                @include -apply-theme(vars.$static-themes, $theme, true);
-            }
-        }
-    
-        @include bem.modifier('pill') {
-            padding-inline: props.get(vars.$pad-i-pill);
-            border-radius:  10em;
-            &::after {
-                border-radius: 10em;
-            }
-        }
-        @each $mod, $pad-b, $pad-i, $pad-i-pill, $pad-i-label, $font-size in vars.$sizes {
-            @include bem.modifier($mod) {
-                padding-block:  props.get($pad-b);
-                padding-inline: props.get($pad-i);
-                font-size:      props.get($font-size);
-                @include bem.elem('label') {
-                    margin-inline: props.get($pad-i-label);
-                }
-        
-                @include bem.modifier('pill') {
-                    padding-inline: props.get($pad-i-pill);
-                }
-            }
-        }
-    }
-}
diff --git a/src/objects/_badge.vars.scss b/src/objects/_badge.vars.scss
deleted file mode 100644
index d96d6c4..0000000
--- a/src/objects/_badge.vars.scss
+++ /dev/null
@@ -1,161 +0,0 @@
-@use 'sass:map';
-@use 'sass:string';
-@use 'iro-sass/src/props';
-@use '../core.vars' as core;
-$pad-b:       props.def(--o-badge--pad-b, props.get(core.$size--50)) !default;
-$pad-i:       props.def(--o-badge--pad-i, props.get(core.$size--100)) !default;
-$pad-i-pill:  props.def(--o-badge--pad-i-pill, props.get(core.$size--150)) !default;
-$pad-i-label: props.def(--o-badge--pad-i-label, props.get(core.$size--50)) !default;
-$rounding:    props.def(--o-badge--rounding, props.get(core.$rounding)) !default;
-$font-size:   props.def(--o-badge--font-size, props.get(core.$font-size--75)) !default;
-$pad-b--sm:       props.def(--o-badge--sm--pad-b, props.get(core.$size--25)) !default;
-$pad-i--sm:       props.def(--o-badge--sm--pad-i, props.get(core.$size--75)) !default;
-$pad-i-pill--sm:  props.def(--o-badge--sm--pad-i-pill, props.get(core.$size--125)) !default;
-$pad-i-label--sm: props.def(--o-badge--sm--pad-i-label, props.get(core.$size--25)) !default;
-$font-size--sm:   props.def(--o-badge--sm--font-size, props.get(core.$font-size--50)) !default;
-$pad-b--lg:       props.def(--o-badge--lg--pad-b, props.get(core.$size--75)) !default;
-$pad-i--lg:       props.def(--o-badge--lg--pad-i, props.get(core.$size--125)) !default;
-$pad-i-pill--lg:  props.def(--o-badge--lg--pad-i-pill, props.get(core.$size--175)) !default;
-$pad-i-label--lg: props.def(--o-badge--lg--pad-i-label, props.get(core.$size--50)) !default;
-$font-size--lg:   props.def(--o-badge--lg--font-size, props.get(core.$font-size--100)) !default;
-$pad-b--xl:       props.def(--o-badge--xl--pad-b, props.get(core.$size--100)) !default;
-$pad-i--xl:       props.def(--o-badge--xl--pad-i, props.get(core.$size--150)) !default;
-$pad-i-pill--xl:  props.def(--o-badge--xl--pad-i-pill, props.get(core.$size--225)) !default;
-$pad-i-label--xl: props.def(--o-badge--xl--pad-i-label, props.get(core.$size--75)) !default;
-$font-size--xl:   props.def(--o-badge--xl--font-size, props.get(core.$font-size--150)) !default;
-$key-focus--border-width:  props.def(--o-badge--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
-$key-focus--border-offset: props.def(--o-badge--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
-$key-focus--outline-width: props.def(--o-badge--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
-$sizes: (
-    'sm' $pad-b--sm $pad-i--sm $pad-i-pill--sm $pad-i-label--sm $font-size--sm,
-    'lg' $pad-b--lg $pad-i--lg $pad-i-pill--lg $pad-i-label--lg $font-size--lg,
-    'xl' $pad-b--xl $pad-i--xl $pad-i-pill--xl $pad-i-label--xl $font-size--xl,
-) !default;
-$default-theme-override: () !default;
-$default-theme: props.def(--o-badge, (
-    --bg:    props.get(core.$theme, --text-mute),
-    --label: props.get(core.$theme, --bg-l2),
-    
-    --hover: (
-        --bg:    props.get(core.$theme, --text),
-        --label: props.get(core.$theme, --bg-l2),
-    ),
-    --active: (
-        --bg:    props.get(core.$theme, --heading),
-        --label: props.get(core.$theme, --bg-l2),
-    ),
-    --key-focus: (
-        --label:   props.get(core.$theme, --focus, --text),
-        --border:  props.get(core.$theme, --focus, --border),
-        --outline: props.get(core.$theme, --focus, --outline),
-    ),
-    --quiet: (
-        --bg:    props.get(core.$theme, --border-mute),
-        --label: props.get(core.$theme, --heading),
-        --hover: (
-            --bg:    props.get(core.$theme, --border),
-            --label: props.get(core.$theme, --heading),
-        ),
-        --active: (
-            --bg:     props.get(core.$theme, --border-strong),
-            --label: props.get(core.$theme, --heading),
-        ),
-    )
-), 'color');
-$default-theme: props.merge($default-theme, $default-theme-override);
-$static-themes: props.def(--o-badge, (), 'color');
-@each $theme in map.keys(props.get(core.$transparent-colors)) {
-    $badge-theme: --static-#{string.slice($theme, 3)};
-    $static-themes: props.merge($static-themes, (
-        $badge-theme: (
-            --bg:    props.get(core.$transparent-colors, $theme, --800),
-            --label: props.get(core.$transparent-colors, $theme, --text),
-            --hover: (
-                --bg:    props.get(core.$transparent-colors, $theme, --900),
-                --label: props.get(core.$transparent-colors, $theme, --text),
-            ),
-            --active: (
-                --bg:    props.get(core.$transparent-colors, $theme, --900),
-                --label: props.get(core.$transparent-colors, $theme, --text),
-            ),
-            --key-focus: (
-                --bg:      props.get(core.$transparent-colors, $theme, --100),
-                --label:   props.get(core.$transparent-colors, $theme, --900),
-                --border:  props.get(core.$transparent-colors, $theme, --900),
-                --outline: props.get(core.$transparent-colors, $theme, --300),
-            ),
-            --quiet: (
-                --bg:    props.get(core.$transparent-colors, $theme, --200),
-                --label: props.get(core.$transparent-colors, $theme, --900),
-                --hover: (
-                    --bg:    props.get(core.$transparent-colors, $theme, --300),
-                    --label: props.get(core.$transparent-colors, $theme, --900),
-                ),
-                --active: (
-                    --bg:    props.get(core.$transparent-colors, $theme, --400),
-                    --label: props.get(core.$transparent-colors, $theme, --900),
-                ),
-            )
-        )
-    ));
-}
-$themes-config: (
-    accent:   --accent,
-    positive: --positive,
-    negative: --negative,
-    warning:  --warning,
-) !default;
-$themes: props.def(--o-badge, (), 'color');
-@each $theme, $key in $themes-config {
-    $themes: props.merge($themes, (
-        --#{$theme}: (
-            --bg:    props.get(core.$theme, #{$key}-static, --900),
-            --label: props.get(core.$theme, #{$key}-static, --900-text),
-            
-            --hover: (
-                --bg:    props.get(core.$theme, #{$key}-static, --1000),
-                --label: props.get(core.$theme, #{$key}-static, --1000-text),
-            ),
-            --active: (
-                --bg:    props.get(core.$theme, #{$key}-static, --1100),
-                --label: props.get(core.$theme, #{$key}-static, --1000-text),
-            ),
-            --quiet: (
-                --bg:    props.get(core.$theme, $key, --200),
-                --label: props.get(core.$theme, $key, --1100),
-                --hover: (
-                    --bg:    props.get(core.$theme, $key, --300),
-                    --label: props.get(core.$theme, $key, --1200),
-                ),
-                --active: (
-                    --bg:    props.get(core.$theme, $key, --400),
-                    --label: props.get(core.$theme, $key, --1300),
-                ),
-            )
-        )
-    ));
-}
diff --git a/src/objects/_button.scss b/src/objects/_button.scss
index aaf55b5..df90cc8 100644
--- a/src/objects/_button.scss
+++ b/src/objects/_button.scss
@@ -5,154 +5,293 @@
 @use 'iro-sass/src/bem';
 @use 'iro-sass/src/props';
 @use '../props' as *;
-@use '../core.vars' as core;
 @forward 'button.vars';
 @use 'button.vars' as vars;
 @mixin -apply-theme($theme, $key: ()) {
-    &:link,
+        color:            props.get($theme, list.join($key, --disabled --label-color)...);
-    &:visited,
+        background-color: props.get($theme, list.join($key, --disabled --bg-color)...);
-    &:enabled {
+        border-color:     props.get($theme, list.join($key, --disabled --border-color)...);
-        color:            props.get($theme, list.join($key, --label)...);
-        background-color: props.get($theme, list.join($key, --bg)...);
-        border-color:     transparent;
-    }
-    
-    @include bem.modifier('outline') {
-        &:link,
-        &:visited,
-        &:enabled {
-            color:            props.get($theme, list.join($key, --outline-label)...);
-            background-color: transparent;
-            border-color:     props.get($theme, list.join($key, --outline-border)...);
-        }
-    }
-    &:link,
+        &::after {
-    &:visited,
+                outline-color: props.get($theme, list.join($key, --key-focus --border-color)...);
-    &:enabled {
+                box-shadow:
-        &:hover,
+                        0
-        &:focus-visible {
+                        0
-            color:            props.get($theme, list.join($key, --hover --label)...);
+                        0
-            background-color: props.get($theme, list.join($key, --hover --bg)...);
+                        calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
-            border-color:     transparent;
+                        props.get($theme, list.join($key, --key-focus --outline-color)...);
-        }
+        }
-        &:active {
+        &:link,
-            color:            props.get($theme, list.join($key, --active --label)...);
+        &:visited,
-            background-color: props.get($theme, list.join($key, --active --bg)...);
+        &:enabled {
-            border-color:     transparent;
+                color:            props.get($theme, list.join($key, --label-color)...);
-        }
+                background-color: props.get($theme, list.join($key, --bg-color)...);
-    }
+                border-color:     props.get($theme, list.join($key, --border-color)...);
-}
+                box-shadow:
+                        props.get(vars.$shadow-x)
+                        props.get(vars.$shadow-y)
+                        props.get(vars.$shadow-blur)
+                        props.get(vars.$shadow-grow)
+                        props.get($theme, list.join($key, --shadow-color)...);
+            
+                &:hover,
+                &:focus-visible {
+                        color:            props.get($theme, list.join($key, --hover --label-color)...);
+                        background-color: props.get($theme, list.join($key, --hover --bg-color)...);
+                        border-color:     props.get($theme, list.join($key, --hover --border-color)...);
+                }
-@mixin -apply-static-theme($theme, $key: ()) {
+                &:active {
-    color:            props.get($theme, list.join($key, --disabled --label)...);
+                        color:            props.get($theme, list.join($key, --active --label-color)...);
-    background-color: props.get($theme, list.join($key, --disabled --bg)...);
+                        background-color: props.get($theme, list.join($key, --active --bg-color)...);
-    border-color:     transparent;
+                        border-color:     props.get($theme, list.join($key, --active --border-color)...);
+                        box-shadow:       none;
+                }
+        }
-    &::after {
+        @include bem.modifier('badge') {
-        outline-color: props.get($theme, list.join($key, --key-focus --border)...);
+                color:            props.get($theme, list.join($key, --badge --label-color)...);
-        box-shadow:
+                background-color: props.get($theme, list.join($key, --badge --bg-color)...);
-            0
+                border-color:     props.get($theme, list.join($key, --badge --border-color)...);
-            0
+                box-shadow:       none;
-            0
-            calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
+                &:link,
-            props.get($theme, list.join($key, --key-focus --outline)...);
+                &:visited,
-    }
+                &:enabled {
-    
+                        color:            props.get($theme, list.join($key, --badge --label-color)...);
-    @include bem.modifier('outline') {
+                        background-color: props.get($theme, list.join($key, --badge --bg-color)...);
-        background-color: transparent;
+                        border-color:     props.get($theme, list.join($key, --badge --border-color)...);
-        border-color:     props.get($theme, list.join($key, --disabled --outline-border)...);
+                        box-shadow:       none;
-    }
+                        &:hover,
+                        &:focus-visible {
+                                color:            props.get($theme, list.join($key, --badge --hover --label-color)...);
+                                background-color: props.get($theme, list.join($key, --badge --hover --bg-color)...);
+                                border-color:     props.get($theme, list.join($key, --badge --hover --border-color)...);
+                        }
+                        &:active {
+                                color:            props.get($theme, list.join($key, --badge --active --label-color)...);
+                                background-color: props.get($theme, list.join($key, --badge --active --bg-color)...);
+                                border-color:     props.get($theme, list.join($key, --badge --active --border-color)...);
+                        }
+                }
+        }
+        @include bem.modifier('quiet') {
+                color:            props.get($theme, list.join($key, --quiet --disabled --label-color)...);
+                background-color: transparent;
+                border-color:     transparent;
+                &:link,
+                &:visited,
+                &:enabled {
+                        color:            props.get($theme, list.join($key, --quiet --label-color)...);
+                        background-color: transparent;
+                        border-color:     transparent;
+                        box-shadow:       none;
-    @include -apply-theme($theme, $key);
+                        &:hover,
+                        &:focus-visible {
+                                color:            props.get($theme, list.join($key, --quiet --hover --label-color)...);
+                                background-color: props.get($theme, list.join($key, --quiet --hover --bg-color)...);
+                                border-color:     transparent;
+                        }
-    @include bem.modifier('primary') {
+                        &:active {
-        @include -apply-theme($theme, list.join($key, --primary));
+                                color:            props.get($theme, list.join($key, --quiet --active --label-color)...);
-    }
+                                background-color: props.get($theme, list.join($key, --quiet --active --bg-color)...);
+                                border-color:     transparent;
+                        }
+                }
+        }
+        @include bem.is('highlighted') {
+                &:link,
+                &:visited,
+                &:enabled {
+                        &,
+                        &:hover,
+                        &:focus-visible {
+                                border-color: props.get($theme, list.join($key, --highlighted --border-color)...);
+                        }
+                        box-shadow:
+                                0 0 0 1px props.get($theme, list.join($key, --highlighted --border-color)...),
+                                props.get(vars.$shadow-x)
+                                props.get(vars.$shadow-y)
+                                props.get(vars.$shadow-blur)
+                                props.get(vars.$shadow-grow)
+                                props.get($theme, list.join($key, --highlighted --shadow-color)...);
+                        &:focus-visible {
+                                box-shadow:
+                                        props.get(vars.$shadow-x)
+                                        props.get(vars.$shadow-y)
+                                        props.get(vars.$shadow-blur)
+                                        props.get(vars.$shadow-grow)
+                                        props.get($theme, list.join($key, --shadow-color)...);
+                        }
+                }
+        }
+        @include bem.is('selected') {
+                color:            props.get($theme, list.join($key, --selected --disabled --label-color)...);
+                background-color: props.get($theme, list.join($key, --selected --disabled --bg-color)...);
+                border-color:     props.get($theme, list.join($key, --selected --disabled --border-color)...);
+                @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'badge') {
+                        color:            props.get($theme, list.join($key, --selected --label-color)...);
+                        background-color: props.get($theme, list.join($key, --selected --bg-color)...);
+                        border-color:     props.get($theme, list.join($key, --selected --border-color)...);
+                }
+                &:link,
+                &:visited,
+                &:enabled {
+                        &:hover,
+                        &:focus-visible {
+                                color:            props.get($theme, list.join($key, --selected --hover --label-color)...);
+                                background-color: props.get($theme, list.join($key, --selected --hover --bg-color)...);
+                                border-color:     props.get($theme, list.join($key, --selected --hover --border-color)...);
+                        }
+    
+                        &:active {
+                                color:            props.get($theme, list.join($key, --selected --active --label-color)...);
+                                background-color: props.get($theme, list.join($key, --selected --active --bg-color)...);
+                                border-color:     props.get($theme, list.join($key, --selected --active --border-color)...);
+                        }
+                }
+        }
 }
 @mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables('vars'));
-    @include bem.object('button') {
+        @include bem.object('button') {
-        position:         relative;
+                position:         relative;
-        display:          inline-block;
+                display:          inline-block;
-        padding-block:    props.get(vars.$pad-b);
+                padding-block:    props.get(vars.$pad-b);
-        padding-inline:   props.get(vars.$pad-i);
+                padding-inline:   props.get(vars.$pad-i);
-        font-size:        props.get(vars.$font-size);
+                text-overflow:    ellipsis;
-        font-weight:      500;
+                font-size:        props.get(vars.$font-size);
-        line-height:      props.get(vars.$line-height);
+                line-height:      props.get(vars.$line-height);
-        text-align:       center;
+                text-align:       center;
-        text-decoration:  none;
+                white-space:      nowrap;
-        border:           props.get(vars.$border-width) solid transparent;
+                text-decoration:  none;
-        border-radius:    props.get(vars.$rounding);
+                border:           props.get(vars.$border-width) solid transparent;
+                border-radius:    props.get(vars.$rounding);
+                transition:       color .1s, background-color .1s, border-color .1s, box-shadow .1s;
-        &::after {
+                &::after {
-            position:       absolute;
+                        position:       absolute;
-            inset:          calc(-1 * props.get(vars.$border-width) - props.get(vars.$key-focus--border-offset));
+                        inset:          calc(-1 * props.get(vars.$border-width) - props.get(vars.$key-focus--border-offset));
-            z-index:        1;
+                        z-index:        1;
-            display:        none;
+                        display:        none;
-            pointer-events: none;
+                        pointer-events: none;
-            content:        '';
+                        outline:        transparent solid props.get(vars.$key-focus--border-width);
-            border-radius:  calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
+                        content:        '';
-            outline:        transparent solid props.get(vars.$key-focus--border-width);
+                        border-radius:  calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
-        }
+                }
-        &:link,
+                &:link,
-        &:visited,
+                &:visited,
-        &:enabled {
+                &:enabled {
-            &:focus-visible {
+                        &:focus-visible {
-                &::after {
+                                transition: none;
-                    display: block;
-                }
-            }
-        }
-        @include bem.elem('label') {
+                                &::after {
-            margin-inline: props.get(vars.$pad-i-label);
+                                        display: block;
-        }
+                                }
-    
+                        }
-        @include bem.modifier('block') {
+                }
-            display: block;
-        }
+                @include bem.elem('label') {
-    
+                        margin-inline: props.get(vars.$pad-i-label);
-        @include bem.modifier('outline') {
+                }
-            background-color: transparent;
-        }
+                @include -apply-theme(vars.$default-theme);
+                @each $theme in map.keys(props.get(vars.$themes)) {
+                        @include bem.modifier(string.slice($theme, 3)) {
+                                @include -apply-theme(vars.$themes, $theme);
+                        }
+                }
+                @include bem.modifier('pill') {
+                        padding-inline: props.get(vars.$pad-i-pill);
+                        border-radius:  100em;
+                        &::after {
+                                border-radius:  100em;
+                        }
+                }
-        @each $mod, $pad-i, $pad-i-label, $pad-b, $font-size in vars.$sizes {
+                @include bem.modifier('icon') {
-            @include bem.modifier($mod) {
+                        inline-size:    calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b));
-                padding-block:  props.get($pad-b);
+                        padding-inline: 0;
-                padding-inline: props.get($pad-i);
+                }
-                font-size:      props.get($font-size);
-                @include bem.elem('label') {
+                @include bem.modifier('wide') {
-                    margin-inline: props.get($pad-i-label);
+                        @include bem.elem('label') {
-                }
+                                margin-inline: props.get(vars.$pad-i-wide);
-            }
+                        }
-        }
+                }
-        @include -apply-static-theme(vars.$default-theme);
+                @each $mod, $pad-i, $pad-i-label, $pad-i-wide, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes {
+                        @include bem.modifier($mod) {
+                                padding-block:  props.get($pad-b);
+                                padding-inline: props.get($pad-i);
+                                font-size:      props.get($font-size);
-        @each $theme in map.keys(props.get(vars.$themes)) {
+                                @include bem.elem('label') {
-            @include bem.modifier(string.slice($theme, 3)) {
+                                        margin-inline: props.get($pad-i-label);
-                @include -apply-theme(vars.$themes, $theme);
+                                }
-            }
-        }
-        @each $theme in map.keys(props.get(vars.$static-themes)) {
+                                @include bem.modifier('pill') {
-            @include bem.modifier(string.slice($theme, 3)) {
+                                        padding-inline: props.get($pad-i-pill);
-                @include -apply-static-theme(vars.$static-themes, $theme);
+                                }
-            }
-        }
+                                @include bem.modifier('icon') {
+                                        inline-size:    calc(1em * props.get(vars.$line-height) + 2 * props.get($pad-b));
+                                        padding-inline: 0;
+                                }
+                                @include bem.modifier('wide') {
+                                        @include bem.elem('label') {
+                                                margin-inline: props.get($pad-i-wide);
+                                        }
+                                }
+                        }
+                }
+                @include bem.modifier('align-block') {
+                        margin-inline: calc(-1 * props.get(vars.$pad-i) - props.get(vars.$border-width));
+                        @include bem.modifier('pill') {
+                                margin-inline: calc(-1 * props.get(vars.$pad-i-pill) - props.get(vars.$border-width));
+                        }
+                        @include bem.modifier('icon') {
+                                margin-inline: calc(-1 * props.get(vars.$pad-b) - props.get(vars.$border-width) - .5em * (props.get(vars.$line-height) - 1));
+                        }
+                        @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes {
+                                @include bem.modifier($mod) {
+                                        margin-inline: calc(-1 * props.get($pad-i) - props.get(vars.$border-width));
    
-        @include bem.modifier('round') {
+                                        @include bem.modifier('pill') {
-            inline-size:    calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b));
+                                                margin-inline: calc(-1 * props.get($pad-i-pill) - props.get(vars.$border-width));
-            padding-inline: 0;
+                                        }
-            border-radius:  100em;
-        }
+                                        @include bem.modifier('icon') {
-    }
+                                                margin-inline: calc(-1 * props.get($pad-b) - props.get(vars.$border-width) - .5em * (props.get(vars.$line-height) - 1));
+                                        }
+                                }
+                        }
+                }
+        }
 }
diff --git a/src/objects/_button.vars.scss b/src/objects/_button.vars.scss
index 65993ad..391e321 100644
--- a/src/objects/_button.vars.scss
+++ b/src/objects/_button.vars.scss
@@ -4,165 +4,383 @@
 @use '../core.vars' as core;
 $line-height:  props.def(--o-button--line-height, 1.4) !default;
-$pad-i:        props.def(--o-button--pad-i, props.get(core.$size--200)) !default;
+$border-width: props.def(--o-button--border-width, props.get(core.$border-width--thin)) !default;
+$rounding:     props.def(--o-button--rounding, props.get(core.$rounding--sm)) !default;
+$pad-i--xs:       props.def(--o-button--xs--pad-i, props.get(core.$size--75)) !default;
+$pad-i-label--xs: props.def(--o-button--xs--pad-i-label, props.get(core.$size--40)) !default;
+$pad-i-wide--xs:  props.def(--o-button--xs--pad-i-wide, props.get(core.$size--150)) !default;
+$pad-i-pill--xs:  props.def(--o-button--xs--pad-i-pill, props.get(core.$size--115)) !default;
+$pad-b--xs:       props.def(--o-button--xs--pad-b, props.get(core.$size--40)) !default;
+$font-size--xs:   props.def(--o-button--xs--font-size, props.get(core.$font-size--75)) !default;
+$pad-i--sm:       props.def(--o-button--sm--pad-i, props.get(core.$size--85)) !default;
+$pad-i-label--sm: props.def(--o-button--sm--pad-i-label, props.get(core.$size--50)) !default;
+$pad-i-wide--sm:  props.def(--o-button--sm--pad-i-wide, props.get(core.$size--175)) !default;
+$pad-i-pill--sm:  props.def(--o-button--sm--pad-i-pill, props.get(core.$size--125)) !default;
+$pad-b--sm:       props.def(--o-button--sm--pad-b, props.get(core.$size--50)) !default;
+$font-size--sm:   props.def(--o-button--sm--font-size, props.get(core.$font-size--100)) !default;
+$pad-i:        props.def(--o-button--pad-i, props.get(core.$size--115)) !default;
 $pad-i-label:  props.def(--o-button--pad-i-label, props.get(core.$size--50)) !default;
-$pad-b:        props.def(--o-button--pad-b, props.get(core.$size--65)) !default;
+$pad-i-wide:   props.def(--o-button--pad-i-wide, props.get(core.$size--200)) !default;
-$border-width: props.def(--o-button--border-width, props.get(core.$border-width--medium)) !default;
+$pad-i-pill:   props.def(--o-button--pad-i-pill, props.get(core.$size--160)) !default;
-$rounding:     props.def(--o-button--rounding, 10em) !default;
+$pad-b:        props.def(--o-button--pad-b, props.get(core.$size--85)) !default;
 $font-size:    props.def(--o-button--font-size, props.get(core.$font-size--100)) !default;
-$pad-i--sm:       props.def(--o-button--sm--pad-i, props.get(core.$size--125)) !default;
+$pad-i--lg:       props.def(--o-button--lg--pad-i, props.get(core.$size--160)) !default;
-$pad-i-label--sm: props.def(--o-button--sm--pad-i-label, props.get(core.$size--25)) !default;
+$pad-i-label--lg: props.def(--o-button--lg--pad-i-label, props.get(core.$size--65)) !default;
-$pad-b--sm:       props.def(--o-button--sm--pad-b, props.get(core.$size--25)) !default;
+$pad-i-wide--lg:  props.def(--o-button--lg--pad-i-wide, props.get(core.$size--300)) !default;
-$font-size--sm:   props.def(--o-button--sm--font-size, props.get(core.$font-size--75)) !default;
+$pad-i-pill--lg:  props.def(--o-button--lg--pad-i-pill, props.get(core.$size--175)) !default;
+$pad-b--lg:       props.def(--o-button--lg--pad-b, props.get(core.$size--115)) !default;
-$pad-i--lg:       props.def(--o-button--lg--pad-i, props.get(core.$size--250)) !default;
-$pad-i-label--lg: props.def(--o-button--lg--pad-i-label, props.get(core.$size--100)) !default;
-$pad-b--lg:       props.def(--o-button--lg--pad-b, props.get(core.$size--100)) !default;
 $font-size--lg:   props.def(--o-button--lg--font-size, props.get(core.$font-size--150)) !default;
-$pad-i--xl:       props.def(--o-button--xl--pad-i, props.get(core.$size--300)) !default;
+$pad-i--xl:       props.def(--o-button--xl--pad-i, props.get(core.$size--200)) !default;
-$pad-i-label--xl: props.def(--o-button--xl--pad-i-label, props.get(core.$size--150)) !default;
+$pad-i-label--xl: props.def(--o-button--xl--pad-i-label, props.get(core.$size--85)) !default;
+$pad-i-wide--xl:  props.def(--o-button--xl--pad-i-wide, props.get(core.$size--400)) !default;
+$pad-i-pill--xl:  props.def(--o-button--xl--pad-i-pill, props.get(core.$size--225)) !default;
 $pad-b--xl:       props.def(--o-button--xl--pad-b, props.get(core.$size--150)) !default;
 $font-size--xl:   props.def(--o-button--xl--font-size, props.get(core.$font-size--200)) !default;
+$shadow-x:    props.def(--o-button--shadow-x, props.get(core.$shadow--l1--x)) !default;
+$shadow-y:    props.def(--o-button--shadow-y, props.get(core.$shadow--l1--y)) !default;
+$shadow-blur: props.def(--o-button--shadow-blur, props.get(core.$shadow--l1--blur)) !default;
+$shadow-grow: props.def(--o-button--shadow-grow, props.get(core.$shadow--l1--grow)) !default;
 $key-focus--border-width:  props.def(--o-button--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
 $key-focus--border-offset: props.def(--o-button--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
 $key-focus--outline-width: props.def(--o-button--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
-$sizes: (
+$fixed-sizes: (
-    'sm' $pad-i--sm $pad-i-label--sm $pad-b--sm $font-size--sm,
+        'xs' $pad-i--xs $pad-i-label--xs $pad-i-wide--xs $pad-i-pill--xs $pad-b--xs $font-size--xs,
-    'lg' $pad-i--lg $pad-i-label--lg $pad-b--lg $font-size--lg,
+        'sm' $pad-i--sm $pad-i-label--sm $pad-i-wide--sm $pad-i-pill--sm $pad-b--sm $font-size--sm,
-    'xl' $pad-i--xl $pad-i-label--xl $pad-b--xl $font-size--xl,
+        'lg' $pad-i--lg $pad-i-label--lg $pad-i-wide--lg $pad-i-pill--lg $pad-b--lg $font-size--lg,
+        'xl' $pad-i--xl $pad-i-label--xl $pad-i-wide--xl $pad-i-pill--xl $pad-b--xl $font-size--xl,
 ) !default;
+$themes: props.def(--o-button, (), 'color');
 $default-theme-override: () !default;
-$default-theme: props.def(--o-button, (
+$default-theme: map.deep-merge((
-    --bg:             props.get(core.$theme, --border-mute),
+        --bg-color:             props.get(core.$theme, --bg-l2),
-    --label:          props.get(core.$theme, --text),
+        --label-color:          props.get(core.$theme, --text),
-    --outline-border: props.get(core.$theme, --border),
+        --border-color:         props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border-strong),
-    --outline-label:  props.get(core.$theme, --text),
+        --shadow-color:         props.get(core.$theme, --shadow),
+        --hover: (
+                --bg-color:     props.get(core.$theme, --bg-l1),
+                --label-color:  props.get(core.$theme, --heading),
+                --border-color: props.get(core.$theme, --border),
+        ),
+        --active: (
+                --bg-color:     props.get(core.$theme, --border-mute),
+                --label-color:  props.get(core.$theme, --heading),
+                --border-color: props.get(core.$theme, --border-strong),
+        ),
+        --disabled: (
+                --bg-color:     transparent,
+                --label-color:  props.get(core.$theme, --border-strong),
+                --border-color: props.get(core.$theme, --text-disabled),
+        ),
+        --key-focus: (
+                --border-color:  props.get(core.$theme, --focus, --border),
+                --outline-color: props.get(core.$theme, --focus, --outline),
+        ),
+        --highlighted: (
+                --border-color: props.get(core.$theme, --focus, --border),
+                --shadow-color: props.get(core.$theme, --focus, --outline),
+        ),
+        --selected: (
+                --bg-color:     props.get(core.$theme, --text),
+                --label-color:  props.get(core.$theme, --base, --50),
+                --border-color: props.get(core.$theme, --text) props.get(core.$theme, --text) props.get(core.$theme, --heading),
+                --hover: (
+                        --bg-color:     props.get(core.$theme, --heading),
+                        --label-color:  props.get(core.$theme, --base, --50),
+                        --border-color: props.get(core.$theme, --heading),
+                ),
+                --active: (
+                        --bg-color:     props.get(core.$theme, --heading),
+                        --label-color:  props.get(core.$theme, --base, --50),
+                        --border-color: props.get(core.$theme, --heading),
+                ),
+                --disabled: (
+                        --bg-color:     props.get(core.$theme, --border-mute),
+                        --label-color:  props.get(core.$theme, --border-strong),
+                        --border-color: props.get(core.$theme, --border-mute),
+                ),
+        ),
+        --badge: (
+                --bg-color:     props.get(core.$theme, --border-mute),
+                --label-color:  props.get(core.$theme, --heading),
+                --border-color: props.get(core.$theme, --border-mute),
+                --hover: (
+                        --bg-color:     props.get(core.$theme, --border),
+                        --label-color:  props.get(core.$theme, --heading),
+                        --border-color: props.get(core.$theme, --border),
+                ),
-    --hover: (
+                --active: (
-        --bg:     props.get(core.$theme, --border),
+                        --bg-color:     props.get(core.$theme, --border-strong),
-        --label:  props.get(core.$theme, --heading),
+                        --label-color:  props.get(core.$theme, --heading),
-    ),
+                        --border-color: props.get(core.$theme, --border-strong),
+                ),
+        ),
-    --active: (
+        --quiet: (
-        --bg:     props.get(core.$theme, --border-strong),
+                --label-color:  props.get(core.$theme, --text),
-        --label:  props.get(core.$theme, --heading),
-    ),
-    --disabled: (
+                --hover: (
-        --bg:             props.get(core.$theme, --border-mute),
+                        --bg-color:    props.get(core.$theme, --border-mute),
-        --outline-border: props.get(core.$theme, --border),
+                        --label-color: props.get(core.$theme, --heading),
-        --label:          props.get(core.$theme, --text-disabled),
+                ),
-    ),
-    --key-focus: (
+                --active: (
-        --label:   props.get(core.$theme, --focus, --text),
+                        --bg-color:    props.get(core.$theme, --border),
-        --border:  props.get(core.$theme, --focus, --border),
+                        --label-color: props.get(core.$theme, --heading),
-        --outline: props.get(core.$theme, --focus, --outline),
+                ),
-    ),
-    --primary: (
+                --disabled: (
-        --bg:             props.get(core.$theme, --base, --800),
+                        --label-color: props.get(core.$theme, --border-strong),
-        --label:          props.get(core.$theme, --base, --800-text),
+                ),
-        --outline-border: props.get(core.$theme, --base, --800),
+        ),
-        --outline-label:  props.get(core.$theme, --text),
+), $default-theme-override) !default;
+$default-theme: props.def(--o-button, $default-theme, 'color');
-        --hover: (
+$default-theme-dark-override: () !default;
-            --bg:     props.get(core.$theme, --base, --900),
+$default-theme-dark: map.deep-merge((
-            --label:  props.get(core.$theme, --base, --900-text),
+        --bg-color:             props.get(core.$theme, --border-mute),
-        ),
+        --border-color:         props.get(core.$theme, --border-mute),
-        --active: (
+        --hover: (
-            --bg:     props.get(core.$theme, --base, --900),
+                --bg-color:     props.get(core.$theme, --border),
-            --label:  props.get(core.$theme, --base, --900-text),
+                --border-color: props.get(core.$theme, --border),
-        ),
+        ),
-    ),
-), 'color');
-$default-theme: props.merge($default-theme, $default-theme-override);
-$static-themes: props.def(--o-button, (), 'color');
+        --active: (
+                --bg-color:     props.get(core.$theme, --border-strong),
+                --border-color: props.get(core.$theme, --border-strong),
+        ),
+        --selected: (
+                --border-color: props.get(core.$theme, --text),
+        ),
+), $default-theme-override) !default;
+$default-theme-dark: props.def(--o-button, $default-theme-dark, 'dark');
 @each $theme in map.keys(props.get(core.$transparent-colors)) {
-    $button-theme: --static-#{string.slice($theme, 3)};
+        $button-theme: --static-#{string.slice($theme, 3)};
+        $themes: props.merge($themes, (
+                $button-theme: (
+                        --bg-color:     props.get(core.$transparent-colors, $theme, --200),
+                        --label-color:  props.get(core.$transparent-colors, $theme, --900),
+                        --border-color: props.get(core.$transparent-colors, $theme, --300) props.get(core.$transparent-colors, $theme, --300) props.get(core.$transparent-colors, $theme, --400),
+                        --shadow-color: props.get(core.$transparent-colors, --black, --200),
+                        --hover: (
+                                --bg-color:     props.get(core.$transparent-colors, $theme, --300),
+                                --label-color:  props.get(core.$transparent-colors, $theme, --900),
+                                --border-color: props.get(core.$transparent-colors, $theme, --400),
+                        ),
+                        --active: (
+                                --bg-color:     props.get(core.$transparent-colors, $theme, --400),
+                                --label-color:  props.get(core.$transparent-colors, $theme, --900),
+                                --border-color: props.get(core.$transparent-colors, $theme, --500),
+                        ),
+                        --disabled: (
+                                --bg-color:     props.get(core.$transparent-colors, $theme, --100),
+                                --label-color:  props.get(core.$transparent-colors, $theme, --500),
+                                --border-color: props.get(core.$transparent-colors, $theme, --300),
+                        ),
-    $static-themes: props.merge($static-themes, (
+                        --key-focus: (
-        $button-theme: (
+                                --border-color:  props.get(core.$transparent-colors, $theme, --900),
-            --bg:             props.get(core.$transparent-colors, $theme, --200),
+                                --outline-color: props.get(core.$transparent-colors, $theme, --300),
-            --label:          props.get(core.$transparent-colors, $theme, --900),
+                        ),
-            --outline-border: props.get(core.$transparent-colors, $theme, --300),
-            --outline-label:  props.get(core.$transparent-colors, $theme, --900),
-            --hover: (
+                        --highlighted: (
-                --bg:     props.get(core.$transparent-colors, $theme, --300),
+                                --border-color: props.get(core.$transparent-colors, $theme, --900),
-                --label:  props.get(core.$transparent-colors, $theme, --900),
+                                --shadow-color: props.get(core.$transparent-colors, --black, --200),
-            ),
+                        ),
-            --active: (
+                        --selected: (
-                --bg:     props.get(core.$transparent-colors, $theme, --400),
+                                --bg-color:     props.get(core.$transparent-colors, $theme, --900),
-                --label:  props.get(core.$transparent-colors, $theme, --900),
+                                --label-color:  props.get(core.$transparent-colors, $theme, --text),
-            ),
+                                --border-color: props.get(core.$transparent-colors, $theme, --100) props.get(core.$transparent-colors, $theme, --100) props.get(core.$transparent-colors, $theme, --200),
-            --disabled: (
+                                --hover: (
-                --bg:             props.get(core.$transparent-colors, $theme, --200),
+                                        --bg-color:     props.get(core.$transparent-colors, $theme, --800),
-                --outline-border: props.get(core.$transparent-colors, $theme, --300),
+                                        --label-color:  props.get(core.$transparent-colors, $theme, --text),
-                --label:          props.get(core.$transparent-colors, $theme, --500),
+                                        --border-color: props.get(core.$transparent-colors, $theme, --100),
-            ),
+                                ),
-            --key-focus: (
+                                --active: (
-                --bg:      props.get(core.$transparent-colors, $theme, --100),
+                                        --bg-color:     props.get(core.$transparent-colors, $theme, --800),
-                --label:   props.get(core.$transparent-colors, $theme, --900),
+                                        --label-color:  props.get(core.$transparent-colors, $theme, --text),
-                --border:  props.get(core.$transparent-colors, $theme, --900),
+                                        --border-color: props.get(core.$transparent-colors, $theme, --100),
-                --outline: props.get(core.$transparent-colors, $theme, --300),
+                                ),
-            ),
-            --primary: (
+                                --disabled: (
-                --bg:             props.get(core.$transparent-colors, $theme, --800),
+                                        --bg-color:     props.get(core.$transparent-colors, $theme, --200),
-                --label:          props.get(core.$transparent-colors, $theme, --text),
+                                        --label-color:  props.get(core.$transparent-colors, $theme, --500),
-                --outline-border: props.get(core.$transparent-colors, $theme, --800),
+                                        --border-color: props.get(core.$transparent-colors, $theme, --100),
-                --outline-label:  props.get(core.$transparent-colors, $theme, --900),
+                                ),
-    
+                        ),
-                --hover: (
-                    --bg:     props.get(core.$transparent-colors, $theme, --900),
-                    --label:  props.get(core.$transparent-colors, $theme, --text),
-                ),
-                --active: (
+                        --badge: (
-                    --bg:     props.get(core.$transparent-colors, $theme, --900),
+                                --bg-color:     props.get(core.$transparent-colors, $theme, --200),
-                    --label:  props.get(core.$transparent-colors, $theme, --text),
+                                --label-color:  props.get(core.$transparent-colors, $theme, --900),
-                ),
+                                --border-color: transparent,
-            )
+        
-        )
+                                --hover: (
-    ));
+                                        --bg-color:     props.get(core.$transparent-colors, $theme, --300),
+                                        --label-color:  props.get(core.$transparent-colors, $theme, --900),
+                                        --border-color: transparent,
+                                ),
+        
+                                --active: (
+                                        --bg-color:     props.get(core.$transparent-colors, $theme, --400),
+                                        --label-color:  props.get(core.$transparent-colors, $theme, --900),
+                                        --border-color: transparent,
+                                ),
+                        ),
+                        --quiet: (
+                                --label-color:  props.get(core.$transparent-colors, $theme, --900),
+        
+                                --hover: (
+                                        --bg-color:    props.get(core.$transparent-colors, $theme, --200),
+                                        --label-color: props.get(core.$transparent-colors, $theme, --900),
+                                ),
+        
+                                --active: (
+                                        --bg-color:    props.get(core.$transparent-colors, $theme, --300),
+                                        --label-color: props.get(core.$transparent-colors, $theme, --900),
+                                ),
+        
+                                --disabled: (
+                                        --label-color: props.get(core.$transparent-colors, $theme, --500),
+                                ),
+                        ),
+                )
+        ));
 }
 $themes-config: (
-    accent:   --accent,
+        accent:   --accent,
-    negative: --negative,
+        positive: --positive,
+        negative: --negative,
+        warning:  --warning,
 ) !default;
-$themes: props.def(--o-button, (), 'color');
 @each $theme, $key in $themes-config {
-    $themes: props.merge($themes, (
+        $themes: props.merge($themes, (
-        --#{$theme}: (
+                --#{$theme}: (
-            --bg:             props.get(core.$theme, #{$key}-static, --900),
+                        --bg-color:     props.get(core.$theme, $key, --100),
-            --label:          props.get(core.$theme, #{$key}-static, --900-text),
+                        --label-color:  props.get(core.$theme, $key, --1100),
-            --outline-border: props.get(core.$theme, $key, --900),
+                        --border-color: props.get(core.$theme, $key, --500) props.get(core.$theme, $key, --500) props.get(core.$theme, $key, --600),
-            --outline-label:  props.get(core.$theme, $key, --1000),
+                        --shadow-color: props.get(core.$theme, $key, --200),
+                        --hover: (
+                                --bg-color:     props.get(core.$theme, $key, --200),
+                                --label-color:  props.get(core.$theme, $key, --1200),
+                                --border-color: props.get(core.$theme, $key, --600),
+                        ),
+                        --active: (
+                                --bg-color:     props.get(core.$theme, $key, --300),
+                                --label-color:  props.get(core.$theme, $key, --1300),
+                                --border-color: props.get(core.$theme, $key, --800),
+                        ),
+                        --disabled: (
+                                --bg-color:     props.get(core.$theme, --bg-l1),
+                                --label-color:  props.get(core.$theme, --border-strong),
+                                --border-color: props.get(core.$theme, --border),
+                        ),
+                        --key-focus: (
+                                --border-color:  props.get(core.$theme, --focus, --border),
+                                --outline-color: props.get(core.$theme, --focus, --outline),
+                        ),
+                        --highlighted: (
+                                --border-color: props.get(core.$theme, $key, --900),
+                                --shadow-color: props.get(core.$theme, $key, --200),
+                        ),
+                        --selected: (
+                                --bg-color:     props.get(core.$theme, #{$key}-static, --900),
+                                --label-color:  props.get(core.$theme, #{$key}-static, --900-text),
+                                --border-color: props.get(core.$theme, #{$key}-static, --900) props.get(core.$theme, #{$key}-static, --900) props.get(core.$theme, #{$key}-static, --1000),
+                                --hover: (
+                                        --bg-color:     props.get(core.$theme, #{$key}-static, --1000),
+                                        --label-color:  props.get(core.$theme, #{$key}-static, --1000-text),
+                                        --border-color: props.get(core.$theme, #{$key}-static, --1000),
+                                ),
+                                --active: (
+                                        --bg-color:     props.get(core.$theme, #{$key}-static, --1100),
+                                        --label-color:  props.get(core.$theme, #{$key}-static, --1100-text),
+                                        --border-color: props.get(core.$theme, #{$key}-static, --1100),
+                                ),
+                                --disabled: (
+                                        --bg-color:     props.get(core.$theme, --border-mute),
+                                        --label-color:  props.get(core.$theme, --border-strong),
+                                        --border-color: props.get(core.$theme, --border-mute),
+                                ),
+                        ),
-            --hover: (
+                        --badge: (
-                --bg:     props.get(core.$theme, #{$key}-static, --1000),
+                                --bg-color:     props.get(core.$theme, $key, --100),
-                --label:  props.get(core.$theme, #{$key}-static, --1000-text),
+                                --label-color:  props.get(core.$theme, $key, --1100),
-            ),
+                                --border-color: props.get(core.$theme, $key, --300),
+        
+                                --hover: (
+                                        --bg-color:     props.get(core.$theme, $key, --200),
+                                        --label-color:  props.get(core.$theme, $key, --1200),
+                                        --border-color: props.get(core.$theme, $key, --400),
+                                ),
+        
+                                --active: (
+                                        --bg-color:     props.get(core.$theme, $key, --300),
+                                        --label-color:  props.get(core.$theme, $key, --1300),
+                                        --border-color: props.get(core.$theme, $key, --500),
+                                ),
+                        ),
-            --active: (
+                        --quiet: (
-                --bg:     props.get(core.$theme, #{$key}-static, --1100),
+                                --label-color:  props.get(core.$theme, $key, --1100),
-                --label:  props.get(core.$theme, #{$key}-static, --1100-text),
+        
-            ),
+                                --hover: (
-        )
+                                        --bg-color:    props.get(core.$theme, $key, --200),
-    ));
+                                        --label-color: props.get(core.$theme, $key, --1200),
+                                ),
+        
+                                --active: (
+                                        --bg-color:    props.get(core.$theme, $key, --300),
+                                        --label-color: props.get(core.$theme, $key, --1300),
+                                ),
+        
+                                --disabled: (
+                                        --label-color: props.get(core.$theme, --border-strong),
+                                ),
+                        ),
+                )
+        ));
 }
diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index 99eb6f4..5ae203d 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -8,193 +8,276 @@
 @use 'card.vars' as vars;
 @mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables('vars'));
-    @include bem.object('card') {
+        @include bem.object('card') {
-        position:         relative;
+                position:         relative;
-        display:          flex;
+                display:          flex;
-        flex-direction:   column;
+                flex-direction:   column;
-        margin:           calc(-1 * props.get(vars.$key-focus--border-width));
+                background-color: props.get(vars.$bg-color);
-        background-color: props.get(vars.$bg-color);
+                border:           props.get(vars.$border-width) solid transparent;
-        background-clip:  content-box;
+                border-color:     props.get(vars.$border-color);
-        border:           props.get(vars.$key-focus--border-offset) solid transparent;
+                border-radius:    props.get(vars.$rounding);
-        border-radius:    calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
+                transition:       transform .2s, background-color .2s, border-color .2s, box-shadow .2s;
-        transition:       transform .2s;
-        @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
+                @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
-            &:hover,
+                        &:hover,
-            &:active,
+                        &:active,
-            &:focus-visible {
+                        &:focus-visible {
-                transform: translateY(props.get(vars.$hover--offset-b));
+                                background-color: props.get(vars.$hover--bg-color);
+                                border-color:     props.get(vars.$hover--border-color);
+                                box-shadow:       none;
+                                transform:        translateY(props.get(vars.$hover--offset-b));
+                        }
-                @include bem.elem('body') {
+                        &:focus-visible {
-                    @include bem.modifier('hidden') {
+                                margin:        calc(-1 * props.get(vars.$key-focus--border-width));
-                        visibility: visible;
+                                outline:       props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
-                        opacity:    1;
+                                border:        calc(props.get(vars.$key-focus--border-offset) + props.get(vars.$border-width)) solid transparent;
-                        transition:
+                                border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
-                            opacity .2s ease,
+                                box-shadow:
-                            visibility .2s linear;
+                                        0 0 0
-                    }
+                                        calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
-                }
+                                        props.get(vars.$key-focus--outline-color);
-            }
+                                transition:    transform .2s;
+                        }
+                }
-            &:focus-visible {
+                @include bem.modifier('borderless') {
-                outline:      props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
+                        border-color: props.get(vars.$bg-color);
-                box-shadow:
+                }
-                    0
-                    0
-                    0
-                    calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
-                    props.get(vars.$key-focus--outline-color);
-            }
-        }
-        @include bem.elem('avatar') {
+                @include bem.modifier('shadow') {
-            margin-block-start:  props.get(vars.$pad-b);
+                        box-shadow:
-            margin-inline-start: props.get(vars.$pad-i);
+                                props.get(vars.$shadow-x)
-        }
+                                props.get(vars.$shadow-y)
+                                props.get(vars.$shadow-blur)
+                                props.get(vars.$shadow-grow)
+                                props.get(vars.$shadow-color);
-        @include bem.elem('image') {
+                        @include bem.modifier('quiet') {
-            display:     block;
+                                @include bem.elem('image') {
-            flex:        0 0 auto;
+                                        box-shadow:
-            inline-size: 100%;
+                                                props.get(vars.$shadow-x)
-            object-fit:  cover;
+                                                props.get(vars.$shadow-y)
-            transition:  transform .2s, opacity .2s;
+                                                props.get(vars.$shadow-blur)
+                                                props.get(vars.$shadow-grow)
+                                                props.get(vars.$shadow-color);
+                                }
+                        }
+                }
-            &:first-child {
+                @include bem.elem('avatar') {
-                border-start-start-radius: props.get(vars.$rounding);
+                        margin-block-start:  props.get(vars.$pad-b);
-                border-start-end-radius:   props.get(vars.$rounding);
+                        margin-inline-start: props.get(vars.$pad-i);
-            }
+                }
-            &:last-child {
+                @include bem.elem('image') {
-                border-end-start-radius: props.get(vars.$rounding);
+                        position:      relative;
-                border-end-end-radius:   props.get(vars.$rounding);
+                        display:       block;
-            }
+                        flex:          0 0 auto;
+                        inline-size:   calc(100% + 2 * props.get(vars.$border-width));
+                        margin:        calc(-1 * props.get(vars.$border-width));
+                        overflow:      hidden;
+                        object-fit:    cover;
+                        transition:    background-color .2s, transform .2s, opacity .2s;
-            @include bem.next-elem('avatar') {
+                        &:first-child {
-                margin-block-start: calc(-.7 * props.get(avatar.$size--xl));
+                                border-start-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
-            }
+                                border-start-end-radius:   calc(props.get(vars.$rounding) - props.get(vars.$border-width));
-        }
+                        }
-        @include bem.elem('body') {
+                        &:last-child {
-            flex:            1 0 auto;
+                                border-end-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
-            padding-block:   props.get(vars.$pad-b);
+                                border-end-end-radius:   calc(props.get(vars.$rounding) - props.get(vars.$border-width));
-            padding-inline:  props.get(vars.$pad-i);
+                        }
-            &::before {
+                        @include bem.next-elem('avatar') {
-                display:       block;
+                                margin-block-start: calc(-.7 * props.get(avatar.$size--xl));
-                margin-block:  -100em 100em;
+                        }
-                content:       '';
+                }
-            }
-            @include bem.modifier('hidden') {
+                @include bem.elem('image-img') {
-                position:                absolute;
+                        display:     block;
-                inset-block-end:         0;
+                        inline-size: 100%;
-                inset-inline:            0;
+                        object-fit:  cover;
-                z-index:                 10;
+                }
-                visibility:              hidden;
-                background-color:        props.get(vars.$bg-color);
-                //border-end-start-radius: props.get(vars.$rounding);
-                //border-end-end-radius:   props.get(vars.$rounding);
-                opacity:                 0;
-                transition:
-                    opacity .2s ease,
-                    visibility 0s .2s linear;
-                @include bem.next-elem('image') {
+                @include bem.elem('image-overlay') {
-                    border-start-start-radius: props.get(vars.$rounding);
+                        position:        absolute;
-                    border-start-end-radius:   props.get(vars.$rounding);
+                        inset-block-end: 0;
-                }
+                        inset-inline:    0;
-            }
+                        z-index:         5;
-        }
+                        padding-block:   props.get(vars.$image-overlay--pad-b);
+                        padding-inline:  props.get(vars.$image-overlay--pad-i);
+                }
-        @include bem.elem('content') {
+                @include bem.elem('body') {
-            margin-block-start: props.get(vars.$spacing);
+                        flex:            1 0 auto;
-        }
+                        padding-block:   props.get(vars.$pad-b);
+                        padding-inline:  props.get(vars.$pad-i);
-        @include bem.elem('footer') {
+                        &::before {
-            flex:               0 0 auto;
+                                display:       block;
-            padding-block:      0 props.get(vars.$pad-b);
+                                margin-block:  -100em 100em;
-            padding-inline:     props.get(vars.$pad-i);
+                                content:       '';
-            margin-block-start: calc(-1 * props.get(vars.$pad-b));
+                        }
-            &::before {
+                        @include bem.modifier('no-mbs-neutralize') {
-                display:          block;
+                                &::before {
-                block-size:       props.get(vars.$divider-width);
+                                        display: none;
-                margin-block:     props.get(vars.$spacing);
+                                }
-                content:          '';
+                        }
-                background-color: props.get(vars.$divider-width);
+                }
-            }
-        }
-        @include bem.modifier('quiet') {
+                @include bem.elem('content') {
-            position:         relative;
+                        margin-block-start: props.get(vars.$spacing);
-            background-color: transparent;
+                }
-            border:           0;
-            @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
+                @include bem.elem('footer') {
-                &:hover,
+                        flex:               0 0 auto;
-                &:active,
+                        padding-block:      0 props.get(vars.$pad-b);
-                &:focus-visible {
+                        padding-inline:     props.get(vars.$pad-i);
-                    transform: none;
+                        margin-block-start: calc(-1 * props.get(vars.$pad-b));
-                    @include bem.elem('image') {
+                        &::before {
-                        background-color: props.get(vars.$quiet--hover--image-color);
+                                display:          block;
-                        opacity:          .75;
+                                block-size:       props.get(vars.$divider-width);
-                        transform:        translateY(props.get(vars.$hover--offset-b));
+                                margin-block:     props.get(vars.$spacing);
-                    }
+                                content:          '';
-                }
+                                background-color: props.get(vars.$divider-width);
+                        }
+                }
-                &:focus-visible {
+                @include bem.modifier('quiet') {
-                    outline:    none;
+                        margin-inline:    0;
-                    box-shadow: none;
+                        background-color: transparent;
+                        border:           0;
+                        box-shadow:       none;
-                    @include bem.elem('image') {
+                        @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
-                        background-color: props.get(vars.$quiet--hover--image-color);
+                                &:hover,
-                        outline:          props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
+                                &:active,
-                        box-shadow:
+                                &:focus-visible {
-                            0
+                                        background-color: transparent;
-                            0
+                                        transform:        none;
-                            0
-                            calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
-                            props.get(vars.$key-focus--outline-color);
-                        opacity:          1;
-                    }
-                }
-            }
-            @include bem.elem('image') {
+                                        @include bem.elem('image') {
-                position:         relative;
+                                                background-color: props.get(vars.$quiet--hover--image-color);
-                margin:           calc(-1 * props.get(vars.$key-focus--border-width));
+                                                opacity:          .75;
-                background-color: props.get(vars.$quiet--image-color);
+                                                transform:        translateY(props.get(vars.$hover--offset-b));
-                background-clip:  padding-box;
+                                        }
-                border:           props.get(vars.$key-focus--border-offset) solid transparent;
+                                }
-                border-radius:    calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
-            }
-            @include bem.elem('body') {
+                                &:focus-visible {
-                padding:             0;
+                                        margin:     0;
-                padding-block-start: props.get(vars.$spacing);
+                                        outline:    none;
-            }
+                                        border:     0;
+                                        box-shadow: none;
-            @include bem.elem('footer') {
+                                        @include bem.elem('image') {
-                padding-inline: 0;
+                                                margin:           calc(-1 * props.get(vars.$key-focus--border-width));
-            }
+                                                outline:          props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
-        }
+                                                background-color: props.get(vars.$quiet--hover--image-color);
+                                                border:           props.get(vars.$key-focus--border-offset) solid transparent;
+                                                border-radius:    calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
+                                                box-shadow:
+                                                        0
+                                                        0
+                                                        0
+                                                        calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
+                                                        props.get(vars.$key-focus--outline-color);
+                                                opacity:          1;
+                                        }
+                                }
+                        }
-        @include bem.modifier('horizontal') {
+                        @include bem.elem('image') {
-            flex-direction: row;
+                                position:         relative;
-            align-items:    center;
+                                background-color: props.get(vars.$quiet--image-color);
+                                background-clip:  padding-box;
+                                border-radius:    props.get(vars.$rounding);
+                        }
-            @include bem.elem('body') {
+                        @include bem.elem('body') {
-                flex: 0 0 auto;
+                                padding:             0;
+                                padding-block-start: props.get(vars.$spacing);
+                        }
-                @include bem.modifier('main') {
+                        @include bem.elem('footer') {
-                    flex-shrink:     1;
+                                padding-inline: 0;
-                    inline-size:     100%;
+                        }
-                    min-inline-size: 0;
+                }
-                }
-            }
+                @include bem.modifier('thumbnail') {
-        }
+                        @include bem.elem('image') {
-    }
+                                border-radius: props.get(vars.$rounding);
+                        }
+                        @include bem.elem('body') {
+                                position:                absolute;
+                                inset-block-end:         calc(-1 * props.get(vars.$border-width));
+                                inset-inline:            calc(-1 * props.get(vars.$border-width));
+                                z-index:                 10;
+                                visibility:              hidden;
+                                background-color:        props.get(vars.$hover--bg-color);
+                                border-color:            transparent;
+                                border-style:            solid;
+                                border-width:            0 props.get(vars.$border-width) props.get(vars.$border-width);
+                                border-end-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
+                                border-end-end-radius:   calc(props.get(vars.$rounding) - props.get(vars.$border-width));
+                                opacity:                 0;
+                                transition:
+                                        border-color .2s ease,
+                                        opacity .2s ease,
+                                        visibility 0s .2s linear;
+                        }
+                        @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
+                                &:hover,
+                                &:active,
+                                &:focus-visible {
+                                        @include bem.elem('body') {
+                                                visibility:   visible;
+                                                border-color: props.get(vars.$hover--border-color);
+                                                opacity:      1;
+                                                transition:
+                                                        border-color .2s ease,
+                                                        opacity .2s ease,
+                                                        visibility .2s linear;
+                                        }
+                                }
+                        }
+                }
+                @include bem.modifier('horizontal') {
+                        flex-direction: row;
+                        align-items:    center;
+                        @include bem.elem('image') {
+                                align-self:  stretch;
+                                inline-size: auto;
+                                &:first-child {
+                                        border-start-end-radius:   0;
+                                        border-end-start-radius:   props.get(vars.$rounding);
+                                }
+    
+                                &:last-child {
+                                        border-start-end-radius: props.get(vars.$rounding);
+                                        border-end-start-radius: 0;
+                                }
+                        }
+                        @include bem.elem('body') {
+                                flex: 0 0 auto;
+                                @include bem.modifier('main') {
+                                        flex-shrink:     1;
+                                        inline-size:     100%;
+                                        min-inline-size: 0;
+                                }
+                        }
+                }
+        }
 }
diff --git a/src/objects/_card.vars.scss b/src/objects/_card.vars.scss
index 8ee7158..1e6448a 100644
--- a/src/objects/_card.vars.scss
+++ b/src/objects/_card.vars.scss
@@ -2,24 +2,41 @@
 @use 'iro-sass/src/props';
 @use '../core.vars' as core;
-$divider-width: props.def(--o-card--divider-width, props.get(core.$border-width--thin)) !default;
+$divider-width:        props.def(--o-card--divider-width, props.get(core.$border-width--thin)) !default;
-$pad-i:         props.def(--o-card--pad-i, props.get(core.$size--300)) !default;
+$border-width:         props.def(--o-card--border-width, props.get(core.$border-width--thin)) !default;
-$pad-b:         props.def(--o-card--pad-b, props.get(core.$size--250)) !default;
+$sub-border-width:     props.def(--o-card--sub-border-width, props.get(core.$border-width--thick)) !default;
-$spacing:       props.def(--o-card--spacing, props.get(core.$size--200)) !default;
+$pad-i:                props.def(--o-card--pad-i, props.get(core.$size--300)) !default;
-$rounding:      props.def(--o-card--rounding, props.get(core.$rounding)) !default;
+$pad-b:                props.def(--o-card--pad-b, props.get(core.$size--250)) !default;
+$spacing:              props.def(--o-card--spacing, props.get(core.$size--200)) !default;
+$rounding:             props.def(--o-card--rounding, props.get(core.$rounding)) !default;
+$image-overlay--pad-i: props.def(--o-card--image-overlay--pad-i, props.get($pad-i)) !default;
+$image-overlay--pad-b: props.def(--o-card--image-overlay--pad-b, props.get($pad-b)) !default;
 $hover--offset-b: props.def(--o-card--hover--offset-b, calc(-1 * props.get(core.$size--65))) !default;
+$shadow-x:    props.def(--o-card--shadow-x, props.get(core.$shadow--l1--x)) !default;
+$shadow-y:    props.def(--o-card--shadow-y, props.get(core.$shadow--l1--y)) !default;
+$shadow-blur: props.def(--o-card--shadow-blur, props.get(core.$shadow--l1--blur)) !default;
+$shadow-grow: props.def(--o-card--shadow-grow, props.get(core.$shadow--l1--grow)) !default;
 $key-focus--border-width:  props.def(--o-card--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
 $key-focus--border-offset: props.def(--o-card--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
 $key-focus--outline-width: props.def(--o-card--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
+$shadow-color:  props.def(--o-card--shadow-color, props.get(core.$theme, --shadow), 'color') !default;
 $bg-color:      props.def(--o-card--bg-color, props.get(core.$theme, --bg-l2), 'color') !default;
+$border-color:  props.def(--o-card--border-color, props.get(core.$theme, --box, --border), 'color') !default;
 $divider-color: props.def(--o-card--divider-color, props.get(core.$theme, --border-mute), 'color') !default;
+$hover--bg-color:         props.def(--o-card--hover--bg-color, color-mix(in lch, props.get($bg-color), props.get(core.$theme, --border-mute)), 'color') !default;
+$hover--border-color:     props.def(--o-card--hover--border-color, props.get(core.$theme, --border), 'color') !default;
 $key-focus--label-color:   props.def(--o-card--key-focus--label-color, props.get(core.$theme, --focus, --text), 'color') !default;
 $key-focus--border-color:  props.def(--o-card--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
 $key-focus--outline-color: props.def(--o-card--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default;
 $quiet--image-color:        props.def(--o-card--quiet--image-color, props.get(core.$theme, --bg-base), 'color') !default;
 $quiet--hover--image-color: props.def(--o-card--quiet--hover--image-color, props.get(core.$theme, --border), 'color') !default;
+$pad-i--sm: props.def(--o-card--pad-i, props.get(core.$size--200), 'sm') !default;
+$pad-b--sm: props.def(--o-card--pad-b, props.get(core.$size--175), 'sm') !default;
diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss
index 82dd596..5faafb9 100644
--- a/src/objects/_checkbox.scss
+++ b/src/objects/_checkbox.scss
@@ -9,223 +9,223 @@
 @use 'checkbox.vars' as vars;
 @mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables('vars'));
-    @include bem.object('checkbox') {
+        @include bem.object('checkbox') {
-        position:       relative;
+                position:       relative;
-        display:        inline-block;
+                display:        inline-block;
-        padding-block:  props.get(vars.$pad-b);
+                padding-block:  props.get(vars.$pad-b);
-        padding-inline: props.get(vars.$pad-i);
+                padding-inline: props.get(vars.$pad-i);
-        margin-inline:
+                margin-inline:
-            calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset))
+                        calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset))
-            calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-b) - props.get(vars.$key-focus--border-offset));
+                        calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-b) - props.get(vars.$key-focus--border-offset));
-        @include bem.elem('box') {
+                @include bem.elem('box') {
-            position:           relative;
+                        position:           relative;
-            display:            inline-block;
+                        display:            inline-block;
-            flex:               0 0 auto;
+                        flex:               0 0 auto;
-            inline-size:        props.get(vars.$size);
+                        inline-size:        props.get(vars.$size);
-            block-size:         props.get(vars.$size);
+                        block-size:         props.get(vars.$size);
-            margin-block-start: calc(.5em * props.get(core.$font--standard--line-height) - .5 * props.get(vars.$size) - props.get(vars.$key-focus--border-offset));
+                        margin-block-start: calc(.5em * props.get(core.$font--standard--line-height) - .5 * props.get(vars.$size) - props.get(vars.$key-focus--border-offset));
-            vertical-align:     top;
+                        vertical-align:     top;
-            background-color:   props.get(vars.$box-border-color);
+                        background-color:   props.get(vars.$box-border-color);
-            background-clip:    padding-box;
+                        background-clip:    padding-box;
-            border:             props.get(vars.$key-focus--border-offset) solid transparent;
+                        border:             props.get(vars.$key-focus--border-offset) solid transparent;
-            border-radius:      calc(props.get(vars.$border-width) + props.get(vars.$key-focus--border-offset));
+                        border-radius:      calc(props.get(vars.$border-width) + props.get(vars.$key-focus--border-offset));
    
-            &::before,
+                        &::before,
-            &::after {
+                        &::after {
-                position: absolute;
+                                position: absolute;
-                display:  block;
+                                display:  block;
-                content:  '';
+                                content:  '';
-            }
+                        }
    
-            &::before {
+                        &::before {
-                inset-block-start:  props.get(vars.$border-width);
+                                inset-block-start:  props.get(vars.$border-width);
-                inset-inline-start: props.get(vars.$border-width);
+                                inset-inline-start: props.get(vars.$border-width);
-                z-index:            2;
+                                z-index:            2;
-                inline-size:        calc(props.get(vars.$size) - 2 * props.get(vars.$border-width));
+                                inline-size:        calc(props.get(vars.$size) - 2 * props.get(vars.$border-width));
-                block-size:         calc(props.get(vars.$size) - 2 * props.get(vars.$border-width));
+                                block-size:         calc(props.get(vars.$size) - 2 * props.get(vars.$border-width));
-                background-color:   props.get(vars.$box-bg-color);
+                                background-color:   props.get(vars.$box-bg-color);
-                transition:         transform .2s ease;
+                                transition:         transform .2s ease;
-            }
+                        }
    
-            &::after {
+                        &::after {
-                inset-block-start:   calc(.5 * props.get(vars.$size) - 1px);
+                                inset-block-start:   calc(.5 * props.get(vars.$size) - 1px);
-                inset-inline-start:  calc(1.5 * props.get(vars.$border-width));
+                                inset-inline-start:  calc(1.5 * props.get(vars.$border-width));
-                z-index:             3;
+                                z-index:             3;
-                box-sizing:          border-box;
+                                box-sizing:          border-box;
-                inline-size:         calc(props.get(vars.$size) - 3 * props.get(vars.$border-width));
+                                inline-size:         calc(props.get(vars.$size) - 3 * props.get(vars.$border-width));
-                block-size:          0;
+                                block-size:          0;
-                border-color:        props.get(vars.$box-bg-color);
+                                border-color:        props.get(vars.$box-bg-color);
-                border-style:        solid;
+                                border-style:        solid;
-                border-radius:       2px;
+                                border-radius:       2px;
-                transition:          transform .2s ease;
+                                transform:           scale(0);
-                transform:           scale(0);
+                                transition:          transform .2s ease;
-                border-block-width:  0 2px;
+                                border-block-width:  0 2px;
-                border-inline-width: 0 2px;
+                                border-inline-width: 0 2px;
-            }
+                        }
-        }
+                }
    
-        @include bem.elem('check-icon') {
+                @include bem.elem('check-icon') {
-            position:           absolute;
+                        position:           absolute;
-            inset-block-start:  calc(1 * props.get(vars.$border-width));
+                        inset-block-start:  calc(1 * props.get(vars.$border-width));
-            inset-inline-start: calc(1 * props.get(vars.$border-width));
+                        inset-inline-start: calc(1 * props.get(vars.$border-width));
-            z-index:            2;
+                        z-index:            2;
-            display:            block;
+                        display:            block;
-            inline-size:        calc(100% - 2 * props.get(vars.$border-width));
+                        inline-size:        calc(100% - 2 * props.get(vars.$border-width));
-            block-size:         calc(100% - 2 * props.get(vars.$border-width));
+                        block-size:         calc(100% - 2 * props.get(vars.$border-width));
-            margin:             0;
+                        margin:             0;
-            color:              props.get(vars.$box-bg-color);
+                        color:              props.get(vars.$box-bg-color);
-            stroke-width:       fn.px-to-rem(3px);
+                        stroke-width:       fn.px-to-rem(3px);
-            transition:         transform .2s ease;
+                        transform:          scale(0);
-            transform:          scale(0);
+                        transform-origin:   40% 90%;
-            transform-origin:   40% 90%;
+                        transition:         transform .2s ease;
-        }
+                }
    
-        @include bem.elem('label') {
+                @include bem.elem('label') {
-            margin-inline-start: calc(props.get(vars.$label-gap) - props.get(vars.$key-focus--border-offset));
+                        margin-inline-start: calc(props.get(vars.$label-gap) - props.get(vars.$key-focus--border-offset));
-        }
+                }
    
-        @include bem.elem('native') {
+                @include bem.elem('native') {
-            position:           absolute;
+                        position:           absolute;
-            inset-block-start:  0;
+                        inset-block-start:  0;
-            inset-inline-start: 0;
+                        inset-inline-start: 0;
-            z-index:            -1;
+                        z-index:            -1;
-            inline-size:        100%;
+                        inline-size:        100%;
-            block-size:         100%;
+                        block-size:         100%;
-            padding:            0;
+                        padding:            0;
-            margin:             0;
+                        margin:             0;
-            overflow:           hidden;
+                        overflow:           hidden;
-            appearance:         none;
+                        appearance:         none;
-            border-radius:      props.get(vars.$rounding);
+                        border-radius:      props.get(vars.$rounding);
    
-            &:hover,
+                        &:hover,
-            &:focus-visible {
+                        &:focus-visible {
-                @include bem.sibling-elem('label') {
+                                @include bem.sibling-elem('label') {
-                    color: props.get(vars.$hover--label-color);
+                                        color: props.get(vars.$hover--label-color);
-                }
+                                }
    
-                @include bem.sibling-elem('box') {
+                                @include bem.sibling-elem('box') {
-                    background-color: props.get(vars.$hover--box-border-color);
+                                        background-color: props.get(vars.$hover--box-border-color);
-                }
+                                }
-            }
+                        }
    
-            &:checked {
+                        &:checked {
-                @include bem.sibling-elem('box') {
+                                @include bem.sibling-elem('box') {
-                    &::before {
+                                        &::before {
-                        transform: scale(0);
+                                                transform: scale(0);
-                    }
+                                        }
    
-                    @include bem.elem('check-icon') {
+                                        @include bem.elem('check-icon') {
-                        transform: scale(1);
+                                                transform: scale(1);
-                    }
+                                        }
-                }
+                                }
-            }
+                        }
    
-            &:indeterminate {
+                        &:indeterminate {
-                @include bem.sibling-elem('box') {
+                                @include bem.sibling-elem('box') {
-                    &::before {
+                                        &::before {
-                        transform: scale(0);
+                                                transform: scale(0);
-                    }
+                                        }
    
-                    &::after {
+                                        &::after {
-                        transform: scale(1);
+                                                transform: scale(1);
-                    }
+                                        }
    
-                    @include bem.elem('check-icon') {
+                                        @include bem.elem('check-icon') {
-                        transform: scale(0);
+                                                transform: scale(0);
-                    }
+                                        }
-                }
+                                }
-            }
+                        }
    
-            &:disabled {
+                        &:disabled {
-                @include bem.sibling-elem('label') {
+                                @include bem.sibling-elem('label') {
-                    color: props.get(vars.$disabled--label-color);
+                                        color: props.get(vars.$disabled--label-color);
-                }
+                                }
    
-                @include bem.sibling-elem('box') {
+                                @include bem.sibling-elem('box') {
-                    background-color: props.get(vars.$disabled--box-border-color);
+                                        background-color: props.get(vars.$disabled--box-border-color);
    
-                    &::before {
+                                        &::before {
-                        background-color: props.get(vars.$disabled--box-bg-color);
+                                                background-color: props.get(vars.$disabled--box-bg-color);
-                    }
+                                        }
-                }
+                                }
-            }
+                        }
    
-            &:focus-visible {
+                        &:focus-visible {
-                @include bem.sibling-elem('label') {
+                                @include bem.sibling-elem('label') {
-                    color: props.get(vars.$key-focus--label-color);
+                                        color: props.get(vars.$key-focus--label-color);
-                }
+                                }
-                @include bem.sibling-elem('box') {
+                                @include bem.sibling-elem('box') {
-                    outline:    props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
+                                        outline:    props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
-                    box-shadow:
+                                        box-shadow:
-                        0
+                                                0
-                        0
+                                                0
-                        0
+                                                0
-                        calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
+                                                calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
-                        props.get(vars.$key-focus--outline-color);
+                                                props.get(vars.$key-focus--outline-color);
-                }
+                                }
-            }
+                        }
-        }
+                }
    
-        @include bem.modifier('standalone') {
+                @include bem.modifier('standalone') {
-            @include bem.elem('box') {
+                        @include bem.elem('box') {
-                margin-block-start: 0;
+                                margin-block-start: 0;
-            }
+                        }
-        }
+                }
    
-        @include bem.modifier('accent') {
+                @include bem.modifier('accent') {
-            @include bem.elem('native') {
+                        @include bem.elem('native') {
-                &:checked {
+                                &:checked {
-                    @include bem.sibling-elem('box') {
+                                        @include bem.sibling-elem('box') {
-                        background-color: props.get(vars.$accent--box-border-color);
+                                                background-color: props.get(vars.$accent--box-border-color);
-                    }
+                                        }
        
-                    &:hover,
+                                        &:hover,
-                    &:focus-visible {
+                                        &:focus-visible {
-                        @include bem.sibling-elem('box') {
+                                                @include bem.sibling-elem('box') {
-                            background-color: props.get(vars.$accent--hover--box-border-color);
+                                                        background-color: props.get(vars.$accent--hover--box-border-color);
-                        }
+                                                }
-                    }
+                                        }
-                }
+                                }
    
-                &:indeterminate {
+                                &:indeterminate {
-                    @include bem.sibling-elem('box') {
+                                        @include bem.sibling-elem('box') {
-                        background-color: props.get(vars.$accent--box-border-color);
+                                                background-color: props.get(vars.$accent--box-border-color);
-                    }
+                                        }
        
-                    &:hover,
+                                        &:hover,
-                    &:focus-visible {
+                                        &:focus-visible {
-                        @include bem.sibling-elem('box') {
+                                                @include bem.sibling-elem('box') {
-                            background-color: props.get(vars.$accent--hover--box-border-color);
+                                                        background-color: props.get(vars.$accent--hover--box-border-color);
-                        }
+                                                }
-                    }
+                                        }
-                }
+                                }
    
-                &:disabled {
+                                &:disabled {
-                    @include bem.sibling-elem('box') {
+                                        @include bem.sibling-elem('box') {
-                        background-color: props.get(vars.$disabled--box-border-color);
+                                                background-color: props.get(vars.$disabled--box-border-color);
        
-                        &::before {
+                                                &::before {
-                            background-color: props.get(vars.$disabled--box-bg-color);
+                                                        background-color: props.get(vars.$disabled--box-bg-color);
-                        }
+                                                }
-                    }
+                                        }
-                    &:checked {
+                                        &:checked {
-                        @include bem.sibling-elem('box') {
+                                                @include bem.sibling-elem('box') {
-                            background-color: props.get(vars.$disabled--box-border-color);
+                                                        background-color: props.get(vars.$disabled--box-border-color);
-                        }
+                                                }
-                    }
+                                        }
        
-                    &:indeterminate {
+                                        &:indeterminate {
-                        @include bem.sibling-elem('box') {
+                                                @include bem.sibling-elem('box') {
-                            background-color: props.get(vars.$disabled--box-border-color);
+                                                        background-color: props.get(vars.$disabled--box-border-color);
-                        }
+                                                }
-                    }
+                                        }
-                }
+                                }
-            }
+                        }
-        }
+                }
-    }
+        }
 }
diff --git a/src/objects/_checkbox.vars.scss b/src/objects/_checkbox.vars.scss
index aee26e6..25a0d3d 100644
--- a/src/objects/_checkbox.vars.scss
+++ b/src/objects/_checkbox.vars.scss
@@ -7,7 +7,7 @@ $label-gap:       props.def(--o-checkbox--label-gap, props.get(core.$size--125))
 $border-width:    props.def(--o-checkbox--border-width, props.get(core.$border-width--medium)) !default;
 $pad-i:           props.def(--o-checkbox--pad-i, props.get(core.$size--65)) !default;
 $pad-b:           props.def(--o-checkbox--pad-b, props.get(core.$size--65)) !default;
-$rounding:        props.def(--o-checkbox--rounding, props.get(core.$rounding)) !default;
+$rounding:        props.def(--o-checkbox--rounding, props.get(core.$rounding--sm)) !default;
 $spacing-sibling: props.def(--o-checkbox--spacing-sibling, props.get(core.$size--300)) !default;
 $key-focus--border-width:  props.def(--o-checkbox--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss
index b746551..51175a7 100644
--- a/src/objects/_divider.scss
+++ b/src/objects/_divider.scss
@@ -10,137 +10,195 @@
 @use 'divider.vars' as vars;
 @mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables('vars'));
-    @include bem.object('divider') {
+        @include bem.object('divider') {
-        display:        flex;
+                display:          flex;
-        flex:           0 0 auto;
+                flex:             0 0 auto;
-        flex-direction: row;
+                flex-direction:   row;
-        align-items:    center;
+                align-items:      center;
-        block-size:     1em;
+                block-size:       1em;
-        margin-block:   props.get(vars.$margin-b);
+                margin-block:     props.get(vars.$margin-b);
-        font-size:      props.get(vars.$strong--label-font-size);
+                font-size:        props.get(vars.$strong--label-font-size);
-        font-weight:    700;
+                font-weight:      700;
-        line-height:    1;
+                line-height:      1;
-        color:          props.get(vars.$strong--label-color);
+                color:            props.get(vars.$strong--label-color);
-        text-transform: uppercase;
+                text-transform:   uppercase;
-        letter-spacing: .5px;
+                letter-spacing:   props.get(vars.$letter-spacing);
+                background-color: transparent;
-        &::before,
+                &::before,
-        &::after {
+                &::after {
-            flex:             1 1 auto;
+                        flex:             1 1 auto;
-            inline-size:      100%;
+                        inline-size:      100%;
-            block-size:       props.get(vars.$strong--border-width);
+                        block-size:       props.get(vars.$strong--border-width);
-            content:          '';
+                        content:          '';
-            background-color: props.get(vars.$strong--bg-color);
+                        background-color: props.get(vars.$strong--bg-color);
-        }
+                }
-        &::before {
+                &::before {
-            display: block;
+                        display: block;
-        }
+                }
-        @include bem.elem('label') {
+                @include bem.elem('label') {
-            flex: 0 0 auto;
+                        flex: 0 0 auto;
-        }
+                }
-        @include bem.modifier('vertical') {
+                @include bem.modifier('vertical') {
-            align-self:       stretch;
+                        align-self:       stretch;
-            inline-size:      1px;
+                        inline-size:      props.get(vars.$vertical--border-width);
-            block-size:       auto;
+                        block-size:       auto;
-            margin-block:     0;
+                        margin-block:     0;
-            background-color: props.get(vars.$faint--bg-color);
+                        background-color: props.get(vars.$strong--bg-color);
-            &::before,
+                        &::before,
-            &::after {
+                        &::after {
-                display: none;
+                                display: none;
-            }
+                        }
-        }
+                }
-        @include bem.modifier('medium') {
+                @include bem.modifier('dot') {
-            font-size:   props.get(vars.$medium--label-font-size);
+                        align-self:       center;
-            font-weight: 500;
+                        inline-size:      props.get(vars.$dot--size);
-            color:       props.get(vars.$medium--label-color);
+                        block-size:       props.get(vars.$dot--size);
+                        margin-block:     0;
+                        background-color: props.get(vars.$strong--bg-color);
+                        border-radius:    props.get(vars.$dot--size);
-            &::before,
+                        &::before,
-            &::after {
+                        &::after {
-                block-size:       props.get(vars.$medium--border-width);
+                                display: none;
-                background-color: props.get(vars.$medium--bg-color);
+                        }
-            }
+                }
-        }
-        @include bem.modifier('faint') {
+                @include bem.modifier('medium') {
-            font-size:   props.get(vars.$faint--label-font-size);
+                        font-size:   props.get(vars.$medium--label-font-size);
-            font-weight: 500;
+                        font-weight: 500;
-            color:       props.get(vars.$faint--label-color);
+                        color:       props.get(vars.$medium--label-color);
-            &::before,
+                        &::before,
-            &::after {
+                        &::after {
-                block-size:       props.get(vars.$faint--border-width);
+                                block-size:       props.get(vars.$medium--border-width);
-                background-color: props.get(vars.$faint--bg-color);
+                                background-color: props.get(vars.$medium--bg-color);
-            }
+                        }
-            @include bem.modifier('vertical') {
+                        @include bem.modifier('vertical') {
-                background-color: props.get(vars.$vertical--faint--bg-color);
+                                background-color: props.get(vars.$medium--bg-color);
-            }
+                        }
-        }
-        @include bem.modifier('labelled') {
+                        @include bem.modifier('dot') {
-            &::before {
+                                background-color: props.get(vars.$medium--bg-color);
-                margin-inline-end: 1em;
+                        }
-            }
+                }
-            &::after {
+                @include bem.modifier('quiet') {
-                display:             block;
+                        font-size:   props.get(vars.$quiet--label-font-size);
-                margin-inline-start: 1em;
+                        font-weight: 500;
-            }
+                        color:       props.get(vars.$quiet--label-color);
-        }
-        @each $theme in map.keys(props.get(vars.$themes)) {
+                        &::before,
-            @include bem.modifier(string.slice($theme, 3)) {
+                        &::after {
-                &::before,
+                                block-size:       props.get(vars.$quiet--border-width);
-                &::after {
+                                background-color: props.get(vars.$quiet--bg-color);
-                    background-color: props.get(vars.$themes, $theme, --bg);
+                        }
-                }
-                @include bem.elem('label') {
+                        @include bem.modifier('vertical') {
-                    color: props.get(vars.$themes, $theme, --label);
+                                background-color: props.get(vars.$vertical--quiet--bg-color);
-                }
+                        }
-            }
-        }
-        @each $theme in map.keys(props.get(vars.$static-themes)) {
+                        @include bem.modifier('dot') {
-            @include bem.modifier(string.slice($theme, 3)) {
+                                background-color: props.get(vars.$dot--quiet--bg-color);
-                &::before,
+                        }
-                &::after {
+                }
-                    background-color: props.get(vars.$static-themes, $theme, --strong, --bg);
-                }
-                @include bem.elem('label') {
+                @include bem.modifier('faint') {
-                    color: props.get(vars.$static-themes, $theme, --strong, --label);
+                        font-size:   props.get(vars.$faint--label-font-size);
-                }
+                        font-weight: 500;
+                        color:       props.get(vars.$faint--label-color);
-                @include bem.modifier('medium') {
+                        &::before,
-                    &::before,
+                        &::after {
-                    &::after {
+                                block-size:       props.get(vars.$faint--border-width);
-                        background-color: props.get(vars.$static-themes, $theme, --medium, --bg);
+                                background-color: props.get(vars.$faint--bg-color);
-                    }
+                        }
+                        @include bem.modifier('vertical') {
+                                background-color: props.get(vars.$vertical--quiet--bg-color);
+                        }
+                        @include bem.modifier('dot') {
+                                background-color: props.get(vars.$dot--quiet--bg-color);
+                        }
+                }
+                @include bem.modifier('labelled') {
+                        &::before {
+                                margin-inline-end: 1em;
+                        }
+                        &::after {
+                                display:             block;
+                                margin-inline-start: 1em;
+                        }
+                }
+                @each $theme in map.keys(props.get(vars.$themes)) {
+                        @include bem.modifier(string.slice($theme, 3)) {
+                                &::before,
+                                &::after {
+                                        background-color: props.get(vars.$themes, $theme, --bg);
+                                }
+                                @include bem.elem('label') {
+                                        color: props.get(vars.$themes, $theme, --label);
+                                }
+                        }
+                }
+                @each $theme in map.keys(props.get(vars.$static-themes)) {
+                        @include bem.modifier(string.slice($theme, 3)) {
+                                &::before,
+                                &::after {
+                                        background-color: props.get(vars.$static-themes, $theme, --strong, --bg);
+                                }
+                                @include bem.elem('label') {
+                                        color: props.get(vars.$static-themes, $theme, --strong, --label);
+                                }
+                                @include bem.modifier('medium') {
+                                        &::before,
+                                        &::after {
+                                                background-color: props.get(vars.$static-themes, $theme, --medium, --bg);
+                                        }
+    
+                                        @include bem.elem('label') {
+                                                color: props.get(vars.$static-themes, $theme, --medium, --label);
+                                        }
+                                }
+    
+                                @include bem.modifier('quiet') {
+                                        &::before,
+                                        &::after {
+                                                background-color: props.get(vars.$static-themes, $theme, --quiet, --bg);
+                                        }
    
-                    @include bem.elem('label') {
+                                        @include bem.elem('label') {
-                        color: props.get(vars.$static-themes, $theme, --medium, --label);
+                                                color: props.get(vars.$static-themes, $theme, --quiet, --label);
-                    }
+                                        }
-                }
+                                }
    
-                @include bem.modifier('faint') {
+                                @include bem.modifier('faint') {
-                    &::before,
+                                        &::before,
-                    &::after {
+                                        &::after {
-                        background-color: props.get(vars.$static-themes, $theme, --faint, --bg);
+                                                background-color: props.get(vars.$static-themes, $theme, --faint, --bg);
-                    }
+                                        }
    
-                    @include bem.elem('label') {
+                                        @include bem.elem('label') {
-                        color: props.get(vars.$static-themes, $theme, --faint, --label);
+                                                color: props.get(vars.$static-themes, $theme, --faint, --label);
-                    }
+                                        }
-                }
+                                }
-            }
+                        }
-        }
+                }
-    }
+        }
 }
diff --git a/src/objects/_divider.vars.scss b/src/objects/_divider.vars.scss
index 1117fd5..7081f47 100644
--- a/src/objects/_divider.vars.scss
+++ b/src/objects/_divider.vars.scss
@@ -3,7 +3,10 @@
 @use 'iro-sass/src/props';
 @use '../core.vars' as core;
-$margin-b: props.def(--o-divider--size, props.get(core.$size--85)) !default;
+$margin-b:               props.def(--o-divider--size, props.get(core.$size--85)) !default;
+$vertical--border-width: props.def(--o-divider--vertical--width, props.get(core.$border-width--thin)) !default;
+$dot--size:              props.def(--o-divider--dot--size, props.get(core.$size--50)) !default;
+$letter-spacing:         props.def(--o-divider--letter-spacing, 1px) !default;
 $strong--border-width:    props.def(--o-divider--strong--border-width, props.get(core.$border-width--thick)) !default;
 $strong--label-font-size: props.def(--o-divider--strong--label-font-size, props.get(core.$font-size--100)) !default;
@@ -11,6 +14,9 @@ $strong--label-font-size: props.def(--o-divider--strong--label-font-size, props.
 $medium--border-width:    props.def(--o-divider--medium--border-width, props.get(core.$border-width--medium)) !default;
 $medium--label-font-size: props.def(--o-divider--medium--label-font-size, props.get(core.$font-size--75)) !default;
+$quiet--border-width:    props.def(--o-divider--quiet--border-width, props.get(core.$border-width--thin)) !default;
+$quiet--label-font-size: props.def(--o-divider--quiet--label-font-size, props.get(core.$font-size--50)) !default;
 $faint--border-width:    props.def(--o-divider--faint--border-width, props.get(core.$border-width--thin)) !default;
 $faint--label-font-size: props.def(--o-divider--faint--label-font-size, props.get(core.$font-size--50)) !default;
@@ -20,46 +26,55 @@ $strong--label-color: props.def(--o-divider--strong--label-color, props.get(core
 $medium--bg-color:    props.def(--o-divider--medium--bg-color, props.get(core.$theme, --border), 'color') !default;
 $medium--label-color: props.def(--o-divider--medium--label-color, props.get(core.$theme, --text-mute), 'color') !default;
-$faint--bg-color:    props.def(--o-divider--faint--bg-color, props.get(core.$theme, --border), 'color') !default;
+$quiet--bg-color:    props.def(--o-divider--quiet--bg-color, props.get(core.$theme, --border), 'color') !default;
-$faint--label-color: props.def(--o-divider--faint--label-color, props.get(core.$theme, --text-mute-more), 'color') !default;
+$quiet--label-color: props.def(--o-divider--quiet--label-color, props.get(core.$theme, --text-mute-more), 'color') !default;
+$faint--bg-color:    props.def(--o-divider--faint--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
+$faint--label-color: props.def(--o-divider--faint--label-color, props.get(core.$theme, --text-disabled), 'color') !default;
+$vertical--quiet--bg-color:    props.def(--o-divider--vertical--quiet--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
-$vertical--faint--bg-color:    props.def(--o-divider--faint--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
+$dot--quiet--bg-color:    props.def(--o-divider--dot--quiet--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
 $static-themes: props.def(--o-divider, (), 'color');
 @each $theme in map.keys(props.get(core.$transparent-colors)) {
-    $button-theme: --static-#{string.slice($theme, 3)};
+        $button-theme: --static-#{string.slice($theme, 3)};
-    $static-themes: props.merge($static-themes, (
+        $static-themes: props.merge($static-themes, (
-        $button-theme: (
+                $button-theme: (
-            --strong: (
+                        --strong: (
-                --bg:    props.get(core.$transparent-colors, $theme, --800),
+                                --bg:    props.get(core.$transparent-colors, $theme, --800),
-                --label: props.get(core.$transparent-colors, $theme, --900),
+                                --label: props.get(core.$transparent-colors, $theme, --900),
-            ),
+                        ),
-            --medium: (
+                        --medium: (
-                --bg:    props.get(core.$transparent-colors, $theme, --300),
+                                --bg:    props.get(core.$transparent-colors, $theme, --300),
-                --label: props.get(core.$transparent-colors, $theme, --500),
+                                --label: props.get(core.$transparent-colors, $theme, --500),
-            ),
+                        ),
-            --faint: (
+                        --quiet: (
-                --bg:    props.get(core.$transparent-colors, $theme, --300),
+                                --bg:    props.get(core.$transparent-colors, $theme, --300),
-                --label: props.get(core.$transparent-colors, $theme, --500),
+                                --label: props.get(core.$transparent-colors, $theme, --500),
-            ),
+                        ),
-        )
+                        --faint: (
-    ));
+                                --bg:    props.get(core.$transparent-colors, $theme, --200),
+                                --label: props.get(core.$transparent-colors, $theme, --400),
+                        ),
+                )
+        ));
 }
 $themes-config: (
-    accent:   --accent,
+        accent:   --accent,
-    negative: --negative,
+        negative: --negative,
 ) !default;
 $themes: props.def(--o-divider, (), 'color');
 @each $theme, $key in $themes-config {
-    $themes: props.merge($themes, (
+        $themes: props.merge($themes, (
-        --#{$theme}: (
+                --#{$theme}: (
-            --bg:    props.get(core.$theme, $key, --800),
+                        --bg:    props.get(core.$theme, $key, --800),
-            --label: props.get(core.$theme, $key, --1000),
+                        --label: props.get(core.$theme, $key, --1000),
-        )
+                )
-    ));
+        ));
 }
diff --git a/src/objects/_emoji.scss b/src/objects/_emoji.scss
index ce2dfa7..fd36535 100644
--- a/src/objects/_emoji.scss
+++ b/src/objects/_emoji.scss
@@ -8,43 +8,43 @@
 @use 'emoji.vars' as vars;
 @mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables('vars'));
-    @include bem.object('emoji') {
+        @include bem.object('emoji') {
-        position:       relative;
+                position:       relative;
-        display:        inline-block;
+                display:        inline-block;
-        inline-size:    calc(props.get(vars.$size));
+                inline-size:    calc(props.get(vars.$size));
-        block-size:     calc(props.get(vars.$size));
+                block-size:     calc(props.get(vars.$size));
-        padding:        calc(props.get(vars.$pad));
+                padding:        calc(props.get(vars.$pad));
-        margin:         calc(-1 * props.get(vars.$pad));
+                margin:         calc(-1 * props.get(vars.$pad));
-        vertical-align: props.get(vars.$valign);
+                vertical-align: props.get(vars.$valign);
-        object-fit:     contain;
+                object-fit:     contain;
-        @include bem.modifier('icon') {
+                @include bem.modifier('icon') {
-            margin:         calc(-1 * props.get(vars.$pad) - .5 * (props.get(vars.$size) - props.get(icon.$size)));
+                        margin:         calc(-1 * props.get(vars.$pad) - .5 * (props.get(vars.$size) - props.get(icon.$size)));
-            vertical-align: props.get(icon.$valign);
+                        vertical-align: props.get(icon.$valign);
-        }
+                }
-        @each $mod, $size, $valign in vars.$sizes {
+                @each $mod, $size, $valign in vars.$sizes {
-            @include bem.modifier($mod) {
+                        @include bem.modifier($mod) {
-                inline-size:    props.get($size);
+                                inline-size:    props.get($size);
-                block-size:     props.get($size);
+                                block-size:     props.get($size);
-                vertical-align: props.get($valign);
+                                vertical-align: props.get($valign);
-                @include bem.modifier('icon') {
+                                @include bem.modifier('icon') {
-                    margin: calc(-1 * props.get(vars.$pad) - .5 * (props.get($size) - props.get(icon.$size)));
+                                        margin: calc(-1 * props.get(vars.$pad) - .5 * (props.get($size) - props.get(icon.$size)));
-                }
+                                }
-            }
+                        }
-        }
+                }
-        @include bem.modifier('zoomable') {
+                @include bem.modifier('zoomable') {
-            border-radius: calc(props.get(vars.$rounding) / props.get(vars.$zoom));
+                        border-radius: calc(props.get(vars.$rounding) / props.get(vars.$zoom));
-            transition:    transform .2s ease, background-color .2s ease;
+                        transition:    transform .2s ease, background-color .2s ease;
-            &:hover {
+                        &:hover {
-                background-color: props.get(vars.$bg-color);
+                                background-color: props.get(vars.$bg-color);
-                transform:        scale(props.get(vars.$zoom));
+                                transform:        scale(props.get(vars.$zoom));
-            }
+                        }
-        }
+                }
-    }
+        }
 }
diff --git a/src/objects/_emoji.vars.scss b/src/objects/_emoji.vars.scss
index fbfb935..b7a8a43 100644
--- a/src/objects/_emoji.vars.scss
+++ b/src/objects/_emoji.vars.scss
@@ -4,7 +4,7 @@
 $size:     props.def(--o-emoji--size, calc(1 / 14 * 18em)) !default;
 $pad:      props.def(--o-emoji--pad, .3em) !default;
-$rounding: props.def(--o-emoji--rounding, props.get(core.$rounding)) !default;
+$rounding: props.def(--o-emoji--rounding, props.get(core.$rounding--sm)) !default;
 $zoom:     props.def(--o-emoji--zoom, 3) !default;
 $valign:   props.def(--o-emoji--valign, -.25em) !default;
@@ -18,9 +18,9 @@ $size--200:   props.def(--o-emoji--200--size, calc(1 / 14 * 38em)) !default;
 $valign--200: props.def(--o-emoji--200--valign, -1em) !default;
 $sizes: (
-    '125' $size--125 $valign--125,
+        '125' $size--125 $valign--125,
-    '150' $size--150 $valign--150,
+        '150' $size--150 $valign--150,
-    '200' $size--200 $valign--200,
+        '200' $size--200 $valign--200,
 ) !default;
 $bg-color: props.def(--o-emoji--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
diff --git a/src/objects/_field-label.scss b/src/objects/_field-label.scss
index 564ab2b..aa12eb5 100644
--- a/src/objects/_field-label.scss
+++ b/src/objects/_field-label.scss
@@ -7,70 +7,70 @@
 @use 'field-label.vars' as vars;
 @mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables('vars'));
-    @include bem.object('field-label') {
+        @include bem.object('field-label') {
-        @include bem.elem('label') {
+                @include bem.elem('label') {
-            display:            block;
+                        display:            block;
-            flex:               0 0 auto;
+                        flex:               0 0 auto;
-            padding-inline-end: props.get(vars.$spacing-i);
+                        padding-inline-end: props.get(vars.$spacing-i);
-            font-size:          props.get(vars.$label-font-size);
+                        font-size:          props.get(vars.$label-font-size);
-            font-weight:        400;
+                        font-weight:        400;
-            line-height:        1.3;
+                        line-height:        1.3;
-            color:              props.get(vars.$label-color);
+                        color:              props.get(vars.$label-color);
    
-            @include bem.next-elem('content') {
+                        @include bem.next-elem('content') {
-                margin-block-start: props.get(vars.$spacing-b);
+                                margin-block-start: props.get(vars.$spacing-b);
-            }
+                        }
-        }
+                }
    
-        @include bem.elem('content') {
+                @include bem.elem('content') {
-            display: block;
+                        display: block;
-            flex:    1 1 auto;
+                        flex:    1 1 auto;
-        }
+                }
    
-        @include bem.elem('hint') {
+                @include bem.elem('hint') {
-            display:            block;
+                        display:            block;
-            margin-block-start: props.get(vars.$spacing-b);
+                        margin-block-start: props.get(vars.$spacing-b);
-            font-size:          props.get(vars.$hint-font-size);
+                        font-size:          props.get(vars.$hint-font-size);
-            color:              props.get(vars.$hint-color);
+                        color:              props.get(vars.$hint-color);
-        }
+                }
    
-        @include bem.is('invalid') {
+                @include bem.is('invalid') {
-            @include bem.elem('hint') {
+                        @include bem.elem('hint') {
-                color: props.get(vars.$error-hint-color);
+                                color: props.get(vars.$error-hint-color);
-            }
+                        }
-        }
+                }
    
-        @include bem.is('disabled') {
+                @include bem.is('disabled') {
-            @include bem.elem('label', 'hint') {
+                        @include bem.elem('label', 'hint') {
-                color: props.get(vars.$disabled-color);
+                                color: props.get(vars.$disabled-color);
-            }
+                        }
-        }
+                }
    
-        @include bem.modifier('align-start', 'align-end') {
+                @include bem.modifier('align-start', 'align-end') {
-            display:     flex;
+                        display:     flex;
-            align-items: baseline;
+                        align-items: baseline;
    
-            @include bem.elem('label') {
+                        @include bem.elem('label') {
-                display: inline-block;
+                                display: inline-block;
    
-                @include bem.next-elem('content') {
+                                @include bem.next-elem('content') {
-                    margin-block-start: 0;
+                                        margin-block-start: 0;
-                }
+                                }
-            }
+                        }
-        }
+                }
    
-        @include bem.modifier('align-start') {
+                @include bem.modifier('align-start') {
-            @include bem.elem('label') {
+                        @include bem.elem('label') {
-                text-align: start;
+                                text-align: start;
-            }
+                        }
-        }
+                }
    
-        @include bem.modifier('align-end') {
+                @include bem.modifier('align-end') {
-            @include bem.elem('label') {
+                        @include bem.elem('label') {
-                text-align: end;
+                                text-align: end;
-            }
+                        }
-        }
+                }
-    }
+        }
 }
diff --git a/src/objects/_figure.scss b/src/objects/_figure.scss
new file mode 100644
index 0000000..27e0f6a
--- /dev/null
+++ b/src/objects/_figure.scss
@@ -0,0 +1,26 @@
+@use 'sass:meta';
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use '../props' as *;
+@forward 'figure.vars';
+@use 'figure.vars' as vars;
+@mixin styles {
+        @include materialize-at-root(meta.module-variables('vars'));
+        @include bem.object('figure') {
+                @include bem.elem('caption') {
+                        padding-block:    props.get(vars.$pad-b);
+                        font-size:        props.get(vars.$font-size);
+                        color:            props.get(vars.$text-color);
+                        border-block-end: props.get(vars.$border-width) solid props.get(vars.$border-color);
+                        &::before {
+                                display:       block;
+                                margin-block:  -100em 100em;
+                                content:       '';
+                        }
+                }
+        }
+}
diff --git a/src/objects/_figure.vars.scss b/src/objects/_figure.vars.scss
new file mode 100644
index 0000000..78f5d15
--- /dev/null
+++ b/src/objects/_figure.vars.scss
@@ -0,0 +1,9 @@
+@use 'iro-sass/src/props';
+@use '../core.vars' as core;
+$pad-b:        props.def(--o-figure--pad-b, props.get(core.$size--100)) !default;
+$border-width: props.def(--o-figure--border-width, props.get(core.$border-width--thin)) !default;
+$font-size:    props.def(--o-figure--font-size, props.get(core.$font-size--100)) !default;
+$text-color:   props.def(--o-figure--text-color, props.get(core.$theme, --text-mute-more), 'color') !default;
+$border-color: props.def(--o-figure--border-color, props.get(core.$theme, --border), 'color') !default;
diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss
index 89fe568..eed30e8 100644
--- a/src/objects/_heading.scss
+++ b/src/objects/_heading.scss
@@ -1,4 +1,6 @@
+@use 'sass:map';
 @use 'sass:meta';
+@use 'sass:string';
 @use 'iro-sass/src/bem';
 @use 'iro-sass/src/props';
 @use '../props' as *;
@@ -7,53 +9,86 @@
 @use 'heading.vars' as vars;
 @mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables('vars'));
-    @include bem.object('heading') {
+        @include bem.object('heading') {
-        display:               block;
+                display:               block;
-        margin-block-start:    props.get(vars.$margin-bs);
+                margin-block-start:    props.get(vars.$margin-bs);
-        font-family:           props.get(vars.$font-family);
+                font-family:           props.get(vars.$font-family);
-        font-weight:           props.get(vars.$font-weight);
+                font-weight:           props.get(vars.$font-weight);
-        font-feature-settings: props.get(vars.$feature-settings);
+                font-feature-settings: props.get(vars.$feature-settings);
-        line-height:           props.get(vars.$line-height);
+                line-height:           props.get(vars.$line-height);
-        text-transform:        none;
+                color:                 props.get(vars.$text-color);
-        letter-spacing:        normal;
+                text-transform:        props.get(vars.$text-transform);
-        transform:             translateX(props.get(vars.$offset));
+                letter-spacing:        normal;
-        & + & {
+                & + & {
-            margin-block-start: props.get(vars.$margin-bs-sibling);
+                        margin-block-start: props.get(vars.$margin-bs-sibling);
-        }
+                }
-        @include bem.elem('highlight') {
+                @include bem.elem('highlight') {
-            background-image: linear-gradient(to top,
+                        background-image: linear-gradient(to top,
-            transparent               .05em,
+                        transparent               props.get(vars.$bg-start),
-            props.get(vars.$bg-color) .05em,
+                        props.get(vars.$bg-color) props.get(vars.$bg-start),
-            props.get(vars.$bg-color) .5em,
+                        props.get(vars.$bg-color) props.get(vars.$bg-end),
-            transparent               .5em);
+                        transparent               props.get(vars.$bg-end));
-        }
+                }
-        @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in vars.$sizes {
+                @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings, $text-transform, $text-color in vars.$sizes {
-            @include bem.modifier($mod) {
+                        @include bem.modifier($mod) {
-                font-family:           props.get($font-family);
+                                font-family:           props.get($font-family);
-                font-size:             props.get($font-size);
+                                font-size:             props.get($font-size);
-                font-weight:           props.get($font-weight);
+                                font-weight:           props.get($font-weight);
-                font-feature-settings: props.get($feature-settings);
+                                font-feature-settings: props.get($feature-settings);
-                line-height:           props.get($line-height);
+                                line-height:           props.get($line-height);
-                letter-spacing:        props.get($letter-spacing);
+                                color:                 props.get($text-color);
-            }
+                                text-transform:        props.get($text-transform);
-        }
+                                letter-spacing:        props.get($letter-spacing);
+                        }
+                }
-        @include bem.modifier('display') {
+                @include bem.modifier('display') {
-            @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in vars.$display--sizes {
+                        @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings, $text-transform, $text-color in vars.$display--sizes {
-                @include bem.modifier($mod) {
+                                @include bem.modifier($mod) {
-                    font-family:           props.get($font-family);
+                                        font-family:           props.get($font-family);
-                    font-size:             props.get($font-size);
+                                        font-size:             props.get($font-size);
-                    font-weight:           props.get($font-weight);
+                                        font-weight:           props.get($font-weight);
-                    font-feature-settings: props.get($feature-settings);
+                                        font-feature-settings: props.get($feature-settings);
-                    line-height:           props.get($line-height);
+                                        line-height:           props.get($line-height);
-                    letter-spacing:        props.get($letter-spacing);
+                                        color:                 props.get($text-color);
-                }
+                                        text-transform:        props.get($text-transform);
-            }
+                                        letter-spacing:        props.get($letter-spacing);
-        }
+                                        transform:             translateX(props.get(vars.$offset));
-    }
+                                }
+                        }
+                }
+                @each $theme in map.keys(props.get(vars.$static-themes)) {
+                        @include bem.modifier(string.slice($theme, 3)) {
+                                color: props.get(vars.$static-themes, $theme, --text-color);
+                                                
+                                @each $mod, $value in vars.$sizes {
+                                        @include bem.modifier($mod) {
+                                                color: props.get(vars.$static-themes, $theme, --#{$mod}, --text-color);
+                                        }
+                                }
+                                @include bem.elem('highlight') {
+                                        background-image: linear-gradient(to top,
+                                        transparent                                        props.get(vars.$bg-start),
+                                        props.get(vars.$static-themes, $theme, --bg-color) props.get(vars.$bg-start),
+                                        props.get(vars.$static-themes, $theme, --bg-color) props.get(vars.$bg-end),
+                                        transparent                                        props.get(vars.$bg-end));
+                                }
+                                @include bem.modifier('display') {      
+                                        @each $mod, $value in vars.$sizes {
+                                                @include bem.modifier($mod) {
+                                                        color: props.get(vars.$static-themes, $theme, --display, --#{$mod}, --text-color);
+                                                }
+                                        }
+                                }
+                        }
+                }
+        }
 }
diff --git a/src/objects/_heading.vars.scss b/src/objects/_heading.vars.scss
index d15e0b8..c7c08a6 100644
--- a/src/objects/_heading.vars.scss
+++ b/src/objects/_heading.vars.scss
@@ -1,3 +1,5 @@
+@use 'sass:map';
+@use 'sass:string';
 @use 'iro-sass/src/props';
 @use '../core.vars' as core;
@@ -5,62 +7,87 @@ $offset:            props.def(--o-heading--offset, -.02em) !default;
 $margin-bs:         props.def(--o-heading--margin-bs, props.get(core.$size--700)) !default;
 $margin-bs-sibling: props.def(--o-heading--margin-bs-sibling, props.get(core.$size--325)) !default;
-$bg-color: props.def(--o-heading--bg-color, props.get(core.$theme, --base, --50)) !default;
+$text-color:     props.def(--o-heading--text-color, props.get(core.$theme, --heading), 'color') !default;
+$bg-color:       props.def(--o-heading--bg-color, props.get(core.$theme, --base, --50), 'color') !default;
-$font-family:      props.def(--o-heading--font-family, props.get(core.$font--headline--family)) !default;
+$text-color--xxl: props.def(--o-heading--xxl--text-color, props.get(core.$theme, --heading), 'color') !default;
-$line-height:      props.def(--o-heading--line-height, props.get(core.$font--headline--line-height)) !default;
+$text-color--xl:  props.def(--o-heading--xl--text-color, props.get($text-color--xxl), 'color') !default;
-$font-weight:      props.def(--o-heading--font-weight, props.get(core.$font--headline--weight)) !default;
+$text-color--lg:  props.def(--o-heading--lg--text-color, props.get($text-color--xxl), 'color') !default;
-$feature-settings: props.def(--o-heading--feature-settings, props.get(core.$font--headline--feature-settings)) !default;
+$text-color--md:  props.def(--o-heading--md--text-color, props.get($text-color--xxl), 'color') !default;
+$text-color--sm:  props.def(--o-heading--sm--text-color, props.get(core.$theme, --text-mute-more), 'color') !default;
+$text-color--xs:  props.def(--o-heading--xs--text-color, props.get($text-color--sm), 'color') !default;
-$font-family--xxl:      props.def(--o-heading--xxl--font-family, props.get(core.$font--headline--family)) !default;
+$display--text-color--xxl: props.def(--o-heading--display--xxl--text-color, props.get(core.$theme, --heading), 'color') !default;
-$line-height--xxl:      props.def(--o-heading--xxl--line-height, props.get(core.$font--headline--line-height)) !default;
+$display--text-color--xl:  props.def(--o-heading--display--xl--text-color, props.get($display--text-color--xxl), 'color') !default;
+$display--text-color--lg:  props.def(--o-heading--display--lg--text-color, props.get($display--text-color--xxl), 'color') !default;
+$display--text-color--md:  props.def(--o-heading--display--md--text-color, props.get($display--text-color--xxl), 'color') !default;
+$display--text-color--sm:  props.def(--o-heading--display--sm--text-color, props.get($display--text-color--xxl), 'color') !default;
+$display--text-color--xs:  props.def(--o-heading--display--xs--text-color, props.get(core.$theme, --text-mute-more), 'color') !default;
+$bg-start: props.def(--o-heading--bg-start, .05em) !default;
+$bg-end:   props.def(--o-heading--bg-end, .5em) !default;
+$font-family:      props.def(--o-heading--font-family, props.get(core.$font--standard--family)) !default;
+$line-height:      props.def(--o-heading--line-height, props.get(core.$font--standard--line-height)) !default;
+$font-weight:      props.def(--o-heading--font-weight, bold) !default;
+$feature-settings: props.def(--o-heading--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
+$text-transform:   props.def(--o-heading--text-transform, none) !default;
+$font-family--xxl:      props.def(--o-heading--xxl--font-family, props.get(core.$font--standard--family)) !default;
+$line-height--xxl:      props.def(--o-heading--xxl--line-height, props.get(core.$font--standard--line-height)) !default;
 $font-size--xxl:        props.def(--o-heading--xxl--font-size, props.get(core.$font-size--300)) !default;
-$font-weight--xxl:      props.def(--o-heading--xxl--font-weight, props.get(core.$font--headline--weight)) !default;
+$font-weight--xxl:      props.def(--o-heading--xxl--font-weight, bold) !default;
 $letter-spacing--xxl:   props.def(--o-heading--xxl--letter-spacing, 0) !default;
-$feature-settings--xxl: props.def(--o-heading--xxl--feature-settings, props.get(core.$font--headline--feature-settings)) !default;
+$feature-settings--xxl: props.def(--o-heading--xxl--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
+$text-transform--xxl:   props.def(--o-heading--xxl--text-transform, none) !default;
-$font-family--xl:      props.def(--o-heading--xl--font-family, props.get(core.$font--headline--family)) !default;
+$font-family--xl:      props.def(--o-heading--xl--font-family, props.get(core.$font--standard--family)) !default;
-$line-height--xl:      props.def(--o-heading--xl--line-height, props.get(core.$font--headline--line-height)) !default;
+$line-height--xl:      props.def(--o-heading--xl--line-height, props.get(core.$font--standard--line-height)) !default;
 $font-size--xl:        props.def(--o-heading--xl--font-size, props.get(core.$font-size--200)) !default;
-$font-weight--xl:      props.def(--o-heading--xl--font-weight, props.get(core.$font--headline--weight)) !default;
+$font-weight--xl:      props.def(--o-heading--xl--font-weight, bold) !default;
 $letter-spacing--xl:   props.def(--o-heading--xl--letter-spacing, 0) !default;
-$feature-settings--xl: props.def(--o-heading--xl--feature-settings, props.get(core.$font--headline--feature-settings)) !default;
+$feature-settings--xl: props.def(--o-heading--xl--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
+$text-transform--xl:   props.def(--o-heading--xl--text-transform, none) !default;
 $font-family--lg:      props.def(--o-heading--lg--font-family, props.get(core.$font--standard--family)) !default;
-$line-height--lg:      props.def(--o-heading--lg--line-height, props.get(core.$font--headline--line-height)) !default;
+$line-height--lg:      props.def(--o-heading--lg--line-height, props.get(core.$font--standard--line-height)) !default;
 $font-size--lg:        props.def(--o-heading--lg--font-size, props.get(core.$font-size--150)) !default;
 $font-weight--lg:      props.def(--o-heading--lg--font-weight, bold) !default;
 $letter-spacing--lg:   props.def(--o-heading--lg--letter-spacing, 0) !default;
 $feature-settings--lg: props.def(--o-heading--lg--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
+$text-transform--lg:   props.def(--o-heading--lg--text-transform, none) !default;
 $font-family--md:      props.def(--o-heading--md--font-family, props.get(core.$font--standard--family)) !default;
-$line-height--md:      props.def(--o-heading--md--line-height, props.get(core.$font--headline--line-height)) !default;
+$line-height--md:      props.def(--o-heading--md--line-height, props.get(core.$font--standard--line-height)) !default;
 $font-size--md:        props.def(--o-heading--md--font-size, props.get(core.$font-size--100)) !default;
 $font-weight--md:      props.def(--o-heading--md--font-weight, bold) !default;
 $letter-spacing--md:   props.def(--o-heading--md--letter-spacing, 0) !default;
 $feature-settings--md: props.def(--o-heading--md--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
+$text-transform--md:   props.def(--o-heading--md--text-transform, none) !default;
 $font-family--sm:      props.def(--o-heading--sm--font-family, props.get(core.$font--standard--family)) !default;
-$line-height--sm:      props.def(--o-heading--sm--line-height, props.get(core.$font--headline--line-height)) !default;
+$line-height--sm:      props.def(--o-heading--sm--line-height, props.get(core.$font--standard--line-height)) !default;
-$font-size--sm:        props.def(--o-heading--sm--font-size, props.get(core.$font-size--75)) !default;
+$font-size--sm:        props.def(--o-heading--sm--font-size, props.get(core.$font-size--100)) !default;
-$font-weight--sm:      props.def(--o-heading--sm--font-weight, 500) !default;
+$font-weight--sm:      props.def(--o-heading--sm--font-weight, normal) !default;
-$letter-spacing--sm:   props.def(--o-heading--sm--letter-spacing, 1px) !default;
+$letter-spacing--sm:   props.def(--o-heading--sm--letter-spacing, 0) !default;
 $feature-settings--sm: props.def(--o-heading--sm--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
+$text-transform--sm:   props.def(--o-heading--sm--text-transform, none) !default;
 $font-family--xs:      props.def(--o-heading--xs--font-family, props.get(core.$font--standard--family)) !default;
-$line-height--xs:      props.def(--o-heading--xs--line-height, props.get(core.$font--headline--line-height)) !default;
+$line-height--xs:      props.def(--o-heading--xs--line-height, props.get(core.$font--standard--line-height)) !default;
 $font-size--xs:        props.def(--o-heading--xs--font-size, props.get(core.$font-size--50)) !default;
-$font-weight--xs:      props.def(--o-heading--xs--font-weight, 500) !default;
+$font-weight--xs:      props.def(--o-heading--xs--font-weight, normal) !default;
 $letter-spacing--xs:   props.def(--o-heading--xs--letter-spacing, 1px) !default;
 $feature-settings--xs: props.def(--o-heading--xs--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
+$text-transform--xs:   props.def(--o-heading--xs--text-transform, none) !default;
 $sizes: (
-    'xs'  $font-family--xs $line-height--xs $font-size--xs $font-weight--xs $letter-spacing--xs $feature-settings--xs,
+        'xs'  $font-family--xs $line-height--xs $font-size--xs $font-weight--xs $letter-spacing--xs $feature-settings--xs $text-transform--xs $text-color--xs,
-    'sm'  $font-family--sm $line-height--sm $font-size--sm $font-weight--sm $letter-spacing--sm $feature-settings--sm,
+        'sm'  $font-family--sm $line-height--sm $font-size--sm $font-weight--sm $letter-spacing--sm $feature-settings--sm $text-transform--sm $text-color--sm,
-    'md'  $font-family--md $line-height--md $font-size--md $font-weight--md $letter-spacing--md $feature-settings--md,
+        'md'  $font-family--md $line-height--md $font-size--md $font-weight--md $letter-spacing--md $feature-settings--md $text-transform--md $text-color--md,
-    'lg'  $font-family--lg $line-height--lg $font-size--lg $font-weight--lg $letter-spacing--lg $feature-settings--lg,
+        'lg'  $font-family--lg $line-height--lg $font-size--lg $font-weight--lg $letter-spacing--lg $feature-settings--lg $text-transform--lg $text-color--lg,
-    'xl'  $font-family--xl $line-height--xl $font-size--xl $font-weight--xl $letter-spacing--xl $feature-settings--xl,
+        'xl'  $font-family--xl $line-height--xl $font-size--xl $font-weight--xl $letter-spacing--xl $feature-settings--xl $text-transform--xl $text-color--xl,
-    'xxl' $font-family--xxl $line-height--xxl $font-size--xxl $font-weight--xxl $letter-spacing--xxl $feature-settings--xxl,
+        'xxl' $font-family--xxl $line-height--xxl $font-size--xxl $font-weight--xxl $letter-spacing--xxl $feature-settings--xxl $text-transform--xxl $text-color--xxl,
 ) !default;
 $display--font-family--xxl:      props.def(--o-heading--display--xxl--font-family, props.get(core.$font--headline--family)) !default;
@@ -69,6 +96,7 @@ $display--font-size--xxl:        props.def(--o-heading--display--xxl--font-size,
 $display--font-weight--xxl:      props.def(--o-heading--display--xxl--font-weight, props.get(core.$font--headline--weight)) !default;
 $display--letter-spacing--xxl:   props.def(--o-heading--display--xxl--letter-spacing, 0) !default;
 $display--feature-settings--xxl: props.def(--o-heading--display--xxl--feature-settings, props.get(core.$font--headline--feature-settings)) !default;
+$display--text-transform--xxl:   props.def(--o-heading--display--xxl--text-transform, none) !default;
 $display--font-family--xl:      props.def(--o-heading--display--xl--font-family, props.get(core.$font--headline--family)) !default;
 $display--line-height--xl:      props.def(--o-heading--display--xl--line-height, props.get(core.$font--headline--line-height)) !default;
@@ -76,6 +104,7 @@ $display--font-size--xl:        props.def(--o-heading--display--xl--font-size, p
 $display--font-weight--xl:      props.def(--o-heading--display--xl--font-weight, props.get(core.$font--headline--weight)) !default;
 $display--letter-spacing--xl:   props.def(--o-heading--display--xl--letter-spacing, 0) !default;
 $display--feature-settings--xl: props.def(--o-heading--display--xl--feature-settings, props.get(core.$font--headline--feature-settings)) !default;
+$display--text-transform--xl:   props.def(--o-heading--display--xl--text-transform, none) !default;
 $display--font-family--lg:      props.def(--o-heading--display--lg--font-family, props.get(core.$font--headline--family)) !default;
 $display--line-height--lg:      props.def(--o-heading--display--lg--line-height, props.get(core.$font--headline--line-height)) !default;
@@ -83,27 +112,31 @@ $display--font-size--lg:        props.def(--o-heading--display--lg--font-size, p
 $display--font-weight--lg:      props.def(--o-heading--display--lg--font-weight, props.get(core.$font--headline--weight)) !default;
 $display--letter-spacing--lg:   props.def(--o-heading--display--lg--letter-spacing, 0) !default;
 $display--feature-settings--lg: props.def(--o-heading--display--lg--feature-settings, props.get(core.$font--headline--feature-settings)) !default;
+$display--text-transform--lg:   props.def(--o-heading--display--lg--text-transform, none) !default;
-$display--font-family--md:      props.def(--o-heading--display--md--font-family, props.get(core.$font--headline--family)) !default;
+$display--font-family--md:      props.def(--o-heading--display--md--font-family, props.get(core.$font--standard--family)) !default;
-$display--line-height--md:      props.def(--o-heading--display--md--line-height, props.get(core.$font--headline--line-height)) !default;
+$display--line-height--md:      props.def(--o-heading--display--md--line-height, props.get(core.$font--standard--line-height)) !default;
 $display--font-size--md:        props.def(--o-heading--display--md--font-size, props.get(core.$font-size--150)) !default;
-$display--font-weight--md:      props.def(--o-heading--display--md--font-weight, props.get(core.$font--headline--weight)) !default;
+$display--font-weight--md:      props.def(--o-heading--display--md--font-weight, bold) !default;
 $display--letter-spacing--md:   props.def(--o-heading--display--md--letter-spacing, 0) !default;
-$display--feature-settings--md: props.def(--o-heading--display--md--feature-settings, props.get(core.$font--headline--feature-settings)) !default;
+$display--feature-settings--md: props.def(--o-heading--display--md--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
+$display--text-transform--md:   props.def(--o-heading--display--md--text-transform, none) !default;
 $display--font-family--sm:      props.def(--o-heading--display--sm--font-family, props.get(core.$font--standard--family)) !default;
-$display--line-height--sm:      props.def(--o-heading--display--sm--line-height, props.get(core.$font--headline--line-height)) !default;
+$display--line-height--sm:      props.def(--o-heading--display--sm--line-height, props.get(core.$font--standard--line-height)) !default;
-$display--font-size--sm:        props.def(--o-heading--display--sm--font-size, props.get(core.$font-size--75)) !default;
+$display--font-size--sm:        props.def(--o-heading--display--sm--font-size, props.get(core.$font-size--100)) !default;
 $display--font-weight--sm:      props.def(--o-heading--display--sm--font-weight, bold) !default;
 $display--letter-spacing--sm:   props.def(--o-heading--display--sm--letter-spacing, 0) !default;
 $display--feature-settings--sm: props.def(--o-heading--display--sm--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
+$display--text-transform--sm:   props.def(--o-heading--display--sm--text-transform, none) !default;
 $display--font-family--xs:      props.def(--o-heading--display--xs--font-family, props.get(core.$font--standard--family)) !default;
-$display--line-height--xs:      props.def(--o-heading--display--xs--line-height, props.get(core.$font--headline--line-height)) !default;
+$display--line-height--xs:      props.def(--o-heading--display--xs--line-height, props.get(core.$font--standard--line-height)) !default;
 $display--font-size--xs:        props.def(--o-heading--display--xs--font-size, props.get(core.$font-size--50)) !default;
-$display--font-weight--xs:      props.def(--o-heading--display--xs--font-weight, 500) !default;
+$display--font-weight--xs:      props.def(--o-heading--display--xs--font-weight, normal) !default;
 $display--letter-spacing--xs:   props.def(--o-heading--display--xs--letter-spacing, 1px) !default;
 $display--feature-settings--xs: props.def(--o-heading--display--xs--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
+$display--text-transform--xs:   props.def(--o-heading--display--xs--text-transform, none) !default;
 $display--font-size--xxl--md: props.def(--o-heading--display--xxl--font-size, props.get(core.$font-size--900), 'md') !default;
 $display--font-size--xl--md:  props.def(--o-heading--display--xl--font-size, props.get(core.$font-size--600), 'md') !default;
@@ -113,10 +146,63 @@ $display--font-size--sm--md:  props.def(--o-heading--display--sm--font-size, pro
 $display--font-size--xs--md:  props.def(--o-heading--display--xs--font-size, props.get(core.$font-size--50), 'md') !default;
 $display--sizes: (
-    'xs'  $display--font-family--xs $display--line-height--xs $display--font-size--xs $display--font-weight--xs $display--letter-spacing--xs $display--feature-settings--xs,
+        'xs'  $display--font-family--xs $display--line-height--xs $display--font-size--xs $display--font-weight--xs $display--letter-spacing--xs $display--feature-settings--xs $display--text-transform--xs $display--text-color--xs,
-    'sm'  $display--font-family--sm $display--line-height--sm $display--font-size--sm $display--font-weight--sm $display--letter-spacing--sm $display--feature-settings--sm,
+        'sm'  $display--font-family--sm $display--line-height--sm $display--font-size--sm $display--font-weight--sm $display--letter-spacing--sm $display--feature-settings--sm $display--text-transform--sm $display--text-color--sm,
-    'md'  $display--font-family--md $display--line-height--md $display--font-size--md $display--font-weight--md $display--letter-spacing--md $display--feature-settings--md,
+        'md'  $display--font-family--md $display--line-height--md $display--font-size--md $display--font-weight--md $display--letter-spacing--md $display--feature-settings--md $display--text-transform--md $display--text-color--md,
-    'lg'  $display--font-family--lg $display--line-height--lg $display--font-size--lg $display--font-weight--lg $display--letter-spacing--lg $display--feature-settings--lg,
+        'lg'  $display--font-family--lg $display--line-height--lg $display--font-size--lg $display--font-weight--lg $display--letter-spacing--lg $display--feature-settings--lg $display--text-transform--lg $display--text-color--lg,
-    'xl'  $display--font-family--xl $display--line-height--xl $display--font-size--xl $display--font-weight--xl $display--letter-spacing--xl $display--feature-settings--xl,
+        'xl'  $display--font-family--xl $display--line-height--xl $display--font-size--xl $display--font-weight--xl $display--letter-spacing--xl $display--feature-settings--xl $display--text-transform--xl $display--text-color--xl,
-    'xxl' $display--font-family--xxl $display--line-height--xxl $display--font-size--xxl $display--font-weight--xxl $display--letter-spacing--xxl $display--feature-settings--xxl,
+        'xxl' $display--font-family--xxl $display--line-height--xxl $display--font-size--xxl $display--font-weight--xxl $display--letter-spacing--xxl $display--feature-settings--xxl $display--text-transform--xxl $display--text-color--xxl,
 ) !default;
+$static-themes: props.def(--o-heading, (), 'color');
+@each $theme in map.keys(props.get(core.$transparent-colors)) {
+        $heading-theme: --static-#{string.slice($theme, 3)};
+        $static-themes: props.merge($static-themes, (
+                $heading-theme: (
+                        --bg-color:   props.get(core.$transparent-colors, $theme, --200),
+                        --text-color: props.get(core.$transparent-colors, $theme, --900),
+                        --xxl: (
+                                --text-color: props.get(core.$transparent-colors, $theme, --900),
+                        ),
+                        --xl: (
+                                --text-color: props.get(core.$transparent-colors, $theme, --900),
+                        ),
+                        --lg: (
+                                --text-color: props.get(core.$transparent-colors, $theme, --900),
+                        ),
+                        --md: (
+                                --text-color: props.get(core.$transparent-colors, $theme, --900),
+                        ),
+                        --sm: (
+                                --text-color: props.get(core.$transparent-colors, $theme, --500),
+                        ),
+                        --xs: (
+                                --text-color: props.get(core.$transparent-colors, $theme, --500),
+                        ),
+                        --display: (
+                                --xxl: (
+                                        --text-color: props.get(core.$transparent-colors, $theme, --900),
+                                ),
+                                --xl: (
+                                        --text-color: props.get(core.$transparent-colors, $theme, --900),
+                                ),
+                                --lg: (
+                                        --text-color: props.get(core.$transparent-colors, $theme, --900),
+                                ),
+                                --md: (
+                                        --text-color: props.get(core.$transparent-colors, $theme, --900),
+                                ),
+                                --sm: (
+                                        --text-color: props.get(core.$transparent-colors, $theme, --900),
+                                ),
+                                --xs: (
+                                        --text-color: props.get(core.$transparent-colors, $theme, --500),
+                                ),
+                        ),
+                )
+        ));
+}
diff --git a/src/objects/_icon.scss b/src/objects/_icon.scss
index 187938e..1941960 100644
--- a/src/objects/_icon.scss
+++ b/src/objects/_icon.scss
@@ -7,19 +7,19 @@
 @use 'icon.vars' as vars;
 @mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables('vars'));
-    @include bem.object('icon') {
+        @include bem.object('icon') {
-        display:         inline;
+                display:         inline;
-        inline-size:     props.get(vars.$size);
+                inline-size:     props.get(vars.$size);
-        block-size:      props.get(vars.$size);
+                block-size:      props.get(vars.$size);
-        vertical-align:  props.get(vars.$valign);
+                vertical-align:  props.get(vars.$valign);
-        stroke-linecap:  round;
+                stroke-width:    props.get(vars.$stroke-width);
-        stroke-linejoin: round;
+                stroke-linecap:  round;
-        stroke-width:    props.get(vars.$stroke-width);
+                stroke-linejoin: round;
-        @include bem.modifier('block') {
+                @include bem.modifier('block') {
-            display: block;
+                        display: block;
-        }
+                }
-    }
+        }
 }
diff --git a/src/objects/_icon.vars.scss b/src/objects/_icon.vars.scss
index 218f311..ff1541d 100644
--- a/src/objects/_icon.vars.scss
+++ b/src/objects/_icon.vars.scss
@@ -2,4 +2,4 @@
 $stroke-width: props.def(--o-icon--stroke-width, 1.5px) !default;
 $size:         props.def(--o-icon--size, calc(1 / 14 * 16em)) !default;
-$valign:       props.def(--o-icon--valign, -.2em) !default;
+$valign:       props.def(--o-icon--valign, -.18em) !default;
diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss
index b62c353..b95148f 100644
--- a/src/objects/_lightbox.scss
+++ b/src/objects/_lightbox.scss
@@ -9,127 +9,127 @@
 @use 'lightbox.vars' as vars;
 @mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables('vars'));
-    @include bem.object('lightbox') {
+        @include bem.object('lightbox') {
-        flex:           1 1 auto;
+                flex:           1 1 auto;
-        min-block-size: 0;
+                min-block-size: 0;
-        @include bem.elem('header') {
+                @include bem.elem('header') {
-            display:             flex;
+                        display:             flex;
-            grid-area:           header;
+                        grid-area:           header;
-            align-items:         flex-start;
+                        align-items:         flex-start;
-            padding-block-start: props.get(vars.$pad);
+                        padding-block-start: props.get(vars.$pad);
-            padding-inline:      props.get(vars.$pad);
+                        padding-inline:      props.get(vars.$pad);
-        }
+                }
-        @include bem.elem('img') {
+                @include bem.elem('img') {
-            box-sizing:      border-box;
+                        box-sizing:      border-box;
-            display:         block;
+                        display:         block;
-            grid-area:       content;
+                        grid-area:       content;
-            place-self:      center;
+                        place-self:      center;
-            inline-size:     auto;
+                        inline-size:     auto;
-            max-inline-size: 100%;
+                        max-inline-size: 100%;
-            block-size:      auto;
+                        block-size:      auto;
-            max-block-size:  props.get(vars.$image--max-height);
+                        max-block-size:  props.get(vars.$image--max-height);
-            padding:         props.get(vars.$pad);
+                        padding:         props.get(vars.$pad);
-            margin-inline:   auto;
+                        margin-inline:   auto;
-            border-radius:   calc(props.get(vars.$pad) + props.get(vars.$image--border-radius));
+                        border-radius:   calc(props.get(vars.$pad) + props.get(vars.$image--border-radius));
-        }
+                }
-        @include bem.elem('thumbnails') {
+                @include bem.elem('thumbnails') {
-            display:            none;
+                        display:            none;
-            grid-area:          thumbnails;
+                        grid-area:          thumbnails;
-            gap:                props.get(vars.$thumbnails--spacing);
+                        gap:                props.get(vars.$thumbnails--spacing);
-            padding:            props.get(vars.$pad);
+                        padding:            props.get(vars.$pad);
-            margin-block-start: calc(-1 * props.get(vars.$pad));
+                        margin-block-start: calc(-1 * props.get(vars.$pad));
-            overflow:           auto;
+                        overflow:           auto;
-        }
+                }
-        @include bem.elem('close-btn') {
+                @include bem.elem('close-btn') {
-            display:            none;
+                        display:            none;
-            flex:               0 0 auto;
+                        flex:               0 0 auto;
-            margin-block-start: calc(-.5 * props.get(vars.$pad));
+                        margin-block-start: calc(-.5 * props.get(vars.$pad));
-            margin-inline:      auto calc(-.5 * props.get(vars.$pad));
+                        margin-inline:      auto calc(-.5 * props.get(vars.$pad));
-            font-size:          props.get(vars.$close-button--font-size);
+                        font-size:          props.get(vars.$close-button--font-size);
-        }
+                }
-        @include bem.elem('nav-btn') {
+                @include bem.elem('nav-btn') {
-            position:   relative;
+                        position:   relative;
-            display:    none;
+                        display:    none;
-            align-self: center;
+                        align-self: center;
-            overflow:   visible;
+                        overflow:   visible;
-            font-size:  props.get(vars.$nav-button--font-size);
+                        font-size:  props.get(vars.$nav-button--font-size);
-            &::before {
+                        &::before {
-                position:           absolute;
+                                position:           absolute;
-                inset-block-start:  50%;
+                                inset-block-start:  50%;
-                display:            block;
+                                display:            block;
-                inline-size:        props.get(vars.$nav-button--inline-size);
+                                inline-size:        props.get(vars.$nav-button--inline-size);
-                block-size:         props.get(vars.$nav-button--block-size);
+                                block-size:         props.get(vars.$nav-button--block-size);
-                content:            '';
+                                content:            '';
-                transform:          translateY(-50%);
+                                transform:          translateY(-50%);
-            }
+                        }
-            @include bem.modifier('prev') {
+                        @include bem.modifier('prev') {
-                grid-area:     prev;
+                                grid-area:     prev;
-                margin-inline: calc(.5 * props.get(vars.$pad)) calc(-1 * props.get(vars.$pad));
+                                margin-inline: calc(.5 * props.get(vars.$pad)) calc(-1 * props.get(vars.$pad));
-                &::before {
+                                &::before {
-                    inset-inline-start: 0;
+                                        inset-inline-start: 0;
-                }
+                                }
-            }
+                        }
    
-            @include bem.modifier('next') {
+                        @include bem.modifier('next') {
-                grid-area:     next;
+                                grid-area:     next;
-                margin-inline: calc(-1 * props.get(vars.$pad)) calc(.5 * props.get(vars.$pad));
+                                margin-inline: calc(-1 * props.get(vars.$pad)) calc(.5 * props.get(vars.$pad));
-                &::before {
+                                &::before {
-                    inset-inline-end: 0;
+                                        inset-inline-end: 0;
-                }
+                                }
-            }
+                        }
-        }
+                }
-        @include bem.modifier('interactive') {
+                @include bem.modifier('interactive') {
-            display:               grid;
+                        display:               grid;
-            grid-template-areas:
+                        grid-template-areas:
-                'header     header     header'
+                                'header     header     header'
-                'prev       content    next'
+                                'prev       content    next'
-                'thumbnails thumbnails thumbnails';
+                                'thumbnails thumbnails thumbnails';
-            grid-template-rows:    auto minmax(0, 1fr) auto auto;
+                        grid-template-rows:    auto minmax(0, 1fr) auto auto;
-            grid-template-columns: auto minmax(0, 1fr) auto;
+                        grid-template-columns: auto minmax(0, 1fr) auto;
-            @include bem.modifier('fullscreen') {
+                        @include bem.modifier('fullscreen') {
-                block-size: props.get(vars.$fullscreen--height);
+                                block-size: props.get(vars.$fullscreen--height);
-            }
+                        }
-            @include bem.elem('img') {
+                        @include bem.elem('img') {
-                display:        none;
+                                display:        none;
-                max-block-size: 100%;
+                                max-block-size: 100%;
-                margin-inline:  0;
+                                margin-inline:  0;
-                @include bem.multi('&:target', 'is' 'visible') {
+                                @include bem.multi('&:target', 'is' 'visible') {
-                    display: block;
+                                        display: block;
-                }
+                                }
-            }
+                        }
-            @include bem.elem('thumbnails') {
+                        @include bem.elem('thumbnails') {
-                display: flex;
+                                display: flex;
-            }
+                        }
-            @include bem.elem('close-btn') {
+                        @include bem.elem('close-btn') {
-                display: block;
+                                display: block;
-            }
+                        }
-            @include bem.elem('nav-btn') {
+                        @include bem.elem('nav-btn') {
-                display: block;
+                                display: block;
-            }
+                        }
-        }
+                }
-        @each $theme in map.keys(props.get(vars.$static-themes)) {
+                @each $theme in map.keys(props.get(vars.$static-themes)) {
-            @include bem.modifier(string.slice($theme, 3)) {
+                        @include bem.modifier(string.slice($theme, 3)) {
-                color: props.get(vars.$static-themes, $theme, --text);
+                                color: props.get(vars.$static-themes, $theme, --text);
-            }
+                        }
-        }
+                }
-    }
+        }
 }
diff --git a/src/objects/_lightbox.vars.scss b/src/objects/_lightbox.vars.scss
index cc926e4..6d22aa8 100644
--- a/src/objects/_lightbox.vars.scss
+++ b/src/objects/_lightbox.vars.scss
@@ -23,11 +23,11 @@ $thumbnails--spacing: props.def(--o-lightbox--thumbnails--spacing, props.get(cor
 $static-themes: props.def(--o-lightbox, (), 'color');
 @each $theme in map.keys(props.get(core.$transparent-colors)) {
-    $lightbox-theme: --static-#{string.slice($theme, 3)};
+        $lightbox-theme: --static-#{string.slice($theme, 3)};
-    $static-themes: props.merge($static-themes, (
+        $static-themes: props.merge($static-themes, (
-        $lightbox-theme: (
+                $lightbox-theme: (
-            --text: props.get(core.$transparent-colors, $theme, --800),
+                        --text: props.get(core.$transparent-colors, $theme, --800),
-        )
+                )
-    ));
+        ));
 }
diff --git a/src/objects/_menu.scss b/src/objects/_menu.scss
index 4d31874..f370067 100644
--- a/src/objects/_menu.scss
+++ b/src/objects/_menu.scss
@@ -8,95 +8,95 @@
 @use 'menu.vars' as vars;
 @mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables('vars'));
-    @include bem.object('menu') {
+        @include bem.object('menu') {
-        display:        flex;
+                display:        flex;
-        flex-direction: column;
+                flex-direction: column;
-        gap:            props.get(vars.$spacing);
+                gap:            props.get(vars.$spacing);
-        @include bem.elem('header') {
+                @include bem.elem('header') {
-            padding-block:  props.get(vars.$item--pad-b);
+                        padding-block:  props.get(vars.$item--pad-b);
-            padding-inline: props.get(vars.$item--pad-i);
+                        padding-inline: props.get(vars.$item--pad-i);
-            font-size:      props.get(vars.$header--font-size);
+                        font-size:      props.get(vars.$header--font-size);
-            font-weight:    500;
+                        font-weight:    500;
-            color:          props.get(vars.$header--label-color);
+                        color:          props.get(vars.$header--label-color);
-            text-transform: uppercase;
+                        text-transform: uppercase;
-            letter-spacing: .5px;
+                        letter-spacing: .5px;
-            @include bem.next-twin-elem {
+                        @include bem.next-twin-elem {
-                margin-block-start: calc(props.get(vars.$separator-width) + props.get(vars.$spacing));
+                                margin-block-start: calc(props.get(vars.$separator-width) + props.get(vars.$spacing));
-            }
+                        }
-        }
+                }
-        @include bem.elem('item') {
+                @include bem.elem('item') {
-            padding-block:   props.get(vars.$item--pad-b);
+                        padding-block:   props.get(vars.$item--pad-b);
-            padding-inline:  props.get(vars.$item--pad-i);
+                        padding-inline:  props.get(vars.$item--pad-i);
-            margin:          calc(-1 * props.get(vars.$item--key-focus--outline-width));
+                        margin:          calc(-1 * props.get(vars.$item--key-focus--outline-width));
-            color:           props.get(vars.$item--disabled--label-color);
+                        color:           props.get(vars.$item--disabled--label-color);
-            background-clip: padding-box;
+                        background-clip: padding-box;
-            border:          props.get(vars.$item--key-focus--outline-width) solid transparent;
+                        border:          props.get(vars.$item--key-focus--outline-width) solid transparent;
-            border-radius:   calc(props.get(vars.$item--rounding) + props.get(vars.$item--key-focus--outline-width));
+                        border-radius:   calc(props.get(vars.$item--rounding) + props.get(vars.$item--key-focus--outline-width));
-            &:link,
+                        &:link,
-            &:visited,
+                        &:visited,
-            &:enabled {
+                        &:enabled {
-                color: currentColor;
+                                color: currentColor;
-                @include bem.multi('&:hover, &:focus-visible', 'is' 'selected') {
+                                @include bem.multi('&:hover, &:focus-visible', 'is' 'selected') {
-                    color:            props.get(vars.$item--hover--label-color);
+                                        color:            props.get(vars.$item--hover--label-color);
-                    background-color: props.get(vars.$item--hover--bg-color);
+                                        background-color: props.get(vars.$item--hover--bg-color);
-                }
+                                }
-                &:active {
+                                &:active {
-                    color:            props.get(vars.$item--active--label-color);
+                                        color:            props.get(vars.$item--active--label-color);
-                    background-color: props.get(vars.$item--active--bg-color);
+                                        background-color: props.get(vars.$item--active--bg-color);
-                }
+                                }
-                &:focus-visible {
+                                &:focus-visible {
-                    outline:    props.get(vars.$item--key-focus--border-color) solid props.get(vars.$item--key-focus--border-width);
+                                        outline:    props.get(vars.$item--key-focus--border-color) solid props.get(vars.$item--key-focus--border-width);
-                    box-shadow:
+                                        box-shadow:
-                        0
+                                                0
-                        0
+                                                0
-                        0
+                                                0
-                        calc(props.get(vars.$item--key-focus--border-width) + props.get(vars.$item--key-focus--outline-width))
+                                                calc(props.get(vars.$item--key-focus--border-width) + props.get(vars.$item--key-focus--outline-width))
-                        props.get(vars.$item--key-focus--outline-color);
+                                                props.get(vars.$item--key-focus--outline-color);
-                }
+                                }
-            }
+                        }
-            @include bem.next-elem('header') {
+                        @include bem.next-elem('header') {
-                margin-block-start: calc(props.get(vars.$separator-width) + props.get(vars.$spacing));
+                                margin-block-start: calc(props.get(vars.$separator-width) + props.get(vars.$spacing));
-            }
+                        }
-        }
+                }
-        @include bem.elem('header') {
+                @include bem.elem('header') {
-            &:link,
+                        &:link,
-            &:visited,
+                        &:visited,
-            &:enabled {
+                        &:enabled {
-                color: props.get(vars.$header--label-color);
+                                color: props.get(vars.$header--label-color);
-            }
+                        }
-        }
+                }
-        @include bem.elem('separator') {
+                @include bem.elem('separator') {
-            block-size:       1px;
+                        block-size:       1px;
-            margin-block:     props.get(vars.$separator-width);
+                        margin-block:     props.get(vars.$separator-width);
-            margin-inline:    props.get(vars.$item--pad-i);
+                        margin-inline:    props.get(vars.$item--pad-i);
-            background-color: props.get(vars.$separator-color);
+                        background-color: props.get(vars.$separator-color);
-        }
+                }
-        @include bem.elem('slot') {
+                @include bem.elem('slot') {
-            padding-block:  props.get(vars.$item--pad-b);
+                        padding-block:  props.get(vars.$item--pad-b);
-            padding-inline: props.get(vars.$item--pad-i);
+                        padding-inline: props.get(vars.$item--pad-i);
-        }
+                }
-        @include bem.elem('icon-slot') {
+                @include bem.elem('icon-slot') {
-            display:         flex;
+                        display:         flex;
-            justify-content: center;
+                        justify-content: center;
-            inline-size:     props.get(icon.$size);
+                        inline-size:     props.get(icon.$size);
-        }
+                }
-        @include bem.modifier('pull') {
+                @include bem.modifier('pull') {
-            margin: calc(-1 * props.get(vars.$item--pad-i));
+                        margin: calc(-1 * props.get(vars.$item--pad-i));
-        }
+                }
-    }
+        }
 }
diff --git a/src/objects/_navbar.scss b/src/objects/_navbar.scss
new file mode 100644
index 0000000..ae18614
--- /dev/null
+++ b/src/objects/_navbar.scss
@@ -0,0 +1,255 @@
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:string';
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use '../props' as *;
+@forward 'navbar.vars';
+@use 'navbar.vars' as vars;
+@mixin -apply-theme($theme, $key: ()) {
+        @include bem.elem('item-label') {
+                color: props.get($theme, list.join($key, --disabled --label-color)...);
+        }
+        @include bem.elem('item-content') {
+                color: props.get($theme, list.join($key, --disabled --text-color)...);
+                &::after {
+                        outline: props.get($theme, list.join($key, --key-focus --border)...) solid props.get(vars.$key-focus--border-width);
+                        box-shadow:
+                                0
+                                0
+                                0
+                                calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
+                                props.get($theme, list.join($key, --key-focus --outline)...);
+                }
+        }
+        @include bem.elem('item') {
+                &:link,
+                &:visited,
+                &:enabled {
+                        @include bem.elem('item-label') {
+                                color: props.get($theme, list.join($key, --label-color)...);
+                        }
+                        @include bem.elem('item-content') {
+                                color: props.get($theme, list.join($key, --text-color)...);
+                        }
+                        &:hover,
+                        &:focus-visible {
+                                @include bem.elem('item-label') {
+                                        color: props.get($theme, list.join($key, --hover --label-color)...);
+                                }
+                                @include bem.elem('item-content') {
+                                        color:            props.get($theme, list.join($key, --hover --text-color)...);
+                                        background-color: props.get($theme, list.join($key, --hover --bg-color)...);
+                                }
+                        }
+                        &:focus-visible {
+                                @include bem.elem('item-label') {
+                                        color: props.get($theme, list.join($key, --key-focus --label)...);
+                                }
+                        }
+                        &:active {
+                                @include bem.elem('item-label') {
+                                        color: props.get($theme, list.join($key, --active --label-color)...);
+                                }
+                                @include bem.elem('item-content') {
+                                        color:            props.get($theme, list.join($key, --active --text-color)...);
+                                        background-color: props.get($theme, list.join($key, --active --bg-color)...);
+                                }
+                        }
+                }
+                @include bem.is('selected') {
+                        @include bem.elem('item-label') {
+                                color: props.get($theme, list.join($key, --selected --disabled --label-color)...);
+                        }
+                        @include bem.elem('item-content') {
+                                color:            props.get($theme, list.join($key, --selected --disabled --text-color)...);
+                                background-color: props.get($theme, list.join($key, --selected --disabled --bg-color)...);
+                        }
+                        &:link,
+                        &:visited,
+                        &:enabled {
+                                @include bem.elem('item-label') {
+                                        color: props.get($theme, list.join($key, --selected --label-color)...);
+                                }
+                                @include bem.elem('item-content') {
+                                        color:            props.get($theme, list.join($key, --selected --text-color)...);
+                                        background-color: props.get($theme, list.join($key, --selected --bg-color)...);
+                                }
+                                &:hover,
+                                &:focus-visible {
+                                        @include bem.elem('item-label') {
+                                                color: props.get($theme, list.join($key, --selected --hover --label-color)...);
+                                        }
+                                        @include bem.elem('item-content') {
+                                                color:            props.get($theme, list.join($key, --selected --hover --text-color)...);
+                                                background-color: props.get($theme, list.join($key, --selected --hover --bg-color)...);
+                                        }
+                                }
+                                &:active {
+                                        @include bem.elem('item-label') {
+                                                color: props.get($theme, list.join($key, --selected --active --label-color)...);
+                                        }
+                                        @include bem.elem('item-content') {
+                                                color:            props.get($theme, list.join($key, --selected --active --text-color)...);
+                                                background-color: props.get($theme, list.join($key, --selected --active --bg-color)...);
+                                        }
+                                }
+                        }
+                }
+        }
+        @include bem.modifier('quiet') {
+                @include bem.elem('item') {
+                        @include bem.is('selected') {
+                                @include bem.elem('item-content') {
+                                        color:            props.get($theme, list.join($key, --quiet --selected --disabled --text-color)...);
+                                        background-color: props.get($theme, list.join($key, --quiet --selected --disabled --bg-color)...);
+                                }
+                                &:link,
+                                &:visited,
+                                &:enabled {
+                                        @include bem.elem('item-content') {
+                                                color:            props.get($theme, list.join($key, --quiet --selected --text-color)...);
+                                                background-color: props.get($theme, list.join($key, --quiet --selected --bg-color)...);
+                                        }
+                                        &:hover,
+                                        &:focus-visible {
+                                                @include bem.elem('item-content') {
+                                                        color:            props.get($theme, list.join($key, --quiet --selected --hover --text-color)...);
+                                                        background-color: props.get($theme, list.join($key, --quiet --selected --hover --bg-color)...);
+                                                }
+                                        }
+                                        &:active {
+                                                @include bem.elem('item-content') {
+                                                        color:            props.get($theme, list.join($key, --quiet --selected --active --text-color)...);
+                                                        background-color: props.get($theme, list.join($key, --quiet --selected --active --bg-color)...);
+                                                }
+                                        }
+                                }
+                        }
+                }
+        }
+}
+@mixin styles {
+        @include materialize-at-root(meta.module-variables('vars'));
+        @include bem.object('navbar') {
+                display:    flex;
+                block-size: props.get(vars.$block-size);
+                @include bem.elem('item-label') {
+                        order:              2;
+                        margin-block-start: props.get(vars.$item--pad-b-icon);
+                        font-size:          props.get(vars.$item--label-font-size);
+                        font-weight:        bold;
+                        @include bem.next-elem('item-content') {
+                                padding-block:  props.get(vars.$item--pad-b-icon);
+                                padding-inline: props.get(vars.$item--pad-i-icon);
+                                font-size:      props.get(vars.$item--icon-size);
+                        }
+                }
+                @include bem.elem('item-content-text') {
+                        margin-inline: props.get(vars.$item--pad-i-label);
+                }
+                @include bem.elem('item-content') {
+                        position:        relative;
+                        order:           1;
+                        padding-block:   props.get(vars.$item--pad-b);
+                        padding-inline:  props.get(vars.$item--pad-i);
+                        font-size:       props.get(vars.$item--font-size);
+                        white-space:     nowrap;
+                        border-radius:   100em;
+                        &::after {
+                                position:       absolute;
+                                inset:          calc(-1 * props.get(vars.$key-focus--border-offset));
+                                z-index:        -10;
+                                display:        block;
+                                visibility:     hidden;
+                                pointer-events: none;
+                                content:        '';
+                                border-radius:  100em;
+                        }
+                }
+                @include bem.elem('item') {
+                        display:         flex;
+                        flex-direction:  column;
+                        align-items:     center;
+                        justify-content: center;
+                        inline-size:     100%;
+                        padding-inline:  calc(.5 * props.get(vars.$spacing));
+                        font-weight:     500;
+                        &:link,
+                        &:visited,
+                        &:enabled {
+                                &:focus-visible {
+                                        @include bem.elem('item-content') {
+                                                &::after {
+                                                        visibility: visible;
+                                                }
+                                        }
+                                }
+                        }
+                        @include bem.is('selected') {
+                                font-weight: bold;
+                        }
+                }
+                @include -apply-theme(vars.$default-theme);
+                @each $theme in map.keys(props.get(vars.$themes)) {
+                        @include bem.modifier(string.slice($theme, 3)) {
+                                @include -apply-theme(vars.$themes, $theme);
+                        }
+                }
+                @include bem.modifier('hide-unselected') {
+                        @include bem.elem('item') {
+                                display: none;
+                                @include bem.is('selected') {
+                                        display: flex;
+                                }
+                        }
+                }
+                @include bem.modifier('adapt') {
+                        block-size: 100%;
+                }
+                @include bem.modifier('align-block') {
+                        margin-inline: calc(-1 * props.get(vars.$item--pad-i));
+                }
+        }
+}
diff --git a/src/objects/_navbar.vars.scss b/src/objects/_navbar.vars.scss
new file mode 100644
index 0000000..934e9b9
--- /dev/null
+++ b/src/objects/_navbar.vars.scss
@@ -0,0 +1,178 @@
+@use 'sass:map';
+@use 'sass:string';
+@use 'iro-sass/src/props';
+@use '../core.vars' as core;
+$block-size: props.def(--o-navbar--block-size, props.get(core.$size--1000)) !default;
+$spacing:    props.def(--o-navbar--spacing, props.get(core.$size--50)) !default;
+$item--pad-i:           props.def(--o-navbar--item--pad-i, props.get(core.$size--150)) !default;
+$item--pad-i-label:     props.def(--o-navbar--item--pad-i-label, props.get(core.$size--75)) !default;
+$item--pad-i-icon:      props.def(--o-navbar--item--pad-i-icon, props.get(core.$size--250)) !default;
+$item--pad-b:           props.def(--o-navbar--item--pad-b, props.get(core.$size--75)) !default;
+$item--pad-b-icon:      props.def(--o-navbar--item--pad-b-icon, props.get(core.$size--40)) !default;
+$item--font-size:       props.def(--o-navbar--item--font-size, props.get(core.$font-size--100)) !default;
+$item--icon-size:       props.def(--o-navbar--item--icon-size, props.get(core.$font-size--200)) !default;
+$item--label-font-size: props.def(--o-navbar--item--label-font-size, props.get(core.$font-size--50)) !default;
+$key-focus--border-width:  props.def(--o-navbar--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
+$key-focus--border-offset: props.def(--o-navbar--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
+$key-focus--outline-width: props.def(--o-navbar--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
+$themes: props.def(--o-navbar, (), 'color');
+$default-theme-override: () !default;
+$default-theme: map.deep-merge((
+        --text-color:  props.get(core.$theme, --text),
+        --label-color:  props.get(core.$theme, --text-mute),
+        --hover: (
+                --bg-color:    props.get(core.$theme, --border-mute),
+                --text-color:  props.get(core.$theme, --heading),
+                --label-color: props.get(core.$theme, --text),
+        ),
+        --active: (
+                --bg-color:    props.get(core.$theme, --border),
+                --text-color:  props.get(core.$theme, --heading),
+                --label-color: props.get(core.$theme, --heading),
+        ),
+        --disabled: (
+                --text-color:   props.get(core.$theme, --border-strong),
+                --label-color:  props.get(core.$theme, --text-disabled),
+        ),
+        --key-focus: (
+                --label:   props.get(core.$theme, --focus, --text),
+                --border:  props.get(core.$theme, --focus, --border),
+                --outline: props.get(core.$theme, --focus, --outline),
+        ),
+        --selected: (
+                --bg-color:    props.get(core.$theme, --heading),
+                --text-color:  props.get(core.$theme, --base, --50),
+                --label-color: props.get(core.$theme, --heading),
+                --hover: (
+                        --bg-color:    props.get(core.$theme, --text),
+                        --text-color:  props.get(core.$theme, --base, --50),
+                        --label-color: props.get(core.$theme, --heading),
+                ),
+                --active: (
+                        --bg-color:    props.get(core.$theme, --text-mute),
+                        --text-color:  props.get(core.$theme, --base, --50),
+                        --label-color: props.get(core.$theme, --heading),
+                ),
+                --disabled: (
+                        --bg-color:    props.get(core.$theme, --border-mute),
+                        --text-color:  props.get(core.$theme, --border-strong),
+                        --label-color: props.get(core.$theme, --text-disabled),
+                ),
+        ),
+        --quiet: (
+                --selected: (
+                        --bg-color:     props.get(core.$theme, --border-mute),
+                        --text-color:  props.get(core.$theme, --heading),
+                        --hover: (
+                                --bg-color:     props.get(core.$theme, --border),
+                                --text-color:  props.get(core.$theme, --heading),
+                        ),
+    
+                        --active: (
+                                --bg-color:     props.get(core.$theme, --border-strong),
+                                --text-color:  props.get(core.$theme, --heading),
+                        ),
+                        --disabled: (
+                                --bg-color:     props.get(core.$theme, --border-mute),
+                                --text-color:  props.get(core.$theme, --border-strong),
+                        ),
+                )
+        )
+), $default-theme-override) !default;
+$default-theme: props.def(--o-navbar, $default-theme, 'color');
+@each $theme in map.keys(props.get(core.$transparent-colors)) {
+        $nav-theme: --static-#{string.slice($theme, 3)};
+        $themes: props.merge($themes, (
+                $nav-theme: (
+                        --text-color:  props.get(core.$transparent-colors, $theme, --800),
+                        --label-color: props.get(core.$transparent-colors, $theme, --700),
+                        --hover: (
+                                --bg-color:    props.get(core.$transparent-colors, $theme, --300),
+                                --text-color:  props.get(core.$transparent-colors, $theme, --900),
+                                --label-color: props.get(core.$transparent-colors, $theme, --800),
+                        ),
+                        --active: (
+                                --bg-color:    props.get(core.$transparent-colors, $theme, --400),
+                                --text-color:  props.get(core.$transparent-colors, $theme, --900),
+                                --label-color: props.get(core.$transparent-colors, $theme, --900),
+                        ),
+                        --disabled: (
+                                --text-color:   props.get(core.$transparent-colors, $theme, --500),
+                                --label-color:  props.get(core.$transparent-colors, $theme, --500),
+                        ),
+                        --key-focus: (
+                                --label:   props.get(core.$transparent-colors, $theme, --800),
+                                --border:  props.get(core.$transparent-colors, $theme, --900),
+                                --outline: props.get(core.$transparent-colors, $theme, --300),
+                        ),
+                        --selected: (
+                                --bg-color:    props.get(core.$transparent-colors, $theme, --900),
+                                --text-color:  props.get(core.$transparent-colors, $theme, --text),
+                                --label-color: props.get(core.$transparent-colors, $theme, --800),
+                                --hover: (
+                                        --bg-color:    props.get(core.$transparent-colors, $theme, --800),
+                                        --text-color:  props.get(core.$transparent-colors, $theme, --text),
+                                        --label-color: props.get(core.$transparent-colors, $theme, --900),
+                                ),
+                                --active: (
+                                        --bg-color:    props.get(core.$transparent-colors, $theme, --800),
+                                        --text-color:  props.get(core.$transparent-colors, $theme, --text),
+                                        --label-color: props.get(core.$transparent-colors, $theme, --900),
+                                ),
+                                --disabled: (
+                                        --bg-color:    props.get(core.$transparent-colors, $theme, --200),
+                                        --text-color:  props.get(core.$transparent-colors, $theme, --500),
+                                        --label-color: props.get(core.$transparent-colors, $theme, --100),
+                                ),
+                        ),
+                        --quiet: (
+                                --selected: (
+                                        --bg-color:    props.get(core.$transparent-colors, $theme, --300),
+                                        --text-color:  props.get(core.$transparent-colors, $theme, --900),
+                                        --hover: (
+                                                --bg-color:    props.get(core.$transparent-colors, $theme, --400),
+                                                --text-color:  props.get(core.$transparent-colors, $theme, --900),
+                                        ),
+                        
+                                        --active: (
+                                                --bg-color:    props.get(core.$transparent-colors, $theme, --500),
+                                                --text-color:  props.get(core.$transparent-colors, $theme, --900),
+                                        ),
+                                        --disabled: (
+                                                --bg-color:    props.get(core.$transparent-colors, $theme, --100),
+                                                --text-color:  props.get(core.$transparent-colors, $theme, --500),
+                                        ),
+                                )
+                        )
+                )
+        ));
+}
diff --git a/src/objects/_palette.scss b/src/objects/_palette.scss
index 8a6cdb2..79c0f6c 100644
--- a/src/objects/_palette.scss
+++ b/src/objects/_palette.scss
@@ -7,57 +7,57 @@
 @use '../core.vars' as core;
 @mixin styles {
-    @include bem.object('palette') {
+        @include bem.object('palette') {
-        display:    flex;
+                display:    flex;
-        block-size: 3em;
+                block-size: 3em;
-        @include bem.elem('item') {
+                @include bem.elem('item') {
-            flex: 1 1 auto;
+                        flex: 1 1 auto;
-            $palette: map.get(config.$themes, config.$theme-default, light, --palettes, --base);
+                        $palette: map.get(config.$themes, config.$theme-default, light, --palettes, --base);
-            $levels:  map.get(config.$themes, config.$theme-default, light, --levels, list.nth($palette, 2));
+                        $levels:  map.get(config.$themes, config.$theme-default, light, --levels, list.nth($palette, 2));
-            @for $i from 1 through list.length($levels) {
+                        @for $i from 1 through list.length($levels) {
-                $key: list.nth(map.keys($levels), $i);
+                                $key: list.nth(map.keys($levels), $i);
-                &:nth-child(#{$i}) {
+                                &:nth-child(#{$i}) {
-                    background-color: props.get(core.$theme, --base, $key);
+                                        background-color: props.get(core.$theme, --base, $key);
-                }
+                                }
-            }
+                        }
-        }
+                }
-        @each $palette-name, $palette in map.get(config.$themes, config.$theme-default, light, --palettes) {
+                @each $palette-name, $palette in map.get(config.$themes, config.$theme-default, light, --palettes) {
-            $levels: map.get(config.$themes, config.$theme-default, light, --levels, list.nth($palette, 2));
+                        $levels: map.get(config.$themes, config.$theme-default, light, --levels, list.nth($palette, 2));
-            @include bem.modifier(string.slice($palette-name, 3)) {
+                        @include bem.modifier(string.slice($palette-name, 3)) {
-                @include bem.elem('item') {
+                                @include bem.elem('item') {
-                    @for $i from 1 through list.length($levels) {
+                                        @for $i from 1 through list.length($levels) {
-                        $key: list.nth(map.keys($levels), $i);
+                                                $key: list.nth(map.keys($levels), $i);
        
-                        &:nth-child(#{$i}) {
+                                                &:nth-child(#{$i}) {
-                            background-color: props.get(core.$theme, $palette-name, $key);
+                                                        background-color: props.get(core.$theme, $palette-name, $key);
-                        }
+                                                }
-                    }
+                                        }
-                }
+                                }
-            }
+                        }
-        }
+                }
-        @include bem.modifier('static') {
+                @include bem.modifier('static') {
-            @each $palette-name, $palette in map.get(config.$static-colors, --palettes) {
+                        @each $palette-name, $palette in map.get(config.$static-colors, --palettes) {
-                $levels: map.get(config.$static-colors, --levels);
+                                $levels: map.get(config.$static-colors, --levels);
-                @include bem.modifier(string.slice($palette-name, 3)) {
+                                @include bem.modifier(string.slice($palette-name, 3)) {
-                    @include bem.elem('item') {
+                                        @include bem.elem('item') {
-                        @for $i from 1 through list.length($levels) {
+                                                @for $i from 1 through list.length($levels) {
-                            $key: list.nth(map.keys($levels), $i);
+                                                        $key: list.nth(map.keys($levels), $i);
            
-                            &:nth-child(#{$i}) {
+                                                        &:nth-child(#{$i}) {
-                                background-color: props.get(core.$theme, #{$palette-name}-static, $key);
+                                                                background-color: props.get(core.$theme, #{$palette-name}-static, $key);
-                            }
+                                                        }
-                        }
+                                                }
-                    }
+                                        }
-                }
+                                }
-            }
+                        }
-        }
+                }
-    }
+        }
 }
diff --git a/src/objects/_placeholders.scss b/src/objects/_placeholders.scss
new file mode 100644
index 0000000..80fc913
--- /dev/null
+++ b/src/objects/_placeholders.scss
@@ -0,0 +1,22 @@
+@use 'sass:meta';
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use '../props' as *;
+@forward 'placeholders.vars';
+@use 'placeholders.vars' as vars;
+@mixin styles {
+        @include materialize-at-root(meta.module-variables('vars'));
+        @include bem.object('placeholders') {
+                @include bem.elem('placeholder') {
+                        display:          inline-block;
+                        min-block-size:   props.get(vars.$min-block-size);
+                        vertical-align:   middle;
+                        background-color: currentColor;
+                        border-radius:    props.get(vars.$rounding);
+                        opacity:          props.get(vars.$opacity);
+                }
+        }
+}
diff --git a/src/objects/_placeholders.vars.scss b/src/objects/_placeholders.vars.scss
new file mode 100644
index 0000000..a2e41e2
--- /dev/null
+++ b/src/objects/_placeholders.vars.scss
@@ -0,0 +1,6 @@
+@use 'iro-sass/src/props';
+@use '../core.vars' as core;
+$min-block-size: props.def(--o-placeholder--min-block-size, 1em) !default;
+$rounding:       props.def(--o-placeholder--rounding, props.get(core.$rounding)) !default;
+$opacity:        props.def(--o-placeholder--opacity, .5) !default;
diff --git a/src/objects/_popover.scss b/src/objects/_popover.scss
index afdcf32..2746477 100644
--- a/src/objects/_popover.scss
+++ b/src/objects/_popover.scss
@@ -7,31 +7,39 @@
 @use 'popover.vars' as vars;
 @mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables('vars'));
-    @include bem.object('popover') {
+        @include bem.object('popover') {
-        position:           fixed;
+                position:           fixed;
-        inset-block-start:  0;
+                inset-block-start:  0;
-        inset-inline-start: 0;
+                inset-inline-start: 0;
-        z-index:            props.get(vars.$z-index);
+                z-index:            props.get(vars.$z-index);
-        padding-block:      props.get(vars.$pad-b);
+                padding-block:      props.get(vars.$pad-b);
-        padding-inline:     props.get(vars.$pad-i);
+                padding-inline:     props.get(vars.$pad-i);
-        background-color:   props.get(vars.$bg-color);
+                margin:             0;
-        filter:             props.get(vars.$filter);
+                color:              currentColor;
-        border:             props.get(vars.$border-width) solid props.get(vars.$border-color);
+                background-color:   props.get(vars.$bg-color);
-        border-radius:      props.get(vars.$rounding);
+                border:             props.get(vars.$border-width) solid transparent;
-        transform:          translate(var(--x), var(--y));
+                border-color:       props.get(vars.$border-color);
+                border-radius:      props.get(vars.$rounding);
+                box-shadow:
+                        props.get(vars.$shadow-x)
+                        props.get(vars.$shadow-y)
+                        props.get(vars.$shadow-blur)
+                        props.get(vars.$shadow-grow)
+                        props.get(vars.$shadow-color);
+                transform:          translate(var(--x), var(--y));
-        @include bem.modifier('up-left') {
+                @include bem.modifier('up-left') {
-            transform: translate(var(--x), calc(var(--y) - 100%));
+                        transform: translate(var(--x), calc(var(--y) - 100%));
-        }
+                }
-        @include bem.modifier('up-right') {
+                @include bem.modifier('up-right') {
-            transform: translate(calc(var(--x) - 100%), calc(var(--y) - 100%));
+                        transform: translate(calc(var(--x) - 100%), calc(var(--y) - 100%));
-        }
+                }
-        @include bem.modifier('down-right') {
+                @include bem.modifier('down-right') {
-            transform: translate(calc(var(--x) - 100%), var(--y));
+                        transform: translate(calc(var(--x) - 100%), var(--y));
-        }
+                }
-    }
+        }
 }
diff --git a/src/objects/_popover.vars.scss b/src/objects/_popover.vars.scss
index b76112e..e560d1b 100644
--- a/src/objects/_popover.vars.scss
+++ b/src/objects/_popover.vars.scss
@@ -9,6 +9,11 @@ $separator-width: props.def(--o-popover--separator-width, props.get(core.$size--
 $rounding:        props.def(--o-popover--rounding, props.get(core.$rounding)) !default;
 $border-width:    props.def(--o-popover--border-width, props.get(core.$border-width--thin)) !default;
-$bg-color:     props.def(--o-popover--bg-color, props.get(core.$theme, --bg-l2), 'color') !default;
+$shadow-x:    props.def(--o-popover--shadow-x, props.get(core.$shadow--l2--x)) !default;
-$border-color: props.def(--o-popover--border-color, props.get(core.$theme, --border), 'color') !default;
+$shadow-y:    props.def(--o-popover--shadow-y, props.get(core.$shadow--l2--y)) !default;
-$filter:       props.def(--o-popover--filter, drop-shadow(props.get(core.$shadow--x) props.get(core.$shadow--y) props.get(core.$shadow--blur) props.get(core.$theme, --shadow)), 'color') !default;
+$shadow-blur: props.def(--o-popover--shadow-blur, props.get(core.$shadow--l2--blur)) !default;
+$shadow-grow: props.def(--o-popover--shadow-grow, props.get(core.$shadow--l2--grow)) !default;
+$bg-color:      props.def(--o-popover--bg-color, props.get(core.$theme, --bg-l2), 'color') !default;
+$border-color:  props.def(--o-popover--border-color, props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border-strong), 'color') !default;
+$shadow-color:  props.def(--o-popover--shadow-color, props.get(core.$theme, --shadow), 'color') !default;
diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss
index aef6b92..8327a15 100644
--- a/src/objects/_radio.scss
+++ b/src/objects/_radio.scss
@@ -8,147 +8,147 @@
 @use 'radio.vars' as vars;
 @mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables('vars'));
-    @include bem.object('radio') {
+        @include bem.object('radio') {
-        position:       relative;
+                position:       relative;
-        display:        inline-block;
+                display:        inline-block;
-        padding-block:  props.get(vars.$pad-b);
+                padding-block:  props.get(vars.$pad-b);
-        padding-inline: props.get(vars.$pad-i);
+                padding-inline: props.get(vars.$pad-i);
-        margin-inline:
+                margin-inline:
-            calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset))
+                        calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset))
-            calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset));
+                        calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset));
    
-        @include bem.elem('circle') {
+                @include bem.elem('circle') {
-            display:            inline-block;
+                        display:            inline-block;
-            flex:               0 0 auto;
+                        flex:               0 0 auto;
-            inline-size:        props.get(vars.$diameter);
+                        inline-size:        props.get(vars.$diameter);
-            block-size:         props.get(vars.$diameter);
+                        block-size:         props.get(vars.$diameter);
-            margin-block-start: calc(.5em * props.get(core.$font--standard--line-height) - .5 * props.get(vars.$diameter) - props.get(vars.$key-focus--border-offset));
+                        margin-block-start: calc(.5em * props.get(core.$font--standard--line-height) - .5 * props.get(vars.$diameter) - props.get(vars.$key-focus--border-offset));
-            vertical-align:     top;
+                        vertical-align:     top;
-            background-color:   props.get(vars.$circle-border-color);
+                        background-color:   props.get(vars.$circle-border-color);
-            background-clip:    padding-box;
+                        background-clip:    padding-box;
-            border:             props.get(vars.$key-focus--border-offset) solid transparent;
+                        border:             props.get(vars.$key-focus--border-offset) solid transparent;
-            border-radius:      2em;
+                        border-radius:      2em;
    
-            &::after {
+                        &::after {
-                position:           relative;
+                                position:           relative;
-                inset-block-start:  props.get(vars.$border-width);
+                                inset-block-start:  props.get(vars.$border-width);
-                inset-inline-start: props.get(vars.$border-width);
+                                inset-inline-start: props.get(vars.$border-width);
-                display:            block;
+                                display:            block;
-                inline-size:        calc(props.get(vars.$diameter) - 2 * props.get(vars.$border-width));
+                                inline-size:        calc(props.get(vars.$diameter) - 2 * props.get(vars.$border-width));
-                block-size:         calc(props.get(vars.$diameter) - 2 * props.get(vars.$border-width));
+                                block-size:         calc(props.get(vars.$diameter) - 2 * props.get(vars.$border-width));
-                content:            '';
+                                content:            '';
-                background-color:   props.get(vars.$circle-bg-color);
+                                background-color:   props.get(vars.$circle-bg-color);
-                border-radius:      props.get(vars.$diameter);
+                                border-radius:      props.get(vars.$diameter);
-                transition:         transform .2s ease;
+                                transition:         transform .2s ease;
-            }
+                        }
-        }
+                }
    
-        @include bem.elem('label') {
+                @include bem.elem('label') {
-            margin-inline-start: calc(props.get(vars.$label-gap) - props.get(vars.$key-focus--border-offset));
+                        margin-inline-start: calc(props.get(vars.$label-gap) - props.get(vars.$key-focus--border-offset));
-        }
+                }
    
-        @include bem.elem('native') {
+                @include bem.elem('native') {
-            position:           absolute;
+                        position:           absolute;
-            inset-block-start:  0;
+                        inset-block-start:  0;
-            inset-inline-start: 0;
+                        inset-inline-start: 0;
-            z-index:            -1;
+                        z-index:            -1;
-            inline-size:        100%;
+                        inline-size:        100%;
-            block-size:         100%;
+                        block-size:         100%;
-            padding:            0;
+                        padding:            0;
-            margin:             0;
+                        margin:             0;
-            overflow:           hidden;
+                        overflow:           hidden;
-            appearance:         none;
+                        appearance:         none;
-            border-radius:      props.get(vars.$rounding);
+                        border-radius:      props.get(vars.$rounding);
    
-            &:hover,
+                        &:hover,
-            &:focus-visible {
+                        &:focus-visible {
-                @include bem.sibling-elem('label') {
+                                @include bem.sibling-elem('label') {
-                    color: props.get(vars.$hover--label-color);
+                                        color: props.get(vars.$hover--label-color);
-                }
+                                }
    
-                @include bem.sibling-elem('circle') {
+                                @include bem.sibling-elem('circle') {
-                    background-color: props.get(vars.$hover--circle-border-color);
+                                        background-color: props.get(vars.$hover--circle-border-color);
-                }
+                                }
-            }
+                        }
    
-            &:checked {
+                        &:checked {
-                @include bem.sibling-elem('circle') {
+                                @include bem.sibling-elem('circle') {
-                    &::after {
+                                        &::after {
-                        transform: scale(.44);
+                                                transform: scale(.44);
-                    }
+                                        }
-                }
+                                }
-            }
+                        }
    
-            &:disabled {
+                        &:disabled {
-                @include bem.sibling-elem('label') {
+                                @include bem.sibling-elem('label') {
-                    color: props.get(vars.$disabled--label-color);
+                                        color: props.get(vars.$disabled--label-color);
-                }
+                                }
    
-                @include bem.sibling-elem('circle') {
+                                @include bem.sibling-elem('circle') {
-                    background-color: props.get(vars.$disabled--circle-border-color);
+                                        background-color: props.get(vars.$disabled--circle-border-color);
    
-                    &::after {
+                                        &::after {
-                        background-color: props.get(vars.$disabled--circle-bg-color);
+                                                background-color: props.get(vars.$disabled--circle-bg-color);
-                    }
+                                        }
-                }
+                                }
-            }
+                        }
-            &:focus-visible {
+                        &:focus-visible {
-                @include bem.sibling-elem('label') {
+                                @include bem.sibling-elem('label') {
-                    color: props.get(vars.$key-focus--label-color);
+                                        color: props.get(vars.$key-focus--label-color);
-                }
+                                }
-                @include bem.sibling-elem('circle') {
+                                @include bem.sibling-elem('circle') {
-                    outline:    props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
+                                        outline:    props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
-                    box-shadow:
+                                        box-shadow:
-                        0
+                                                0
-                        0
+                                                0
-                        0
+                                                0
-                        calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
+                                                calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
-                        props.get(vars.$key-focus--outline-color);
+                                                props.get(vars.$key-focus--outline-color);
-                }
+                                }
-            }
+                        }
-        }
+                }
    
-        @include bem.modifier('standalone') {
+                @include bem.modifier('standalone') {
-            @include bem.elem('circle') {
+                        @include bem.elem('circle') {
-                margin-block-start: 0;
+                                margin-block-start: 0;
-            }
+                        }
-        }
+                }
    
-        @include bem.modifier('accent') {
+                @include bem.modifier('accent') {
-            @include bem.elem('native') {
+                        @include bem.elem('native') {
-                &:checked {
+                                &:checked {
-                    @include bem.sibling-elem('circle') {
+                                        @include bem.sibling-elem('circle') {
-                        background-color: props.get(vars.$accent--circle-border-color);
+                                                background-color: props.get(vars.$accent--circle-border-color);
-                    }
+                                        }
        
-                    &:hover,
+                                        &:hover,
-                    &:focus-visible {
+                                        &:focus-visible {
-                        @include bem.sibling-elem('circle') {
+                                                @include bem.sibling-elem('circle') {
-                            background-color: props.get(vars.$accent--hover--circle-border-color);
+                                                        background-color: props.get(vars.$accent--hover--circle-border-color);
-                        }
+                                                }
-                    }
+                                        }
-                }
+                                }
    
-                &:disabled {
+                                &:disabled {
-                    @include bem.sibling-elem('circle') {
+                                        @include bem.sibling-elem('circle') {
-                        background-color: props.get(vars.$disabled--circle-border-color);
+                                                background-color: props.get(vars.$disabled--circle-border-color);
        
-                        &::after {
+                                                &::after {
-                            background-color: props.get(vars.$disabled--circle-bg-color);
+                                                        background-color: props.get(vars.$disabled--circle-bg-color);
-                        }
+                                                }
-                    }
+                                        }
        
-                    &:checked {
+                                        &:checked {
-                        @include bem.sibling-elem('circle') {
+                                                @include bem.sibling-elem('circle') {
-                            background-color: props.get(vars.$disabled--circle-border-color);
+                                                        background-color: props.get(vars.$disabled--circle-border-color);
-                        }
+                                                }
-                    }
+                                        }
-                }
+                                }
-            }
+                        }
-        }
+                }
-    }
+        }
 }
diff --git a/src/objects/_radio.vars.scss b/src/objects/_radio.vars.scss
index 51ea581..b18ae2b 100644
--- a/src/objects/_radio.vars.scss
+++ b/src/objects/_radio.vars.scss
@@ -7,7 +7,7 @@ $label-gap:        props.def(--o-radio--label-gap, props.get(core.$size--125)) !
 $border-width:     props.def(--o-radio--border-width, props.get(core.$border-width--medium)) !default;
 $pad-i:            props.def(--o-radio--pad-i, props.get(core.$size--65)) !default;
 $pad-b:            props.def(--o-radio--pad-b, props.get(core.$size--65)) !default;
-$rounding:         props.def(--o-radio--rounding, props.get(core.$rounding)) !default;
+$rounding:         props.def(--o-radio--rounding, props.get(core.$rounding--sm)) !default;
 $spacing-sibling:  props.def(--o-radio--spacing-sibling, props.get(core.$size--300)) !default;
 $key-focus--border-width:  props.def(--o-radio--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
diff --git a/src/objects/_side-nav.scss b/src/objects/_side-nav.scss
index 6c60777..4a1feda 100644
--- a/src/objects/_side-nav.scss
+++ b/src/objects/_side-nav.scss
@@ -8,83 +8,83 @@
 @use 'side-nav.vars' as vars;
 @mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables('vars'));
-    @include bem.object('side-nav') {
+        @include bem.object('side-nav') {
-        display:        flex;
+                display:        flex;
-        flex-direction: column;
+                flex-direction: column;
-        gap:            props.get(vars.$spacing);
+                gap:            props.get(vars.$spacing);
-        @include bem.elem('header') {
+                @include bem.elem('header') {
-            padding-block:  props.get(vars.$item--pad-b);
+                        padding-block:  props.get(vars.$item--pad-b);
-            padding-inline: props.get(vars.$item--pad-i);
+                        padding-inline: props.get(vars.$item--pad-i);
-            font-size:      props.get(vars.$header--font-size);
+                        font-size:      props.get(vars.$header--font-size);
-            font-weight:    500;
+                        font-weight:    500;
-            color:          props.get(vars.$header--label-color);
+                        color:          props.get(vars.$header--label-color);
-            text-transform: uppercase;
+                        text-transform: uppercase;
-            letter-spacing: .5px;
+                        letter-spacing: .5px;
-            @include bem.next-twin-elem {
+                        @include bem.next-twin-elem {
-                margin-block-start: calc(props.get(vars.$separator) + props.get(vars.$spacing));
+                                margin-block-start: calc(props.get(vars.$separator) + props.get(vars.$spacing));
-            }
+                        }
-        }
+                }
-        @include bem.elem('item') {
+                @include bem.elem('item') {
-            padding-block:   props.get(vars.$item--pad-b);
+                        padding-block:   props.get(vars.$item--pad-b);
-            padding-inline:  props.get(vars.$item--pad-i);
+                        padding-inline:  props.get(vars.$item--pad-i);
-            margin:          calc(-1 * props.get(vars.$item--key-focus--border-offset));
+                        margin:          calc(-1 * props.get(vars.$item--key-focus--border-offset));
-            color:           props.get(vars.$item--disabled--label-color);
+                        color:           props.get(vars.$item--disabled--label-color);
-            background-clip: padding-box;
+                        background-clip: padding-box;
-            border:          props.get(vars.$item--key-focus--border-offset) solid transparent;
+                        border:          props.get(vars.$item--key-focus--border-offset) solid transparent;
-            border-radius:   calc(props.get(vars.$item--rounding) + props.get(vars.$item--key-focus--border-offset));
+                        border-radius:   calc(props.get(vars.$item--rounding) + props.get(vars.$item--key-focus--border-offset));
-            &:link,
+                        &:link,
-            &:visited,
+                        &:visited,
-            &:enabled {
+                        &:enabled {
-                color: currentColor;
+                                color: currentColor;
-                @include bem.multi('&:hover, &:focus-visible', 'is' 'selected') {
+                                @include bem.multi('&:hover, &:focus-visible', 'is' 'selected') {
-                    color:            props.get(vars.$item--hover--label-color);
+                                        color:            props.get(vars.$item--hover--label-color);
-                    background-color: props.get(vars.$item--hover--bg-color);
+                                        background-color: props.get(vars.$item--hover--bg-color);
-                }
+                                }
-                &:active {
+                                &:active {
-                    color:            props.get(vars.$item--active--label-color);
+                                        color:            props.get(vars.$item--active--label-color);
-                    background-color: props.get(vars.$item--active--bg-color);
+                                        background-color: props.get(vars.$item--active--bg-color);
-                }
+                                }
-                &:focus-visible {
+                                &:focus-visible {
-                    outline:    props.get(vars.$item--key-focus--border-color) solid props.get(vars.$item--key-focus--border-width);
+                                        outline:    props.get(vars.$item--key-focus--border-color) solid props.get(vars.$item--key-focus--border-width);
-                    box-shadow:
+                                        box-shadow:
-                        0
+                                                0
-                        0
+                                                0
-                        0
+                                                0
-                        calc(props.get(vars.$item--key-focus--border-width) + props.get(vars.$item--key-focus--outline-width))
+                                                calc(props.get(vars.$item--key-focus--border-width) + props.get(vars.$item--key-focus--outline-width))
-                        props.get(vars.$item--key-focus--outline-color);
+                                                props.get(vars.$item--key-focus--outline-color);
-                }
+                                }
-            }
+                        }
-            @include bem.next-elem('header') {
+                        @include bem.next-elem('header') {
-                margin-block-start: calc(props.get(vars.$separator) + props.get(vars.$spacing));
+                                margin-block-start: calc(props.get(vars.$separator) + props.get(vars.$spacing));
-            }
+                        }
-        }
+                }
-        @include bem.elem('header') {
+                @include bem.elem('header') {
-            &:link,
+                        &:link,
-            &:visited,
+                        &:visited,
-            &:enabled {
+                        &:enabled {
-                color: props.get(vars.$header--label-color);
+                                color: props.get(vars.$header--label-color);
-            }
+                        }
-        }
+                }
-        @include bem.elem('separator') {
+                @include bem.elem('separator') {
-            block-size: props.get(vars.$separator);
+                        block-size: props.get(vars.$separator);
-        }
+                }
-        @include bem.elem('icon-slot') {
+                @include bem.elem('icon-slot') {
-            display:         flex;
+                        display:         flex;
-            justify-content: center;
+                        justify-content: center;
-            inline-size:     props.get(icon.$size);
+                        inline-size:     props.get(icon.$size);
-        }
+                }
-    }
+        }
 }
diff --git a/src/objects/_side-nav.vars.scss b/src/objects/_side-nav.vars.scss
index 122dba6..7a2cfae 100644
--- a/src/objects/_side-nav.vars.scss
+++ b/src/objects/_side-nav.vars.scss
@@ -7,8 +7,8 @@ $header--font-size: props.def(--o-side-nav--header--font-size, props.get(core.$f
 $separator:         props.def(--o-side-nav--separator, props.get(core.$size--200)) !default;
 $item--pad-i:         props.def(--o-side-nav--item--pad-i, props.get(core.$size--150)) !default;
-$item--pad-b:         props.def(--o-side-nav--item--pad-b, props.get(core.$size--100)) !default;
+$item--pad-b:         props.def(--o-side-nav--item--pad-b, props.get(core.$size--75)) !default;
-$item--rounding:      props.def(--o-side-nav--item--rounding, props.get(core.$rounding)) !default;
+$item--rounding:      props.def(--o-side-nav--item--rounding, props.get(core.$rounding--sm)) !default;
 $item--key-focus--border-width:  props.def(--o-side-nav--item--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
 $item--key-focus--border-offset: props.def(--o-side-nav--item--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
diff --git a/src/objects/_status-indicator.scss b/src/objects/_status-indicator.scss
index 1fcdf02..4e4aa42 100644
--- a/src/objects/_status-indicator.scss
+++ b/src/objects/_status-indicator.scss
@@ -9,19 +9,19 @@
 @use 'status-indicator.vars' as vars;
 @mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables('vars'));
-    @include bem.object('status-indicator') {
+        @include bem.object('status-indicator') {
-        display:          inline-block;
+                display:          inline-block;
-        inline-size:      props.get(vars.$size);
+                inline-size:      props.get(vars.$size);
-        block-size:       props.get(vars.$size);
+                block-size:       props.get(vars.$size);
-        background-color: props.get(vars.$default);
+                background-color: props.get(vars.$default);
-        border-radius:    10em;
+                border-radius:    10em;
-        @each $theme in map.keys(props.get(vars.$themes)) {
+                @each $theme in map.keys(props.get(vars.$themes)) {
-            @include bem.is(string.slice($theme, 3)) {
+                        @include bem.is(string.slice($theme, 3)) {
-                background-color: props.get(vars.$themes, $theme);
+                                background-color: props.get(vars.$themes, $theme);
-            }
+                        }
-        }
+                }
-    }
+        }
 }
diff --git a/src/objects/_status-indicator.vars.scss b/src/objects/_status-indicator.vars.scss
index 6289145..55b446a 100644
--- a/src/objects/_status-indicator.vars.scss
+++ b/src/objects/_status-indicator.vars.scss
@@ -9,18 +9,18 @@ $default: props.def(--o-status-indicator--default, props.get(core.$theme, --bord
 $primary: props.def(--o-status-indicator--primary, props.get(core.$theme, --text), 'color') !default;
 $themes-config: (
-    accent:   --accent,
+        accent:   --accent,
-    positive: --positive,
+        positive: --positive,
-    negative: --negative,
+        negative: --negative,
-    warning:  --warning,
+        warning:  --warning,
 ) !default;
 $themes: props.def(--o-status-indicator, (), 'color');
 @each $theme, $key in $themes-config {
-    @if $theme != --base {
+        @if $theme != --base {
-        $themes: props.merge($themes, (
+                $themes: props.merge($themes, (
-            --#{$theme}: props.get(core.$theme, $key, --700),
+                        --#{$theme}: props.get(core.$theme, $key, --700),
-        ));
+                ));
-    }
+        }
 }
diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss
index 8612d31..48cec24 100644
--- a/src/objects/_switch.scss
+++ b/src/objects/_switch.scss
@@ -8,181 +8,181 @@
 @use 'switch.vars' as vars;
 @mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables('vars'));
-    @include bem.object('switch') {
+        @include bem.object('switch') {
-        position:       relative;
+                position:       relative;
-        display:        inline-block;
+                display:        inline-block;
-        padding-block:  props.get(vars.$pad-b);
+                padding-block:  props.get(vars.$pad-b);
-        padding-inline: props.get(vars.$pad-i);
+                padding-inline: props.get(vars.$pad-i);
-        margin-inline:
+                margin-inline:
-            calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset))
+                        calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset))
-            calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset));
+                        calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset));
    
-        @include bem.elem('indicator') {
+                @include bem.elem('indicator') {
-            display:            inline-block;
+                        display:            inline-block;
-            flex:               0 0 auto;
+                        flex:               0 0 auto;
-            inline-size:        props.get(vars.$inline-size);
+                        inline-size:        props.get(vars.$inline-size);
-            block-size:         props.get(vars.$block-size);
+                        block-size:         props.get(vars.$block-size);
-            margin-block-start: calc(.5em * props.get(core.$font--standard--line-height) - .5 * props.get(vars.$block-size) - props.get(vars.$key-focus--border-offset));
+                        margin-block-start: calc(.5em * props.get(core.$font--standard--line-height) - .5 * props.get(vars.$block-size) - props.get(vars.$key-focus--border-offset));
-            vertical-align:     top;
+                        vertical-align:     top;
-            background-color:   props.get(vars.$track-bg-color);
+                        background-color:   props.get(vars.$track-bg-color);
-            background-clip:    padding-box;
+                        background-clip:    padding-box;
-            border:             props.get(vars.$key-focus--border-offset) solid transparent;
+                        border:             props.get(vars.$key-focus--border-offset) solid transparent;
-            border-radius:      2em;
+                        border-radius:      2em;
-            transition:         background-color .2s ease;
+                        transition:         background-color .2s ease;
    
-            &::after {
+                        &::after {
-                display:          block;
+                                display:          block;
-                inline-size:      calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width));
+                                inline-size:      calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width));
-                block-size:       calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width));
+                                block-size:       calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width));
-                content:          '';
+                                content:          '';
-                background-color: props.get(vars.$handle-bg-color);
+                                background-color: props.get(vars.$handle-bg-color);
-                border:           props.get(vars.$border-width) solid props.get(vars.$handle-border-color);
+                                border:           props.get(vars.$border-width) solid props.get(vars.$handle-border-color);
-                border-radius:    props.get(vars.$inline-size);
+                                border-radius:    props.get(vars.$inline-size);
-                transition:       transform .2s ease;
+                                transition:       transform .2s ease;
-            }
+                        }
-        }
+                }
    
-        @include bem.elem('label') {
+                @include bem.elem('label') {
-            margin-inline-start: props.get(vars.$label-gap);
+                        margin-inline-start: props.get(vars.$label-gap);
-        }
+                }
    
-        @include bem.elem('native') {
+                @include bem.elem('native') {
-            position:           absolute;
+                        position:           absolute;
-            inset-block-start:  0;
+                        inset-block-start:  0;
-            inset-inline-start: 0;
+                        inset-inline-start: 0;
-            z-index:            -1;
+                        z-index:            -1;
-            inline-size:        100%;
+                        inline-size:        100%;
-            block-size:         100%;
+                        block-size:         100%;
-            padding:            0;
+                        padding:            0;
-            margin:             0;
+                        margin:             0;
-            overflow:           hidden;
+                        overflow:           hidden;
-            appearance:         none;
+                        appearance:         none;
-            border-radius:      props.get(vars.$rounding);
+                        border-radius:      props.get(vars.$rounding);
    
-            &:hover,
+                        &:hover,
-            &:focus-visible {
+                        &:focus-visible {
-                @include bem.sibling-elem('label') {
+                                @include bem.sibling-elem('label') {
-                    color: props.get(vars.$hover--label-color);
+                                        color: props.get(vars.$hover--label-color);
-                }
+                                }
    
-                @include bem.sibling-elem('indicator') {
+                                @include bem.sibling-elem('indicator') {
-                    &::after {
+                                        &::after {
-                        border-color: props.get(vars.$hover--handle-border-color);
+                                                border-color: props.get(vars.$hover--handle-border-color);
-                    }
+                                        }
-                }
+                                }
-            }
+                        }
    
-            &:checked {
+                        &:checked {
-                @include bem.sibling-elem('indicator') {
+                                @include bem.sibling-elem('indicator') {
-                    background-color: props.get(vars.$handle-border-color);
+                                        background-color: props.get(vars.$handle-border-color);
    
-                    &::after {
+                                        &::after {
-                        border-color: props.get(vars.$handle-border-color);
+                                                border-color: props.get(vars.$handle-border-color);
-                        transform:    translate(calc(props.get(vars.$inline-size) - props.get(vars.$block-size) + .5px), 0);
+                                                transform:    translate(calc(props.get(vars.$inline-size) - props.get(vars.$block-size) + .5px), 0);
-                    }
+                                        }
-                }
+                                }
    
-                &:hover,
+                                &:hover,
-                &:focus-visible {
+                                &:focus-visible {
-                    @include bem.sibling-elem('indicator') {
+                                        @include bem.sibling-elem('indicator') {
-                        background-color: props.get(vars.$hover--handle-border-color);
+                                                background-color: props.get(vars.$hover--handle-border-color);
-                        &::after {
+                                                &::after {
-                            border-color: props.get(vars.$hover--handle-border-color);
+                                                        border-color: props.get(vars.$hover--handle-border-color);
-                        }
+                                                }
-                    }
+                                        }
-                }
+                                }
-            }
+                        }
    
-            &:disabled {
+                        &:disabled {
-                @include bem.sibling-elem('label') {
+                                @include bem.sibling-elem('label') {
-                    color: props.get(vars.$disabled--label-color);
+                                        color: props.get(vars.$disabled--label-color);
-                }
+                                }
    
-                @include bem.sibling-elem('indicator') {
+                                @include bem.sibling-elem('indicator') {
-                    background-color: props.get(vars.$disabled--track-bg-color);
+                                        background-color: props.get(vars.$disabled--track-bg-color);
    
-                    &::after {
+                                        &::after {
-                        background-color: props.get(vars.$disabled--handle-bg-color);
+                                                background-color: props.get(vars.$disabled--handle-bg-color);
-                        border-color:     props.get(vars.$disabled--handle-border-color);
+                                                border-color:     props.get(vars.$disabled--handle-border-color);
-                    }
+                                        }
-                }
+                                }
    
-                &:checked {
+                                &:checked {
-                    @include bem.sibling-elem('indicator') {
+                                        @include bem.sibling-elem('indicator') {
-                        background-color: props.get(vars.$disabled--handle-border-color);
+                                                background-color: props.get(vars.$disabled--handle-border-color);
    
-                        &::after {
+                                                &::after {
-                            border-color: props.get(vars.$disabled--handle-border-color);
+                                                        border-color: props.get(vars.$disabled--handle-border-color);
-                        }
+                                                }
-                    }
+                                        }
-                }
+                                }
-            }
+                        }
    
-            &:focus-visible {
+                        &:focus-visible {
-                @include bem.sibling-elem('label') {
+                                @include bem.sibling-elem('label') {
-                    color: props.get(vars.$key-focus--label-color);
+                                        color: props.get(vars.$key-focus--label-color);
-                }
+                                }
-                @include bem.sibling-elem('indicator') {
+                                @include bem.sibling-elem('indicator') {
-                    outline:    props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
+                                        outline:    props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
-                    box-shadow:
+                                        box-shadow:
-                        0 
+                                                0 
-                        0
+                                                0
-                        0
+                                                0
-                        calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
+                                                calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
-                        props.get(vars.$key-focus--outline-color);
+                                                props.get(vars.$key-focus--outline-color);
-                }
+                                }
-            }
+                        }
-        }
+                }
    
-        @include bem.modifier('standalone') {
+                @include bem.modifier('standalone') {
-            @include bem.elem('indicator') {
+                        @include bem.elem('indicator') {
-                margin-block-start: 0;
+                                margin-block-start: 0;
-            }
+                        }
-        }
+                }
    
-        @include bem.modifier('accent') {
+                @include bem.modifier('accent') {
-            @include bem.elem('native') {
+                        @include bem.elem('native') {
-                &:checked {
+                                &:checked {
-                    @include bem.sibling-elem('indicator') {
+                                        @include bem.sibling-elem('indicator') {
-                        background-color: props.get(vars.$accent--handle-border-color);
+                                                background-color: props.get(vars.$accent--handle-border-color);
        
-                        &::after {
+                                                &::after {
-                            border-color: props.get(vars.$accent--handle-border-color);
+                                                        border-color: props.get(vars.$accent--handle-border-color);
-                        }
+                                                }
-                    }
+                                        }
        
-                    &:hover,
+                                        &:hover,
-                    &:focus-visible {
+                                        &:focus-visible {
-                        @include bem.sibling-elem('indicator') {
+                                                @include bem.sibling-elem('indicator') {
-                            background-color: props.get(vars.$accent--hover--handle-border-color);
+                                                        background-color: props.get(vars.$accent--hover--handle-border-color);
    
-                            &::after {
+                                                        &::after {
-                                border-color: props.get(vars.$accent--hover--handle-border-color);
+                                                                border-color: props.get(vars.$accent--hover--handle-border-color);
-                            }
+                                                        }
-                        }
+                                                }
-                    }
+                                        }
-                }
+                                }
        
-                &:disabled {
+                                &:disabled {
-                    @include bem.sibling-elem('label') {
+                                        @include bem.sibling-elem('label') {
-                        color: props.get(vars.$disabled--label-color);
+                                                color: props.get(vars.$disabled--label-color);
-                    }
+                                        }
-                    &:checked {
+                                        &:checked {
-                        @include bem.sibling-elem('indicator') {
+                                                @include bem.sibling-elem('indicator') {
-                            background-color: props.get(vars.$disabled--handle-border-color);
+                                                        background-color: props.get(vars.$disabled--handle-border-color);
-                            &::after {
+                                                        &::after {
-                                border-color: props.get(vars.$disabled--handle-border-color);
+                                                                border-color: props.get(vars.$disabled--handle-border-color);
-                            }
+                                                        }
-                        }
+                                                }
-                    }
+                                        }
-                }
+                                }
-            }
+                        }
-        }
+                }
-    }
+        }
 }
diff --git a/src/objects/_switch.vars.scss b/src/objects/_switch.vars.scss
index 85596af..10489a5 100644
--- a/src/objects/_switch.vars.scss
+++ b/src/objects/_switch.vars.scss
@@ -8,7 +8,7 @@ $label-gap:       props.def(--o-switch--label-gap, props.get(core.$size--125)) !
 $border-width:    props.def(--o-switch--border-width, props.get(core.$border-width--medium)) !default;
 $pad-i:           props.def(--o-switch--pad-i, props.get(core.$size--65)) !default;
 $pad-b:           props.def(--o-switch--pad-b, props.get(core.$size--65)) !default;
-$rounding:        props.def(--o-switch--rounding, props.get(core.$rounding)) !default;
+$rounding:        props.def(--o-switch--rounding, props.get(core.$rounding--sm)) !default;
 $spacing-sibling: props.def(--o-switch--spacing-sibling, props.get(core.$size--300)) !default;
 $key-focus--border-width:  props.def(--o-switch--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
diff --git a/src/objects/_tabbar.scss b/src/objects/_tabbar.scss
new file mode 100644
index 0000000..631c5c8
--- /dev/null
+++ b/src/objects/_tabbar.scss
@@ -0,0 +1,117 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:string';
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use '../props' as *;
+@forward 'tabbar.vars';
+@use 'tabbar.vars' as vars;
+@mixin styles {
+        @include materialize-at-root(meta.module-variables('vars'));
+        @include bem.object('tabbar') {
+                min-inline-size: 0;
+                block-size:      props.get(vars.$block-size);
+                overflow:        hidden;
+                &::after {
+                        display:            block;
+                        block-size:         props.get(vars.$border--width);
+                        margin-block-start: calc(-1 * props.get(vars.$border--width));
+                        content:            '';
+                        background-color:   props.get(vars.$railing--bg-color);
+                }
+                @include bem.elem('tabs') {
+                        display:         flex;
+                        block-size:      100%;
+                        overflow-inline: auto;
+                }
+                @include bem.modifier('quiet') {
+                        box-shadow: none;
+                }
+                @include bem.modifier('adapt') {
+                        block-size: 100%;
+                }
+                
+                @include bem.elem('tab') {
+                        position:       relative;
+                        display:        flex;
+                        align-items:    center;
+                        padding-inline: calc(.5 * props.get(vars.$spacing));
+                        margin-inline:  calc(-.5 * props.get(vars.$spacing));
+                        color:          props.get(vars.$tab--text-color);
+                        white-space:    nowrap;
+                        &::before {
+                                position:          absolute;
+                                inset-block-start: 50%;
+                                inset-inline:      calc(-1 * props.get(vars.$tab--pad-i) + .5 * props.get(vars.$spacing));
+                                z-index:           -10;
+                                block-size:        1.5em;
+                                content:           '';
+                                border-radius:     props.get(vars.$rounding);
+                                transform:         translateY(-50%);
+                        }
+                        &::after {
+                                position:         absolute;
+                                inset-block-end:  0;
+                                inset-inline:     calc(.5 * props.get(vars.$spacing));
+                                z-index:          10;
+                                display:          none;
+                                block-size:       props.get(vars.$indicator--width);
+                                content:          '';
+                                background-color: props.get(vars.$tab--selected--text-color);
+                        }
+                        &:link,
+                        &:visited {
+                                &:hover,
+                                &:active,
+                                &:focus-visible {
+                                        color: props.get(vars.$tab--selected--text-color);
+                                }
+                                &:focus-visible {
+                                        &::before {
+                                                color:           props.get(vars.$key-focus--text-color);
+                                                text-decoration: none;
+                                                outline:         props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
+                                                box-shadow: 0 0 0
+                                                        calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
+                                                        props.get(vars.$key-focus--outline-color);
+                                        }
+                                }
+                        }
+                        @include bem.next-twin-elem {
+                                margin-inline-start: calc(.5 * props.get(vars.$spacing));
+                        }
+                        @include bem.is('selected') {
+                                color: props.get(vars.$tab--selected--text-color);
+                
+                                &::after {
+                                        display: block;
+                                }
+                        }
+                }
+                @include bem.modifier('accent') {
+                        @include bem.elem('tab') {
+                                &::after {
+                                        background-color: props.get(vars.$tab--accent--text-color);
+                                }
+                                @include bem.is('selected') {
+                                        color: props.get(vars.$tab--accent--text-color);
+                                }
+                        }
+                }
+        }
+}
diff --git a/src/objects/_tabbar.vars.scss b/src/objects/_tabbar.vars.scss
new file mode 100644
index 0000000..3cf01fd
--- /dev/null
+++ b/src/objects/_tabbar.vars.scss
@@ -0,0 +1,26 @@
+@use 'sass:map';
+@use 'sass:string';
+@use 'iro-sass/src/props';
+@use '../core.vars' as core;
+$block-size: props.def(--o-tabbar--block-size, props.get(core.$size--700)) !default;
+$rounding:   props.def(--o-tabbar--rounding, props.get(core.$rounding--sm)) !default;
+$spacing:    props.def(--o-tabbar--spacing, props.get(core.$size--400)) !default;
+$tab--pad-i: props.def(--o-tabbar--tab--pad-i, props.get(core.$size--50)) !default;
+$border--width:    props.def(--o-tabbar--border--width, props.get(core.$border-width--thin)) !default;
+$indicator--width: props.def(--o-tabbar--indicator--width, props.get(core.$border-width--medium)) !default; 
+$key-focus--border-width:  props.def(--o-tabbar--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
+$key-focus--border-offset: props.def(--o-tabbar--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
+$key-focus--outline-width: props.def(--o-tabbar--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
+$tab--text-color:           props.def(--o-tabbar--tab--text-color, props.get(core.$theme, --text-mute), 'color') !default;
+$tab--selected--text-color: props.def(--o-tabbar--tab--selected--text-color, props.get(core.$theme, --heading), 'color') !default;
+$tab--accent--text-color:   props.def(--o-tabbar--tab--accent--text-color, props.get(core.$theme, --accent, --1100), 'color') !default;
+$railing--bg-color: props.def(--o-tabbar--railing--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
+$key-focus--text-color:    props.def(--o-tabbar--key-focus--text-color, props.get(core.$theme, --focus, --text), 'color') !default;
+$key-focus--border-color:  props.def(--o-tabbar--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
+$key-focus--outline-color: props.def(--o-tabbar--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default;
diff --git a/src/objects/_table.scss b/src/objects/_table.scss
index 2b63737..9e4891d 100644
--- a/src/objects/_table.scss
+++ b/src/objects/_table.scss
@@ -7,141 +7,141 @@
 @use 'table.vars' as vars;
 @mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables('vars'));
-    @include bem.object('table') {
+        @include bem.object('table') {
-        border-spacing:  0;
+                border-spacing:  0;
-        border-collapse: separate;
+                border-collapse: separate;
-        @include bem.modifier('fixed') {
+                @include bem.modifier('fixed') {
-            table-layout: fixed;
+                        table-layout: fixed;
-        }
+                }
-        @include bem.elem('head-cell') {
+                @include bem.elem('head-cell') {
-            padding-block:  props.get(vars.$pad-b);
+                        padding-block:  props.get(vars.$pad-b);
-            padding-inline: props.get(vars.$pad-i);
+                        padding-inline: props.get(vars.$pad-i);
-            font-family:    props.get(vars.$heading--font-family);
+                        font-family:    props.get(vars.$heading--font-family);
-            font-size:      props.get(vars.$heading--font-size);
+                        font-size:      props.get(vars.$heading--font-size);
-            font-weight:    props.get(vars.$heading--font-weight);
+                        font-weight:    props.get(vars.$heading--font-weight);
-            color:          props.get(vars.$heading-color);
+                        color:          props.get(vars.$heading-color);
-            text-align:     start;
+                        text-align:     start;
-            text-transform: props.get(vars.$heading--text-transform);
+                        text-transform: props.get(vars.$heading--text-transform);
-            letter-spacing: props.get(vars.$heading--letter-spacing);
+                        letter-spacing: props.get(vars.$heading--letter-spacing);
-        }
+                }
-        @include bem.elem('cell') {
+                @include bem.elem('cell') {
-            padding-block:            props.get(vars.$pad-b);
+                        padding-block:            props.get(vars.$pad-b);
-            padding-inline:           props.get(vars.$pad-i);
+                        padding-inline:           props.get(vars.$pad-i);
-            border-color:             props.get(vars.$border-color);
+                        border-color:             props.get(vars.$border-color);
-            border-style:             solid;
+                        border-style:             solid;
-            border-width:             0;
+                        border-width:             0;
-            border-block-start-width: props.get(vars.$border-width);
+                        border-block-start-width: props.get(vars.$border-width);
-            @include bem.modifier('divider') {
+                        @include bem.modifier('divider') {
-                border-inline-end-width: props.get(vars.$border-width);
+                                border-inline-end-width: props.get(vars.$border-width);
-            }
+                        }
-        }
+                }
-        @include bem.elem('row') {
+                @include bem.elem('row') {
-            &:last-child {
+                        &:last-child {
-                @include bem.elem('cell') {
+                                @include bem.elem('cell') {
-                    border-block-end-width: props.get(vars.$border-width);
+                                        border-block-end-width: props.get(vars.$border-width);
-                }
+                                }
-            }
+                        }
-        }
+                }
-        @include bem.modifier('flush') {
+                @include bem.modifier('flush') {
-            @include bem.elem('head-cell', 'cell') {
+                        @include bem.elem('head-cell', 'cell') {
-                &:first-child {
+                                &:first-child {
-                    padding-inline-start: 0;
+                                        padding-inline-start: 0;
-                }
+                                }
-                &:last-child {
+                                &:last-child {
-                    padding-inline-end: 0;
+                                        padding-inline-end: 0;
-                }
+                                }
-            }
+                        }
-        }
+                }
-        @include bem.modifier('box') {
+                @include bem.modifier('box') {
-            @include bem.elem('cell') {
+                        @include bem.elem('cell') {
-                background-color: props.get(vars.$box--bg-color);
+                                background-color: props.get(vars.$box--bg-color);
            
-                &:first-child {
+                                &:first-child {
-                    border-inline-start-width: props.get(vars.$border-width);
+                                        border-inline-start-width: props.get(vars.$border-width);
-                }
+                                }
            
-                &:last-child {
+                                &:last-child {
-                    border-inline-end-width: props.get(vars.$border-width);
+                                        border-inline-end-width: props.get(vars.$border-width);
-                }
+                                }
-            }
+                        }
    
-            @include bem.elem('row') {
+                        @include bem.elem('row') {
-                &:first-child {
+                                &:first-child {
-                    @include bem.elem('cell') {
+                                        @include bem.elem('cell') {
-                        &:first-child {
+                                                &:first-child {
-                            border-start-start-radius: props.get(vars.$rounding);
+                                                        border-start-start-radius: props.get(vars.$rounding);
-                        }
+                                                }
            
-                        &:last-child {
+                                                &:last-child {
-                            border-start-end-radius: props.get(vars.$rounding);
+                                                        border-start-end-radius: props.get(vars.$rounding);
-                        }
+                                                }
-                    }
+                                        }
-                }
+                                }
    
-                &:last-child {
+                                &:last-child {
-                    @include bem.elem('cell') {
+                                        @include bem.elem('cell') {
-                        &:first-child {
+                                                &:first-child {
-                            border-end-start-radius: props.get(vars.$rounding);
+                                                        border-end-start-radius: props.get(vars.$rounding);
-                        }
+                                                }
            
-                        &:last-child {
+                                                &:last-child {
-                            border-end-end-radius: props.get(vars.$rounding);
+                                                        border-end-end-radius: props.get(vars.$rounding);
-                        }
+                                                }
-                    }
+                                        }
-                }
+                                }
-            }
+                        }
-        }
+                }
-        @include bem.modifier('interactive') {
+                @include bem.modifier('interactive') {
-            @include bem.elem('row') {
+                        @include bem.elem('row') {
-                @include bem.elem('cell') {
+                                @include bem.elem('cell') {
-                    cursor: pointer;
+                                        cursor: pointer;
-                }
+                                }
-                &:hover {
+                                &:hover {
-                    @include bem.elem('cell') {
+                                        @include bem.elem('cell') {
-                        background-color: props.get(vars.$hover--bg-color);
+                                                background-color: props.get(vars.$hover--bg-color);
-                    }
+                                        }
-                }
+                                }
    
-                &:active {
+                                &:active {
-                    @include bem.elem('cell') {
+                                        @include bem.elem('cell') {
-                        background-color: props.get(vars.$active--bg-color);
+                                                background-color: props.get(vars.$active--bg-color);
-                    }
+                                        }
-                }
+                                }
-            }
+                        }
-            @include bem.modifier('box') {
+                        @include bem.modifier('box') {
-                @include bem.elem('row') {
+                                @include bem.elem('row') {
-                    &:hover {
+                                        &:hover {
-                        @include bem.elem('cell') {
+                                                @include bem.elem('cell') {
-                            background-color: props.get(vars.$box--hover--bg-color);
+                                                        background-color: props.get(vars.$box--hover--bg-color);
-                        }
+                                                }
-                    }
+                                        }
        
-                    &:active {
+                                        &:active {
-                        @include bem.elem('cell') {
+                                                @include bem.elem('cell') {
-                            background-color: props.get(vars.$box--active--bg-color);
+                                                        background-color: props.get(vars.$box--active--bg-color);
-                        }
+                                                }
-                    }
+                                        }
-                }
+                                }
-            }
+                        }
-        }
+                }
-        @include bem.modifier('sm') {
+                @include bem.modifier('sm') {
-            @include bem.elem('head-cell', 'cell') {
+                        @include bem.elem('head-cell', 'cell') {
-                padding-block: props.get(vars.$pad-b--sm);
+                                padding-block: props.get(vars.$pad-b--sm);
-            }
+                        }
-        }
+                }
-    }
+        }
 }
diff --git a/src/objects/_table.vars.scss b/src/objects/_table.vars.scss
index d1d53d7..b8d8093 100644
--- a/src/objects/_table.vars.scss
+++ b/src/objects/_table.vars.scss
@@ -4,7 +4,7 @@
 $pad-i:        props.def(--o-table--pad-i, props.get(core.$size--175)) !default;
 $pad-b:        props.def(--o-table--pad-b, props.get(core.$size--125)) !default;
-$rounding:     props.def(--o-table--rounding, props.get(core.$rounding)) !default;
+$rounding:     props.def(--o-table--rounding, props.get(core.$rounding--sm)) !default;
 $border-width: props.def(--o-table--border-width, props.get(core.$border-width--thin)) !default;
 $heading--font-family:    props.def(--o-table--heading--font-family, props.get(core.$font--standard--family)) !default;
diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss
index 6c0e7d2..b89e148 100644
--- a/src/objects/_text-field.scss
+++ b/src/objects/_text-field.scss
@@ -7,159 +7,181 @@
 @use 'text-field.vars' as vars;
 @mixin -invalid {
-    $focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width));
+        $focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width));
    
-    @include bem.sibling-elem('bg') {
+        @include bem.sibling-elem('bg') {
-        inset-block:   $focus-border-offset;
+                inset-block:   $focus-border-offset;
-        inset-inline:  $focus-border-offset;
+                inset-inline:  $focus-border-offset;
-        border:        props.get(vars.$focus--border-width) solid props.get(vars.$error--border-color);
+                border:        props.get(vars.$focus--border-width) solid props.get(vars.$error--border-color);
-        border-radius: calc(props.get(vars.$rounding) - $focus-border-offset);
+                border-radius: calc(props.get(vars.$rounding) - $focus-border-offset);
-    }
+        }
-    &:hover {
+        &:hover {
-        @include bem.sibling-elem('bg') {
+                @include bem.sibling-elem('bg') {
-            border-color: props.get(vars.$error--hover--border-color);
+                        border-color: props.get(vars.$error--hover--border-color);
-        }
+                }
-    }
+        }
-    &:focus {
+        &:focus {
-        @include bem.sibling-elem('bg') {
+                @include bem.sibling-elem('bg') {
-            border-color: props.get(vars.$error--focus--border-color);
+                        border-color: props.get(vars.$error--focus--border-color);
-        }
+                }
-    }
+        }
 }
 @mixin -keyboard-focus {
-    @include bem.sibling-elem('bg') {
+        @include bem.sibling-elem('bg') {
-        border-color:   props.get(vars.$key-focus--border-color);
+                outline:        props.get(vars.$key-focus--outline-color) solid props.get(vars.$key-focus--border-width);
-        outline:        props.get(vars.$key-focus--outline-color) solid props.get(vars.$key-focus--border-width);
+                border-color:   props.get(vars.$key-focus--border-color);
-        //outline-offset: props.get(vars.$focus --border);
+                //outline-offset: props.get(vars.$focus --border);
-    }
+        }
 }
 @mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables('vars'));
-    @include bem.object('text-field') {
+        @include bem.object('text-field') {
-        $focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width));
+                $focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width));
        
-        position:         relative;
+                position:         relative;
-        min-inline-size:  0;
+                min-inline-size:  0;
-        background-color: props.get(vars.$bg-color);
+                background-color: props.get(vars.$bg-color);
-        border-radius:    props.get(vars.$rounding);
+                border-radius:    props.get(vars.$rounding);
-        @include bem.elem('bg') {
+                @include bem.elem('bg') {
-            position:       absolute;
+                        position:       absolute;
-            inset-block:    0;
+                        inset-block:    0;
-            inset-inline:   0;
+                        inset-inline:   0;
-            display:        block;
+                        display:        block;
-            pointer-events: none;
+                        pointer-events: none;
-            border:         props.get(vars.$border-width) solid props.get(vars.$border-color);
+                        border:         props.get(vars.$border-width) solid props.get(vars.$border-color);
-            border-radius:  props.get(vars.$rounding);
+                        border-radius:  props.get(vars.$rounding);
-        }
+                }
-        @include bem.elem('native') {
+                @include bem.elem('native') {
-            box-sizing:       border-box;
+                        box-sizing:       border-box;
-            inline-size:      100%;
+                        inline-size:      100%;
-            padding-block:    calc(props.get(vars.$pad-b) - .5em * (props.get(vars.$line-height) - 1));
+                        padding-block:    calc(props.get(vars.$pad-b) - .5em * (props.get(vars.$line-height) - 1));
-            padding-inline:   props.get(vars.$pad-i);
+                        padding-inline:   props.get(vars.$pad-i);
-            font:             inherit;
+                        font:             inherit;
-            line-height:      props.get(vars.$line-height);
+                        line-height:      props.get(vars.$line-height);
-            color:            props.get(vars.$text-color);
+                        color:            props.get(vars.$text-color);
-            appearance:       none;
+                        appearance:       none;
-            resize:           none;
+                        resize:           none;
-            background-color: transparent;
+                        background-color: transparent;
-            border:           1px solid transparent;
+                        border:           1px solid transparent;
-            &::placeholder {
+                        &::placeholder {
-                font-style: italic;
+                                font-style: italic;
-                color:      props.get(vars.$placeholder-color);
+                                color:      props.get(vars.$placeholder-color);
-                opacity:    1;
+                                opacity:    1;
-            }
+                        }
-            &:hover {
+                        &:hover {
-                @include bem.sibling-elem('bg') {
+                                @include bem.sibling-elem('bg') {
-                    border-color: props.get(vars.$hover--border-color);
+                                        border-color: props.get(vars.$hover--border-color);
-                }
+                                }
-            }
+                        }
-            &:focus {
+                        &:focus {
-                outline: 0;
+                                outline: 0;
-                @include bem.sibling-elem('bg') {
+                                @include bem.sibling-elem('bg') {
-                    inset-block:   $focus-border-offset;
+                                        inset-block:   $focus-border-offset;
-                    inset-inline:  $focus-border-offset;
+                                        inset-inline:  $focus-border-offset;
-                    border:        props.get(vars.$focus--border-width) solid props.get(vars.$focus--border-color);
+                                        border:        props.get(vars.$focus--border-width) solid props.get(vars.$focus--border-color);
-                    border-radius: calc(props.get(vars.$rounding) - $focus-border-offset);
+                                        border-radius: calc(props.get(vars.$rounding) - $focus-border-offset);
-                }
+                                }
-            }
+                        }
-            &:invalid {
+                        &:invalid {
-                @include -invalid;
+                                @include -invalid;
-            }
+                        }
-            &:focus-visible,
+                        &:focus-visible,
-            &:invalid:focus-visible {
+                        &:invalid:focus-visible {
-                @include -keyboard-focus;
+                                @include -keyboard-focus;
-            }
+                        }
-        }
+                }
-        @include bem.modifier('extended') {
+                @include bem.modifier('extended') {
-            padding: props.get(vars.$extended--pad);
+                        padding: props.get(vars.$extended--pad);
-            @include bem.multi('&', 'elem' 'bg') {
+                        @include bem.multi('&', 'elem' 'bg') {
-                border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad));
+                                border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad));
-            }
+                        }
-            @include bem.elem('native') {
+                        @include bem.elem('native') {
-                &:focus {
+                                &:focus {
-                    @include bem.sibling-elem('bg') {
+                                        @include bem.sibling-elem('bg') {
-                        border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad) - $focus-border-offset);
+                                                border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad) - $focus-border-offset);
-                    }
+                                        }
-                }
+                                }
-            }
+                        }
-        }
+                }
-        @include bem.is('invalid') {
+                @include bem.modifier('pill') {
-            @include bem.elem('native') {
+                        @include bem.multi('&', 'elem' 'bg') {
-                @include -invalid;
+                                border-radius: 100em;
+                        }
-                &:focus-visible {
+                        @include bem.elem('native') {
-                    @include -keyboard-focus;
+                                padding-inline: props.get(vars.$pad-i-pill);
-                }
-            }
-        }
-        @include bem.is('disabled') {
+                                &:focus {
-            background-color: props.get(vars.$disabled--bg-color);
+                                        @include bem.sibling-elem('bg') {
+                                                border-radius: 100em;
+                                        }
+                                }
+                        }
-            @include bem.elem('native') {
+                        @include bem.modifier('extended') {
-                color: props.get(vars.$disabled--text-color);
+                                @include bem.elem('native') {
+                                        padding-inline: props.get(vars.$pad-i);
+                                }
+                        }
+                }
-                &::placeholder {
+                @include bem.is('invalid') {
-                    color: props.get(vars.$disabled--placeholder-color);
+                        @include bem.elem('native') {
-                }
+                                @include -invalid;
-            }
-            @include bem.elem('bg') {
+                                &:focus-visible {
-                border-color: props.get(vars.$disabled--border-color);
+                                        @include -keyboard-focus;
-            }
+                                }
+                        }
+                }
-            @include bem.is('invalid') {
+                @include bem.is('disabled') {
-                @include bem.elem('native') {
+                        background-color: props.get(vars.$disabled--bg-color);
-                    @include bem.sibling-elem('bg') {
-                        border-color: props.get(vars.$disabled--border-color);
-                    }
-                }
-            }
-            @include bem.elem('native') {
+                        @include bem.elem('native') {
-                &:invalid {
+                                color: props.get(vars.$disabled--text-color);
-                    @include bem.sibling-elem('bg') {
-                        border-color: props.get(vars.$disabled--border-color);
+                                &::placeholder {
-                    }
+                                        color: props.get(vars.$disabled--placeholder-color);
-                }
+                                }
-            }
+                        }
-        }
-    }
+                        @include bem.elem('bg') {
+                                border-color: props.get(vars.$disabled--border-color);
+                        }
+                        @include bem.is('invalid') {
+                                @include bem.elem('native') {
+                                        @include bem.sibling-elem('bg') {
+                                                border-color: props.get(vars.$disabled--border-color);
+                                        }
+                                }
+                        }
+                        @include bem.elem('native') {
+                                &:invalid {
+                                        @include bem.sibling-elem('bg') {
+                                                border-color: props.get(vars.$disabled--border-color);
+                                        }
+                                }
+                        }
+                }
+        }
 }
diff --git a/src/objects/_text-field.vars.scss b/src/objects/_text-field.vars.scss
index 833eacb..51099d8 100644
--- a/src/objects/_text-field.vars.scss
+++ b/src/objects/_text-field.vars.scss
@@ -4,9 +4,10 @@
 $line-height:  props.def(--o-text-field--line-height, 1.4) !default;
 $pad-i:        props.def(--o-text-field--pad-i, props.get(core.$size--125)) !default;
+$pad-i-pill:   props.def(--o-text-field--pad-i-pill, props.get(core.$size--175)) !default;
 $pad-b:        props.def(--o-text-field--pad-b, props.get(core.$size--125)) !default;
 $border-width: props.def(--o-text-field--border-width, props.get(core.$border-width--thin)) !default;
-$rounding:     props.def(--o-text-field--rounding, props.get(core.$rounding)) !default;
+$rounding:     props.def(--o-text-field--rounding, props.get(core.$rounding--sm)) !default;
 $extended--pad: props.def(--o-text-field--extended--pad, props.get(core.$size--50)) !default;
diff --git a/src/objects/_thumbnail.scss b/src/objects/_thumbnail.scss
index 73a8cb0..60a98af 100644
--- a/src/objects/_thumbnail.scss
+++ b/src/objects/_thumbnail.scss
@@ -9,96 +9,96 @@
 @use 'thumbnail.vars' as vars;
 @mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables('vars'));
-    @include bem.object('thumbnail') {
+        @include bem.object('thumbnail') {
-        position:       relative;
+                position:       relative;
-        display:        block;
+                display:        block;
-        flex:           0 0 auto;
+                flex:           0 0 auto;
-        inline-size:    props.get(vars.$size);
+                inline-size:    props.get(vars.$size);
-        block-size:     props.get(vars.$size);
+                block-size:     props.get(vars.$size);
-        overflow:       hidden;
+                overflow:       hidden;
-        border-radius:  props.get(vars.$rounding);
+                outline:        props.get(vars.$border-color) solid props.get(vars.$border-width);
-        outline:        props.get(vars.$border-color) solid props.get(vars.$border-width);
+                outline-offset: calc(-1 * props.get(vars.$border-width));
-        outline-offset: calc(-1 * props.get(vars.$border-width));
+                border-radius:  props.get(vars.$rounding);
-        opacity:       .75;
+                opacity:       .75;
-        &:hover,
+                &:hover,
-        &:active,
+                &:active,
-        &:focus-visible {
+                &:focus-visible {
-            outline-color: props.get(vars.$hover--border-color);
+                        outline-color: props.get(vars.$hover--border-color);
-            opacity:       1;
+                        opacity:       1;
-        }
+                }
-        @include bem.is('selected') {
+                @include bem.is('selected') {
-            $focus-border-offset: calc(-1 * props.get(vars.$selected--border-width));
+                        $focus-border-offset: calc(-1 * props.get(vars.$selected--border-width));
-            margin:        $focus-border-offset;
+                        margin:        $focus-border-offset;
-            border:        props.get(vars.$selected--border-width) solid props.get(vars.$selected--border-color);
+                        outline:       none;
-            border-radius: calc(props.get(vars.$rounding) - $focus-border-offset);
+                        border:        props.get(vars.$selected--border-width) solid props.get(vars.$selected--border-color);
-            outline:       none;
+                        border-radius: calc(props.get(vars.$rounding) - $focus-border-offset);
-            opacity:       1;
+                        opacity:       1;
-        }
+                }
-        @include bem.elem('image') {
+                @include bem.elem('image') {
-            position:           absolute;
+                        position:           absolute;
-            inset-block-start:  0;
+                        inset-block-start:  0;
-            inset-inline-start: 0;
+                        inset-inline-start: 0;
-            display:            block;
+                        display:            block;
-            inline-size:        100%;
+                        inline-size:        100%;
-            block-size:         100%;
+                        block-size:         100%;
-            object-fit:         cover;
+                        object-fit:         cover;
-            object-position:    center center;
+                        object-position:    center center;
-        }
+                }
-        @include bem.elem('icon') {
+                @include bem.elem('icon') {
-            position:           absolute;
+                        position:           absolute;
-            inset-block-start:  50%;
+                        inset-block-start:  50%;
-            inset-inline-start: 50%;
+                        inset-inline-start: 50%;
-            transform:          translate(-50%, -50%);
+                        transform:          translate(-50%, -50%);
-        }
+                }
-        &:focus-visible {
+                &:focus-visible {
-            $focus-border-offset: calc(-1 * props.get(vars.$key-focus--border-offset));
+                        $focus-border-offset: calc(-1 * props.get(vars.$key-focus--border-offset));
-            margin:         $focus-border-offset;
+                        margin:         $focus-border-offset;
-            border:         props.get(vars.$key-focus--border-offset) solid transparent;
+                        outline:        props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
-            border-radius:  calc(props.get(vars.$rounding) - $focus-border-offset);
+                        outline-offset: 0;
-            outline:        props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
+                        border:         props.get(vars.$key-focus--border-offset) solid transparent;
-            outline-offset: 0;
+                        border-radius:  calc(props.get(vars.$rounding) - $focus-border-offset);
-            box-shadow:
+                        box-shadow:
-                0
+                                0
-                0
+                                0
-                0
+                                0
-                calc(props.get(vars.$key-focus--outline-width) + props.get(vars.$key-focus--border-width))
+                                calc(props.get(vars.$key-focus--outline-width) + props.get(vars.$key-focus--border-width))
-                props.get(vars.$key-focus--outline-color);
+                                props.get(vars.$key-focus--outline-color);
-        }
+                }
-        @each $theme in map.keys(props.get(vars.$static-themes)) {
+                @each $theme in map.keys(props.get(vars.$static-themes)) {
-            @include bem.modifier(string.slice($theme, 3)) {
+                        @include bem.modifier(string.slice($theme, 3)) {
-                outline-color: props.get(vars.$static-themes, $theme, --border);
+                                outline-color: props.get(vars.$static-themes, $theme, --border);
-                &:hover,
+                                &:hover,
-                &:active,
+                                &:active,
-                &:focus-visible {
+                                &:focus-visible {
-                    outline-color: props.get(vars.$static-themes, $theme, --hover, --border);
+                                        outline-color: props.get(vars.$static-themes, $theme, --hover, --border);
-                }
+                                }
    
-                @include bem.is('selected') {
+                                @include bem.is('selected') {
-                    border-color: props.get(vars.$static-themes, $theme, --selected, --border);
+                                        border-color: props.get(vars.$static-themes, $theme, --selected, --border);
-                }
+                                }
-                &:focus-visible {
+                                &:focus-visible {
-                    border-color:  transparent;
+                                        outline-color: props.get(vars.$static-themes, $theme, --key-focus, --border);
-                    outline-color: props.get(vars.$static-themes, $theme, --key-focus, --border);
+                                        border-color:  transparent;
-                    box-shadow: 
+                                        box-shadow: 
-                        0
+                                                0
-                        0
+                                                0
-                        0
+                                                0
-                        calc(props.get(vars.$key-focus--outline-width) + props.get(vars.$key-focus--border-width))
+                                                calc(props.get(vars.$key-focus--outline-width) + props.get(vars.$key-focus--border-width))
-                        props.get(vars.$static-themes, $theme, --key-focus, --outline);
+                                                props.get(vars.$static-themes, $theme, --key-focus, --outline);
-                }
+                                }
-            }
+                        }
-        }
+                }
-    }
+        }
 }
diff --git a/src/objects/_thumbnail.vars.scss b/src/objects/_thumbnail.vars.scss
index ba8cebe..e49e52e 100644
--- a/src/objects/_thumbnail.vars.scss
+++ b/src/objects/_thumbnail.vars.scss
@@ -4,7 +4,7 @@
 @use '../core.vars' as core;
 $size:         props.def(--o-thumbnail--size, props.get(core.$size--700)) !default;
-$rounding:     props.def(--o-thumbnail--rounding, props.get(core.$rounding)) !default;
+$rounding:     props.def(--o-thumbnail--rounding, props.get(core.$rounding--sm)) !default;
 $spacing:      props.def(--o-thumbnail--spacing, props.get(core.$size--100)) !default;
 $border-width: props.def(--o-thumbnail--border-width, props.get(core.$border-width--thin)) !default;
@@ -28,24 +28,24 @@ $size--md: props.def(--o-thumbnail--size, props.get(core.$size--600), 'md') !def
 $static-themes: props.def(--o-thumbnail, (), 'color');
 @each $theme in map.keys(props.get(core.$transparent-colors)) {
-    $thumbnail-theme: --static-#{string.slice($theme, 3)};
+        $thumbnail-theme: --static-#{string.slice($theme, 3)};
-    $static-themes: props.merge($static-themes, (
+        $static-themes: props.merge($static-themes, (
-        $thumbnail-theme: (
+                $thumbnail-theme: (
-            --border: props.get(core.$transparent-colors, $theme, --400),
+                        --border: props.get(core.$transparent-colors, $theme, --400),
    
-            --hover: (
+                        --hover: (
-                --border: props.get(core.$transparent-colors, $theme, --500),
+                                --border: props.get(core.$transparent-colors, $theme, --500),
-            ),
+                        ),
            
-            --selected: (
+                        --selected: (
-                --border: props.get(core.$transparent-colors, $theme, --900),
+                                --border: props.get(core.$transparent-colors, $theme, --900),
-            ),
+                        ),
-            --key-focus: (
+                        --key-focus: (
-                --border:  props.get(core.$transparent-colors, $theme, --900),
+                                --border:  props.get(core.$transparent-colors, $theme, --900),
-                --outline: props.get(core.$transparent-colors, $theme, --300),
+                                --outline: props.get(core.$transparent-colors, $theme, --300),
-            ),
+                        ),
-        )
+                )
-    ));
+        ));
 }
diff --git a/src/scopes/_blockquotes.scss b/src/scopes/_blockquotes.scss
index d488860..a99add8 100644
--- a/src/scopes/_blockquotes.scss
+++ b/src/scopes/_blockquotes.scss
@@ -7,20 +7,20 @@
 @use 'blockquotes.vars' as vars;
 @mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables('vars'));
-    @include bem.scope('blockquotes') {
+        @include bem.scope('blockquotes') {
-        blockquote {
+                blockquote {
-            padding-inline-start: calc(props.get(vars.$indent) - props.get(vars.$border-width));
+                        padding-inline-start: calc(props.get(vars.$indent) - props.get(vars.$border-width));
-            margin-block:         props.get(vars.$margin-bs);
+                        margin-block:         props.get(vars.$margin-bs) 0;
-            margin-inline:        1px 0;
+                        margin-inline:        1px 0;
-            border-inline-start:  props.get(vars.$border-width) solid props.get(vars.$border-color);
+                        border-inline-start:  props.get(vars.$border-width) solid props.get(vars.$border-color);
-        }
+                }
-        @include bem.modifier('compact') {
+                @include bem.modifier('compact') {
-            blockquote {
+                        blockquote {
-                padding-inline-start: calc(props.get(vars.$compact--indent) - props.get(vars.$border-width));
+                                padding-inline-start: calc(props.get(vars.$compact--indent) - props.get(vars.$border-width));
-            }
+                        }
-        }
+                }
-    }
+        }
 }
diff --git a/src/scopes/_blockquotes.vars.scss b/src/scopes/_blockquotes.vars.scss
index 9db1271..6aae242 100644
--- a/src/scopes/_blockquotes.vars.scss
+++ b/src/scopes/_blockquotes.vars.scss
@@ -1,6 +1,6 @@
 @use 'iro-sass/src/props';
 @use '../core.vars' as core;
-@use './implicit' as implicit;
+@use './implicit.vars' as implicit;
 $indent:       props.def(--s-blockquotes--indent, props.get(core.$list--indent)) !default;
 $margin-bs:    props.def(--s-blockquotes--margin-bs, props.get(implicit.$paragraph--margin-bs)) !default;
diff --git a/src/scopes/_body.scss b/src/scopes/_body.scss
new file mode 100644
index 0000000..f307f58
--- /dev/null
+++ b/src/scopes/_body.scss
@@ -0,0 +1,59 @@
+@use 'sass:meta';
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use '../props' as *;
+@forward 'body.vars';
+@use 'body.vars' as vars;
+@mixin styles {
+        @include materialize-at-root(meta.module-variables('vars'));
+        @include bem.scope('body') {
+                font-size: props.get(vars.$font-size);
+                line-height: props.get(vars.$line-height);
+                strong {
+                        color: props.get(vars.$strong--text-color);
+                }
+                p,
+                ul,
+                ol {
+                        max-inline-size: props.get(vars.$paragraph--max-inline-size);
+                        margin-block-start: props.get(vars.$paragraph--margin-bs);
+                }
+                ul,
+                ol {
+                        box-sizing: border-box;
+                }
+                img {
+                        display:            block;
+                        inline-size:        auto;
+                        max-inline-size:    100%;
+                        block-size:         auto;
+                        max-block-size:     props.get(vars.$img--max-block-size);
+                        margin-block-start: props.get(vars.$paragraph--margin-bs);
+                }
+                figure {
+                        margin-block-start: props.get(vars.$paragraph--margin-bs);
+                        img {
+                                margin-block: 0;
+                        }
+                }
+                hr {
+                        margin-block: calc(2 * props.get(vars.$paragraph--margin-bs));
+                }
+                table,
+                pre,
+                blockquote {
+                        margin-block-start: props.get(vars.$paragraph--margin-bs);
+                }
+        } 
+}
diff --git a/src/scopes/_body.vars.scss b/src/scopes/_body.vars.scss
new file mode 100644
index 0000000..1de2cfd
--- /dev/null
+++ b/src/scopes/_body.vars.scss
@@ -0,0 +1,12 @@
+@use 'iro-sass/src/props';
+@use '../core.vars' as core;
+@use '../layouts/container.vars' as container;
+$font-size:                  props.def(--s-body--font-size, props.get(core.$font-size--150)) !default;
+$line-height:                props.def(--s-body--line-height, calc(props.get(core.$font--standard--line-height) + .1)) !default;
+$paragraph--margin-bs:       props.def(--s-body--paragraph--margin-bs, props.get(core.$size--300)) !default;
+$paragraph--max-inline-size: props.def(--s-body--paragraph--max-inline-size, props.get(container.$fixed)) !default;
+$img--max-block-size:        props.def(--s-body--img--max-block-size, none) !default;
+$strong--text-color: props.def(--s-body--strong--text-color, props.get(core.$theme, --heading), 'color') !default;
diff --git a/src/scopes/_code.scss b/src/scopes/_code.scss
index 9b2a63d..8147a14 100644
--- a/src/scopes/_code.scss
+++ b/src/scopes/_code.scss
@@ -7,34 +7,34 @@
 @use 'code.vars' as vars;
 @mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables('vars'));
-    @include bem.scope('code') {
+        @include bem.scope('code') {
-        code {
+                code {
-            padding-block:    props.get(vars.$inline--pad-b);
+                        padding-block:    props.get(vars.$inline--pad-b);
-            padding-inline:   props.get(vars.$inline--pad-i);
+                        padding-inline:   props.get(vars.$inline--pad-i);
-            color:            props.get(vars.$inline--fg);
+                        color:            props.get(vars.$inline--fg);
-            background-color: props.get(vars.$inline--bg);
+                        background-color: props.get(vars.$inline--bg);
-            border-radius:    props.get(vars.$inline--rounding);
+                        border-radius:    props.get(vars.$inline--rounding);
-        }
+                }
-        pre {
+                pre {
-            padding-block:    props.get(vars.$block--pad-b);
+                        padding-block:    props.get(vars.$block--pad-b);
-            padding-inline:   props.get(vars.$block--pad-i);
+                        padding-inline:   props.get(vars.$block--pad-i);
-            margin-block:     props.get(vars.$block--margin-bs) 0;
+                        margin-block:     props.get(vars.$block--margin-bs) 0;
-            margin-inline:    0;
+                        margin-inline:    0;
-            color:            props.get(vars.$block--fg);
+                        color:            props.get(vars.$block--fg);
-            background-color: props.get(vars.$block--bg);
+                        background-color: props.get(vars.$block--bg);
-            border-radius:    props.get(vars.$block--rounding);
+                        border-radius:    props.get(vars.$block--rounding);
-            code {
+                        code {
-                display:           inline-block;
+                                display:           inline-block;
-                padding:           0;
+                                padding:           0;
-                margin-inline-end: props.get(vars.$block--pad-i);
+                                margin-inline-end: props.get(vars.$block--pad-i);
-                color:             currentColor;
+                                color:             currentColor;
-                background-color:  transparent;
+                                background-color:  transparent;
-                border-radius:     0;
+                                border-radius:     0;
-            }
+                        }
-        }
+                }
-    }
+        }
 }
diff --git a/src/scopes/_code.vars.scss b/src/scopes/_code.vars.scss
index c1bf27c..08472f2 100644
--- a/src/scopes/_code.vars.scss
+++ b/src/scopes/_code.vars.scss
@@ -1,18 +1,18 @@
 @use 'iro-sass/src/props';
 @use '../core.vars' as core;
-@use './implicit' as implicit;
+@use './implicit.vars' as implicit;
 $inline--pad-i:    props.def(--s-code--inline--pad-i, props.get(core.$size--50)) !default;
 $inline--pad-b:    props.def(--s-code--inline--pad-b, props.get(core.$size--10)) !default;
-$inline--rounding: props.def(--s-code--inline--rounding, props.get(core.$rounding)) !default;
+$inline--rounding: props.def(--s-code--inline--rounding, props.get(core.$rounding--sm)) !default;
 $block--pad-i:     props.def(--s-code--block--pad-i, props.get(core.$size--150)) !default;
 $block--pad-b:     props.def(--s-code--block--pad-b, props.get(core.$size--85)) !default;
 $block--margin-bs: props.def(--s-code--block--margin-bs, props.get(implicit.$paragraph--margin-bs)) !default;
-$block--rounding:  props.def(--s-code--block--rounding, props.get(core.$rounding)) !default;
+$block--rounding:  props.def(--s-code--block--rounding, props.get(core.$rounding--sm)) !default;
-$inline--fg: props.def(--s-code--inline--fg, props.get(core.$theme, --red, --1200), 'color') !default;
+$inline--fg: props.def(--s-code--inline--fg, props.get(core.$theme, --heading), 'color') !default;
-$inline--bg: props.def(--s-code--inline--bg, props.get(core.$theme, --red, --200), 'color') !default;
+$inline--bg: props.def(--s-code--inline--bg, props.get(core.$theme, --base, --200), 'color') !default;
 $block--fg: props.def(--s-code--block--fg, props.get(core.$theme, --text), 'color') !default;
 $block--bg: props.def(--s-code--block--bg, props.get(core.$theme, --base, --50), 'color') !default;
diff --git a/src/scopes/_figures.scss b/src/scopes/_figures.scss
new file mode 100644
index 0000000..d931820
--- /dev/null
+++ b/src/scopes/_figures.scss
@@ -0,0 +1,21 @@
+@use 'sass:meta';
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use '../objects/figure.vars' as figure;
+@mixin styles {
+        @include bem.scope('figures') {
+                figcaption {
+                        padding-block:    props.get(figure.$pad-b);
+                        font-size:        props.get(figure.$font-size);
+                        color:            props.get(figure.$text-color);
+                        border-block-end: props.get(figure.$border-width) solid props.get(figure.$border-color);
+                        &::before {
+                                display:       block;
+                                margin-block:  -100em 100em;
+                                content:       '';
+                        }
+                }
+        }
+}
diff --git a/src/scopes/_headings.scss b/src/scopes/_headings.scss
index 32559cd..362b116 100644
--- a/src/scopes/_headings.scss
+++ b/src/scopes/_headings.scss
@@ -1,67 +1,92 @@
 @use 'sass:map';
+@use 'sass:string';
 @use 'iro-sass/src/bem';
 @use 'iro-sass/src/props';
 @use '../objects/heading.vars' as heading;
 @mixin styles {
-    /* stylelint-disable-next-line scss/dollar-variable-pattern */
+        /* stylelint-disable-next-line scss/dollar-variable-pattern */
-    $-size-map: (
+        $-size-map: (
-        xs: h6,
+                xs: h6,
-        sm: h5,
+                sm: h5,
-        md: h4,
+                md: h4,
-        lg: h3,
+                lg: h3,
-        xl: h2,
+                xl: h2,
-        xxl: h1,
+                xxl: h1,
-    );
+        );
-    @include bem.scope('headings') {
+        @include bem.scope('headings') {
-        h1,
+                h1,
-        h2,
+                h2,
-        h3,
+                h3,
-        h4,
+                h4,
-        h5,
+                h5,
-        h6 {
+                h6 {
-            display:               block;
+                        display:               block;
-            margin-block-start:    props.get(heading.$margin-bs);
+                        margin-block-start:    props.get(heading.$margin-bs);
-            font-family:           props.get(heading.$font-family);
+                        font-family:           props.get(heading.$font-family);
-            font-weight:           props.get(heading.$font-weight);
+                        font-weight:           props.get(heading.$font-weight);
-            font-feature-settings: props.get(heading.$feature-settings);
+                        font-feature-settings: props.get(heading.$feature-settings);
-            line-height:           props.get(heading.$line-height);
+                        line-height:           props.get(heading.$line-height);
-            text-transform:        none;
+                        text-transform:        props.get(heading.$text-transform);
-            letter-spacing:        normal;
+                        letter-spacing:        normal;
-            transform:             translateX(props.get(heading.$offset));
+                        transform:             translateX(props.get(heading.$offset));
-        }
+                }
-        @include bem.elem('highlight') {
+                @include bem.elem('highlight') {
-            background-image: linear-gradient(to top,
+                        background-image: linear-gradient(to top,
-            transparent .15em,
+                        transparent .15em,
-            props.get(heading.$bg-color) .15em,
+                        props.get(heading.$bg-color) .15em,
-            props.get(heading.$bg-color) .6em,
+                        props.get(heading.$bg-color) .6em,
-            transparent .6em);
+                        transparent .6em);
-        }
+                }
-        @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in heading.$sizes {
+                @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings, $text-transform, $text-color in heading.$sizes {
-            #{map.get($-size-map, $mod)} {
+                        #{map.get($-size-map, $mod)} {
-                font-family:           props.get($font-family);
+                                font-family:           props.get($font-family);
-                font-size:             props.get($font-size);
+                                font-size:             props.get($font-size);
-                font-weight:           props.get($font-weight);
+                                font-weight:           props.get($font-weight);
-                font-feature-settings: props.get($feature-settings);
+                                font-feature-settings: props.get($feature-settings);
-                line-height:           props.get($line-height);
+                                line-height:           props.get($line-height);
-                letter-spacing:        props.get($letter-spacing);
+                                color:                 props.get($text-color);
-            }
+                                text-transform:        props.get($text-transform);
-        }
+                                letter-spacing:        props.get($letter-spacing);
+                        }
+                }
-        @include bem.modifier('display') {
+                @include bem.modifier('display') {
-            @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in heading.$display--sizes {
+                        @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings, $text-transform, $text-color in heading.$display--sizes {
-                #{map.get($-size-map, $mod)} {
+                                #{map.get($-size-map, $mod)} {
-                    font-family:           props.get($font-family);
+                                        font-family:           props.get($font-family);
-                    font-size:             props.get($font-size);
+                                        font-size:             props.get($font-size);
-                    font-weight:           props.get($font-weight);
+                                        font-weight:           props.get($font-weight);
-                    font-feature-settings: props.get($feature-settings);
+                                        font-feature-settings: props.get($feature-settings);
-                    line-height:           props.get($line-height);
+                                        line-height:           props.get($line-height);
-                    letter-spacing:        props.get($letter-spacing);
+                                        color:                 props.get($text-color);
-                }
+                                        text-transform:        props.get($text-transform);
-            }
+                                        letter-spacing:        props.get($letter-spacing);
-        }
+                                }
-    }
+                        }
+                }
+                @each $theme in map.keys(props.get(heading.$static-themes)) {
+                        @include bem.modifier(string.slice($theme, 3)) {
+                                color: props.get(heading.$static-themes, $theme, --text-color);
+                                                
+                                @each $mod, $value in heading.$sizes {
+                                        #{map.get($-size-map, $mod)} {
+                                                color: props.get(heading.$static-themes, $theme, --#{$mod}, --text-color);
+                                        }
+                                }
+                                @include bem.modifier('display') {      
+                                        @each $mod, $value in heading.$sizes {
+                                                #{map.get($-size-map, $mod)} {
+                                                        color: props.get(heading.$static-themes, $theme, --display, --#{$mod}, --text-color);
+                                                }
+                                        }
+                                }
+                        }
+                }
+        }
 }
diff --git a/src/scopes/_implicit.scss b/src/scopes/_implicit.scss
index 18791a8..cee1639 100644
--- a/src/scopes/_implicit.scss
+++ b/src/scopes/_implicit.scss
@@ -1,5 +1,7 @@
+@use 'sass:map';
 @use 'sass:math';
 @use 'sass:meta';
+@use 'sass:string';
 @use 'iro-sass/src/bem';
 @use 'iro-sass/src/props';
 @use '../props' as *;
@@ -9,151 +11,170 @@
 @use 'implicit.vars' as vars;
 @mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables('vars'));
-    @layer scope {
+        @layer scope {
-        html {
+                html {
-            accent-color:    props.get(core.$theme, --accent, --600);
+                        accent-color:    props.get(core.$theme, --accent, --600);
-            scrollbar-color: props.get(core.$theme, --text-disabled) transparent;
+                        scrollbar-color: props.get(core.$theme, --text-disabled) transparent;
-        }
+                }
-        html,
+                body {
-        body {
+                        padding:               0;
-            block-size: 100%;
+                        margin:                0;
-        }
+                        font-family:           props.get(vars.$body--font-family);
+                        font-size:             props.get(vars.$body--font-size);
+                        font-feature-settings: props.get(vars.$body--feature-settings);
+                        line-height:           props.get(vars.$body--line-height);
+                        color:                 props.get(core.$theme, --text);
+                        background-color:      props.get(core.$theme, --bg-base);
+                }
-        body {
+                pre,
-            padding:               0;
+                code {
-            margin:                0;
+                        font-family:           props.get(vars.$code--font-family);
-            font-family:           props.get(vars.$body--font-family);
+                        font-size:             props.get(vars.$code--font-size);
-            font-size:             props.get(vars.$body--font-size);
+                        font-feature-settings: props.get(vars.$code--feature-settings);
-            font-feature-settings: props.get(vars.$body--feature-settings);
+                        line-height:           props.get(vars.$code--line-height);
-            line-height:           props.get(vars.$body--line-height);
+                }
-            color:                 props.get(core.$theme, --text);
-            background-color:      props.get(core.$theme, --bg-base);
-        }
-        pre,
+                pre {
-        code {
+                        margin:     0;
-            font-family:           props.get(vars.$code--font-family);
+                        overflow-x: auto;
-            font-size:             props.get(vars.$code--font-size);
-            font-feature-settings: props.get(vars.$code--feature-settings);
-            line-height:           props.get(vars.$code--line-height);
-        }
-        pre {
+                        code {
-            margin:     0;
+                                font-size: 1em;
-            overflow-x: auto;
+                                color:     currentColor;
+                        }
+                }
-            code {
+                h1,
-                font-size: 1em;
+                h2,
-                color:     currentColor;
+                h3,
-            }
+                h4,
-        }
+                h5,
+                h6 {
+                        margin-block:          props.get(vars.$heading--margin-bs) 0;
+                        font-family:           props.get(vars.$heading--font-family);
+                        font-size:             props.get(vars.$heading--font-size);
+                        font-weight:           props.get(vars.$heading--font-weight);
+                        font-feature-settings: props.get(vars.$heading--feature-settings);
+                        line-height:           props.get(vars.$heading--line-height);
+                        color:                 props.get(vars.$heading--color);
-        h1,
+                        & + & {
-        h2,
+                                margin-block-start: props.get(vars.$heading--margin-bs-sibling);
-        h3,
+                        }
-        h4,
+                }
-        h5,
-        h6 {
-            margin-block:          props.get(vars.$heading--margin-bs) 0;
-            font-family:           props.get(vars.$heading--font-family);
-            font-size:             props.get(vars.$heading--font-size);
-            font-weight:           props.get(vars.$heading--font-weight);
-            font-feature-settings: props.get(vars.$heading--feature-settings);
-            line-height:           props.get(vars.$heading--line-height);
-            color:                 props.get(vars.$heading--color);
-            & + & {
+                p {
-                margin-block-start: props.get(vars.$heading--margin-bs-sibling);
+                        margin-block: props.get(vars.$paragraph--margin-bs) 0;
-            }
-        }
-        p {
+                        &:empty {
-            margin-block: props.get(vars.$paragraph--margin-bs) 0;
+                                display: none;
+                        }
+                }
-            &:empty {
+                strong {
-                display: none;
+                        font-weight: bold;
-            }
+                }
-        }
-        strong {
+                small {
-            font-weight: bold;
+                        font-size: props.get(vars.$small--font-size);
-        }
+                }
-        small {
+                ul,
-            font-size: props.get(vars.$small--font-size);
+                ol {
-        }
+                        padding:    0;
+                        margin:     0;
+                        list-style: none;
+                }
-        ul,
+                li {
-        ol {
+                        padding: 0;
-            padding:    0;
+                        margin:  0;
-            margin:     0;
+                }
-            list-style: none;
-        }
-        li {
+                :focus,
-            padding: 0;
+                :focus-visible {
-            margin:  0;
+                        outline: 0;
-        }
+                }
-        :focus,
+                :link,
-        :focus-visible {
+                :visited {
-            outline: 0;
+                        color:           currentColor;
-        }
+                        text-decoration: none;
+                }
-        :link,
-        :visited {
-            color:           currentColor;
-            text-decoration: none;
-        }
+                button,
+                input,
+                textarea {
+                        box-sizing:     content-box;
+                        padding:        0;
+                        margin:         0;
+                        font-family:    inherit;
+                        font-size:      1em;
+                        font-style:     inherit;
+                        font-weight:    inherit;
+                        line-height:    inherit;
+                        color:          currentColor;
+                        text-align:     inherit;
+                        text-transform: inherit;
+                        appearance:     none;
+                        background:     none;
+                        border:         0;
-        button,
+                        &::-moz-focus-inner {
-        input,
+                                border: 0;
-        textarea {
+                        }
-            box-sizing:     content-box;
+                }
-            padding:        0;
-            margin:         0;
-            font-family:    inherit;
-            font-size:      1em;
-            font-style:     inherit;
-            font-weight:    inherit;
-            line-height:    inherit;
-            color:          currentColor;
-            text-align:     inherit;
-            text-transform: inherit;
-            appearance:     none;
-            background:     none;
-            border:         0;
-            &::-moz-focus-inner {
+                input,
-                border: 0;
+                textarea {
-            }
+                        &::placeholder {
-        }
+                                color:   props.get(core.$theme, --text-mute);
+                                opacity: 1;
+                        }
-        input,
+                        &:disabled {
-        textarea {
+                                color: props.get(core.$theme, --text-disabled);
-            &::placeholder {
+                        }
-                color:   props.get(core.$theme, --text-mute);
+                }
-                opacity: 1;
-            }
-            &:disabled {
+                textarea {
-                color: props.get(core.$theme, --text-disabled);
+                        block-size: calc(1em * props.get(core.$font--standard--line-height));
-            }
+                }
-        }
-        textarea {
+                hr {
-            block-size: calc(1em * props.get(core.$font--standard--line-height));
+                        block-size:       props.get(core.$border-width--thin);
-        }
+                        margin:           0;
+                        background-color: props.get(core.$theme, --border);
+                        border:           0;
+                }
-        hr {
+                figure {
-            block-size:       props.get(core.$border-width--thin);
+                        padding: 0;
-            margin:           0;
+                        margin:  0;
-            background-color: props.get(core.$theme, --border);
+                }
-            border:           0;
-        }
+                @each $theme in map.keys(props.get(core.$transparent-colors)) {
-    }
+                        .t-static-#{string.slice($theme, 3)} {
+                                color: props.get(core.$transparent-colors, $theme, --800);
+                                h1,
+                                h2,
+                                h3,
+                                h4,
+                                h5,
+                                h6 {
+                                        color: props.get(core.$transparent-colors, $theme, --900);
+                                }
+                                hr {
+                                        color: props.get(core.$transparent-colors, $theme, --400);
+                                }
+                        }
+                }
+        }
 }
diff --git a/src/scopes/_implicit.vars.scss b/src/scopes/_implicit.vars.scss
index 0002591..388f0af 100644
--- a/src/scopes/_implicit.vars.scss
+++ b/src/scopes/_implicit.vars.scss
@@ -1,7 +1,7 @@
 @use 'iro-sass/src/props';
 @use '../core.vars' as core;
-$paragraph--margin-bs: props.def(--s-implicit--paragraph--margin-bs, props.get(core.$size--300)) !default;
+$paragraph--margin-bs: props.def(--s-implicit--paragraph--margin-bs, props.get(core.$size--200)) !default;
 $small--font-size: props.def(--s-implicit--small--font-size, props.get(core.$font-size--75)) !default;
@@ -17,10 +17,10 @@ $code--feature-settings: props.def(--s-implicit--code--feature-settings, props.g
 $heading--margin-bs:         props.def(--s-implicit--heading--margin-bs, props.get(core.$size--700)) !default;
 $heading--margin-bs-sibling: props.def(--s-implicit--heading--margin-bs-sibling, props.get(core.$size--325)) !default;
-$heading--font-family:       props.def(--s-implicit--heading--font-family, props.get(core.$font--headline--family)) !default;
+$heading--font-family:       props.def(--s-implicit--heading--font-family, props.get(core.$font--standard--family)) !default;
 $heading--line-height:       props.def(--s-implicit--heading--line-height, props.get(core.$font--standard--line-height)) !default;
-$heading--font-weight:       props.def(--s-implicit--heading--font-weight, props.get(core.$font--headline--weight)) !default;
+$heading--font-weight:       props.def(--s-implicit--heading--font-weight, bold) !default;
 $heading--font-size:         props.def(--s-implicit--heading--font-size, props.get(core.$font-size--100));
-$heading--feature-settings:  props.def(--s-implicit--heading--feature-settings, props.get(core.$font--headline--feature-settings)) !default;
+$heading--feature-settings:  props.def(--s-implicit--heading--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
-$heading--color: props.def(--s-implicit--heading--color, props.get(core.$theme, --heading), 'color');
+$heading--color: props.def(--s-implicit--heading--color, props.get(core.$theme, --heading), 'color') !default;
diff --git a/src/scopes/_links.scss b/src/scopes/_links.scss
index cff4cc9..40be069 100644
--- a/src/scopes/_links.scss
+++ b/src/scopes/_links.scss
@@ -9,87 +9,122 @@
 @use 'links.vars' as vars;
 @mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables('vars'));
-    @include bem.scope('links') {
+        @include bem.scope('links') {
-        :link,
+                :link,
-        :visited {
+                :visited {
-            color:                     currentColor;
+                        color:                     currentColor;
-            text-decoration:           underline;
+                        text-decoration:           underline;
-            text-decoration-thickness: props.get(vars.$underline-width);
+                        text-decoration-thickness: props.get(vars.$underline-width);
-            text-decoration-color:     props.get(vars.$underline-color);
+                        text-decoration-color:     props.get(vars.$underline-color);
-            border-radius:             props.get(vars.$rounding);
+                        border-radius:             props.get(vars.$rounding-sm);
-            box-decoration-break:      clone;
+                        box-decoration-break:      clone;
-            &:hover {
+                        &:hover {
-                text-decoration:           underline;
+                                text-decoration:           underline;
-                text-decoration-skip-ink:  none;
+                                text-decoration-thickness: props.get(vars.$hover--underline-width);
-                text-decoration-thickness: props.get(vars.$hover--underline-width);
+                                text-decoration-skip-ink:  none;
-            }
+                        }
-            &:focus-visible {
+                        &:focus-visible {
-                color:           props.get(vars.$key-focus--text-color);
+                                color:           props.get(vars.$key-focus--text-color);
-                text-decoration: none;
+                                text-decoration: none;
-                outline:         props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
+                                outline:         props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
-                box-shadow:
+                                box-shadow:
-                    0
+                                        0
-                    0
+                                        0
-                    0
+                                        0
-                    calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
+                                        calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
-                    props.get(vars.$key-focus--outline-color);
+                                        props.get(vars.$key-focus--outline-color);
-            }
+                        }
-        }
+                }
-        @include bem.modifier('invisible') {
+                @include bem.modifier('invisible') {
-            :link,
+                        :link,
-            :visited {
+                        :visited {
-                text-decoration: none;
+                                text-decoration: none;
-            }
+                        }
-        }
+                }
-        @include bem.modifier('colored') {
+                @include bem.modifier('colored') {
-            :link {
+                        :link {
-                color:                 props.get(vars.$colored--text-color);
+                                color:                 props.get(vars.$colored--text-color);
-                text-decoration-color: props.get(vars.$colored--underline-color);
+                                text-decoration-color: props.get(vars.$colored--underline-color);
-                &:hover {
+                                &:hover {
-                    color:             props.get(vars.$colored--hover--text-color);
+                                        color:             props.get(vars.$colored--hover--text-color);
-                }
+                                }
-            }
+                        }
-            :visited {
+                        :visited {
-                color:                 props.get(vars.$colored--visited--text-color);
+                                color:                 props.get(vars.$colored--visited--text-color);
-                text-decoration-color: props.get(vars.$colored--visited--underline-color);
+                                text-decoration-color: props.get(vars.$colored--visited--underline-color);
-                &:hover {
+                                &:hover {
-                    color:             props.get(vars.$colored--visited--hover--text-color);
+                                        color:             props.get(vars.$colored--visited--hover--text-color);
-                }
+                                }
-            }
+                        }
-        }
+                }
-        @each $theme in map.keys(props.get(vars.$static-themes)) {
+                @include bem.modifier('mark-external') {
-            @include bem.modifier(string.slice($theme, 3)) {
+                        :link,
-                :link,
+                        :visited {
-                :visited {
+                                &[href^='http'] {
-                    color:                 props.get(vars.$static-themes, $theme, --text-color);
+                                        &::after {
-                    text-decoration-color: props.get(vars.$static-themes, $theme, --underline-color);
+                                                content: ' ↗';
+                                        }
+                                }
+                        }
+                }
-                    &:hover {
+                @each $theme in map.keys(props.get(vars.$static-themes)) {
-                        color:             props.get(vars.$static-themes, $theme, --hover, --text-color);
+                        @include bem.modifier(string.slice($theme, 3)) {
-                    }
+                                :link,
+                                :visited {
+                                        color:                 props.get(vars.$static-themes, $theme, --text-color);
+                                        text-decoration-color: props.get(vars.$static-themes, $theme, --underline-color);
-                    &:focus-visible {
+                                        &:hover {
-                        color:         props.get(vars.$static-themes, $theme, --key-focus, --text-color);
+                                                color:             props.get(vars.$static-themes, $theme, --hover, --text-color);
-                        outline-color: props.get(vars.$static-themes, $theme, --key-focus, --border-color);
+                                        }
-                        box-shadow:
-                            0
+                                        &:focus-visible {
-                            0
+                                                color:         props.get(vars.$static-themes, $theme, --key-focus, --text-color);
-                            0
+                                                outline-color: props.get(vars.$static-themes, $theme, --key-focus, --border-color);
-                            calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
+                                                box-shadow:
-                            props.get(vars.$static-themes, $theme, --key-focus, --outline-color);
+                                                        0
-                    }
+                                                        0
-                }
+                                                        0
-            }
+                                                        calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
-        }
+                                                        props.get(vars.$static-themes, $theme, --key-focus, --outline-color);
-    }
+                                        }
+                                }
+                        }
+                }
+                @include bem.elem('image') {
+                        img {
+                                margin-inline: calc(-1 * props.get(vars.$key-focus--border-offset));
+                                border:        props.get(vars.$key-focus--border-offset) solid transparent;
+                                border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
+                        }
+    
+                        &:link,
+                        &:visited {
+                                &:focus-visible {
+                                        outline:    none;
+                                        box-shadow: none;
+    
+                                        img {
+                                                outline: props.get(vars.$key-focus--border-color) solid
+                                                        props.get(vars.$key-focus--border-width);
+                                                box-shadow: 0 0 0
+                                                        calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
+                                                        props.get(vars.$key-focus--outline-color);
+                                        }
+                                }
+                        }
+                }
+        }
 }
diff --git a/src/scopes/_links.vars.scss b/src/scopes/_links.vars.scss
index 91a73ab..c69cc32 100644
--- a/src/scopes/_links.vars.scss
+++ b/src/scopes/_links.vars.scss
@@ -4,6 +4,7 @@
 @use '../core.vars' as core;
 $rounding:               props.def(--s-links--rounding, props.get(core.$rounding)) !default;
+$rounding-sm:            props.def(--s-links--rounding-sm, props.get(core.$rounding--sm)) !default;
 $underline-width:        props.def(--s-links--underline-width, props.get(core.$border-width--thin)) !default;
 $hover--underline-width: props.def(--s-links--hover--underline-width, props.get(core.$border-width--medium)) !default;
@@ -27,22 +28,22 @@ $key-focus--outline-color: props.def(--s-links--key-focus--outline-color, props.
 $static-themes: props.def(--s-links, (), 'color');
 @each $theme in map.keys(props.get(core.$transparent-colors)) {
-    $link-theme: --static-#{string.slice($theme, 3)};
+        $link-theme: --static-#{string.slice($theme, 3)};
-    $static-themes: props.merge($static-themes, (
+        $static-themes: props.merge($static-themes, (
-        $link-theme: (
+                $link-theme: (
-            --text-color:        props.get(core.$transparent-colors, $theme, --800),
+                        --text-color:        currentColor,
-            --underline-color:   props.get(core.$transparent-colors, $theme, --500),
+                        --underline-color:   props.get(core.$transparent-colors, $theme, --500),
-            --hover: (
+                        --hover: (
-                --text-color:    props.get(core.$transparent-colors, $theme, --900),
+                                --text-color:    props.get(core.$transparent-colors, $theme, --900),
-            ),
+                        ),
-            --key-focus: (
+                        --key-focus: (
-                --text-color:    props.get(core.$transparent-colors, $theme, --900),
+                                --text-color:    props.get(core.$transparent-colors, $theme, --900),
-                --border-color:  props.get(core.$transparent-colors, $theme, --900),
+                                --border-color:  props.get(core.$transparent-colors, $theme, --900),
-                --outline-color: props.get(core.$transparent-colors, $theme, --300),
+                                --outline-color: props.get(core.$transparent-colors, $theme, --300),
-            ),
+                        ),
-        )
+                )
-    ));
+        ));
 }
diff --git a/src/scopes/_lists.scss b/src/scopes/_lists.scss
index 98b1df1..fc8a577 100644
--- a/src/scopes/_lists.scss
+++ b/src/scopes/_lists.scss
@@ -8,53 +8,53 @@
 @use 'lists.vars' as vars;
 @mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables('vars'));
-    @include bem.scope('lists') {
+        @include bem.scope('lists') {
-        ul,
+                ul,
-        ol {
+                ol {
-            padding-inline-start: props.get(vars.$indent);
+                        padding-inline-start: props.get(vars.$indent);
-            margin-block-start:   props.get(vars.$margin-bs);
+                        margin-block-start:   props.get(vars.$margin-bs);
-            ul,
+                        ul,
-            ol {
+                        ol {
-                margin-block-start: 0;
+                                margin-block-start: 0;
-            }
+                        }
-        }
+                }
-        ul {
+                ul {
-            list-style: disc;
+                        list-style: disc;
-        }
+                }
-        ol {
+                ol {
-            list-style: decimal;
+                        list-style: decimal;
-        }
+                }
-        dl {
+                dl {
-            padding:       0;
+                        padding:       0;
-            margin-block:  props.get(vars.$margin-bs) 0;
+                        margin-block:  props.get(vars.$margin-bs) 0;
-            margin-inline: 0;
+                        margin-inline: 0;
-        }
+                }
-        dt {
+                dt {
-            font-weight: bold;
+                        font-weight: bold;
-            color:       props.get(core.$theme, --heading);
+                        color:       props.get(core.$theme, --heading);
-        }
+                }
-        dd {
+                dd {
-            margin-block:  0;
+                        margin-block:  0;
-            margin-inline: props.get(vars.$indent) 0;
+                        margin-inline: props.get(vars.$indent) 0;
-        }
+                }
-        @include bem.modifier('compact') {
+                @include bem.modifier('compact') {
-            ul,
+                        ul,
-            ol {
+                        ol {
-                padding-inline-start: calc(props.get(vars.$compact--indent) - 3px);
+                                padding-inline-start: calc(props.get(vars.$compact--indent) - 3px);
-            }
+                        }
-            dd {
+                        dd {
-                margin-inline-start: calc(props.get(vars.$compact--indent) - 3px);
+                                margin-inline-start: calc(props.get(vars.$compact--indent) - 3px);
-            }
+                        }
-        }
+                }
-    }
+        }
 }
diff --git a/src/scopes/_lists.vars.scss b/src/scopes/_lists.vars.scss
index c4a0f22..8c46bc3 100644
--- a/src/scopes/_lists.vars.scss
+++ b/src/scopes/_lists.vars.scss
@@ -1,6 +1,6 @@
 @use 'iro-sass/src/props';
 @use '../core.vars' as core;
-@use './implicit' as implicit;
+@use './implicit.vars' as implicit;
 $indent:    props.def(--s-lists--indent, calc(props.get(core.$list--indent) + 1em)) !default;
 $margin-bs: props.def(--s-lists--margin-bs, props.get(implicit.$paragraph--margin-bs)) !default;
diff --git a/src/scopes/_tables.scss b/src/scopes/_tables.scss
index 0a87eaa..5b64301 100644
--- a/src/scopes/_tables.scss
+++ b/src/scopes/_tables.scss
@@ -8,95 +8,95 @@
 @use 'tables.vars' as vars;
 @mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables('vars'));
-    @include bem.scope('tables') {
+        @include bem.scope('tables') {
-        table {
+                table {
-            margin-block-start: props.get(vars.$margin-bs);
+                        margin-block-start: props.get(vars.$margin-bs);
-            border-spacing:     0;
+                        border-spacing:     0;
-            border-collapse:    separate;
+                        border-collapse:    separate;
-        }
+                }
-        th {
+                th {
-            padding-block:  props.get(table.$pad-b);
+                        padding-block:  props.get(table.$pad-b);
-            padding-inline: props.get(table.$pad-i);
+                        padding-inline: props.get(table.$pad-i);
-            font-family:    props.get(table.$heading--font-family);
+                        font-family:    props.get(table.$heading--font-family);
-            font-size:      props.get(table.$heading--font-size);
+                        font-size:      props.get(table.$heading--font-size);
-            font-weight:    props.get(table.$heading--font-weight);
+                        font-weight:    props.get(table.$heading--font-weight);
-            color:          props.get(table.$heading-color);
+                        color:          props.get(table.$heading-color);
-            text-align:     start;
+                        text-align:     start;
-            text-transform: props.get(table.$heading--text-transform);
+                        text-transform: props.get(table.$heading--text-transform);
-            letter-spacing: props.get(table.$heading--letter-spacing);
+                        letter-spacing: props.get(table.$heading--letter-spacing);
-        }
+                }
-        td {
+                td {
-            padding-block:            props.get(table.$pad-b);
+                        padding-block:            props.get(table.$pad-b);
-            padding-inline:           props.get(table.$pad-i);
+                        padding-inline:           props.get(table.$pad-i);
-            border-color:             props.get(table.$border-color);
+                        border-color:             props.get(table.$border-color);
-            border-style:             solid;
+                        border-style:             solid;
-            border-width:             0;
+                        border-width:             0;
-            border-block-start-width: props.get(table.$border-width);
+                        border-block-start-width: props.get(table.$border-width);
-        }
+                }
-        tr {
+                tr {
-            &:last-child {
+                        &:last-child {
-                td {
+                                td {
-                    border-block-end-width: props.get(table.$border-width);
+                                        border-block-end-width: props.get(table.$border-width);
-                }
+                                }
-            }
+                        }
-        }
+                }
-        @include bem.modifier('flush') {
+                @include bem.modifier('flush') {
-            th,
+                        th,
-            td {
+                        td {
-                &:first-child {
+                                &:first-child {
-                    padding-inline-start: 0;
+                                        padding-inline-start: 0;
-                }
+                                }
-                &:last-child {
+                                &:last-child {
-                    padding-inline-end: 0;
+                                        padding-inline-end: 0;
-                }
+                                }
-            }
+                        }
-        }
+                }
-        @include bem.modifier('box') {
+                @include bem.modifier('box') {
-            td {
+                        td {
-                background-color: props.get(table.$box--bg-color);
+                                background-color: props.get(table.$box--bg-color);
            
-                &:first-child {
+                                &:first-child {
-                    border-inline-start-width: props.get(table.$border-width);
+                                        border-inline-start-width: props.get(table.$border-width);
-                }
+                                }
            
-                &:last-child {
+                                &:last-child {
-                    border-inline-end-width: props.get(table.$border-width);
+                                        border-inline-end-width: props.get(table.$border-width);
-                }
+                                }
-            }
+                        }
    
-            tr {
+                        tr {
-                &:first-child {
+                                &:first-child {
-                    td {
+                                        td {
-                        &:first-child {
+                                                &:first-child {
-                            border-start-start-radius: props.get(table.$rounding);
+                                                        border-start-start-radius: props.get(table.$rounding);
-                        }
+                                                }
            
-                        &:last-child {
+                                                &:last-child {
-                            border-start-end-radius: props.get(table.$rounding);
+                                                        border-start-end-radius: props.get(table.$rounding);
-                        }
+                                                }
-                    }
+                                        }
-                }
+                                }
    
-                &:last-child {
+                                &:last-child {
-                    td {
+                                        td {
-                        &:first-child {
+                                                &:first-child {
-                            border-end-start-radius: props.get(table.$rounding);
+                                                        border-end-start-radius: props.get(table.$rounding);
-                        }
+                                                }
            
-                        &:last-child {
+                                                &:last-child {
-                            border-end-end-radius: props.get(table.$rounding);
+                                                        border-end-end-radius: props.get(table.$rounding);
-                        }
+                                                }
-                    }
+                                        }
-                }
+                                }
-            }
+                        }
-        }
+                }
-    }
+        }
 }
diff --git a/src_demo/index.scss b/src_demo/index.scss
index 1fdf290..2ac8e9d 100644
--- a/src_demo/index.scss
+++ b/src_demo/index.scss
@@ -1,16 +1,19 @@
 @use '../src/iro-design' as iro;
+@include iro.layers--styles;
 @include iro.core--styles;
 @include iro.s-implicit--styles;
+@include iro.s-body--styles;
 @include iro.s-blockquotes--styles;
 @include iro.s-code--styles;
+@include iro.s-figures--styles;
 @include iro.s-headings--styles;
 @include iro.s-links--styles;
 @include iro.s-lists--styles;
 @include iro.s-tables--styles;
-@include iro.l-button-group--styles;
+@include iro.l-hlist--styles;
 @include iro.l-card-list--styles;
 @include iro.l-container--styles;
 @include iro.l-flex--styles;
@@ -20,27 +23,29 @@
 @include iro.l-split-view--styles;
 @include iro.o-icon--styles;
-@include iro.o-action-button--styles;
 @include iro.o-alert--styles;
 @include iro.o-avatar--styles;
 @include iro.o-backdrop--styles;
-@include iro.o-badge--styles;
 @include iro.o-button--styles;
 @include iro.o-card--styles;
 @include iro.o-checkbox--styles;
 @include iro.o-divider--styles;
 @include iro.o-emoji--styles;
+@include iro.o-figure--styles;
 @include iro.o-field-label--styles;
 @include iro.o-heading--styles;
 @include iro.o-lightbox--styles;
 @include iro.o-menu--styles;
+@include iro.o-navbar--styles;
 @include iro.o-palette--styles;
+@include iro.o-placeholders--styles;
 @include iro.o-popover--styles;
 @include iro.o-radio--styles;
 @include iro.o-side-nav--styles;
 @include iro.o-status-indicator--styles;
 @include iro.o-switch--styles;
 @include iro.o-table--styles;
+@include iro.o-tabbar--styles;
 @include iro.o-text-field--styles;
 @include iro.o-thumbnail--styles;
diff --git a/tpl/index.pug b/tpl/index.pug
index cccfb2a..0f1b5b0 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -9,7 +9,6 @@ include layouts/container.pug
 include objects/palette.pug
 include objects/heading.pug
 include objects/divider.pug
-include objects/badge.pug
 include objects/button.pug
 include objects/text-field.pug
 include objects/field-label.pug
@@ -17,13 +16,13 @@ include objects/radio.pug
 include objects/checkbox.pug
 include objects/switch.pug
 include objects/form.pug
-include objects/action-button.pug
 include objects/overflow-button.pug
 include objects/status-indicator.pug
 include objects/avatar.pug
 include objects/card.pug
 include objects/popover.pug
 include objects/menu.pug
+include objects/navbar.pug
 include objects/side-nav.pug
 include objects/icon-nav.pug
 include objects/emoji.pug
@@ -61,7 +60,6 @@ include views/links.pug
 include views/code.pug
 include views/blockquote.pug
 include views/list.pug
-include views/badge.pug
 include views/button.pug
 include views/text-field.pug
 include views/field-label.pug
@@ -69,13 +67,13 @@ include views/radio.pug
 include views/checkbox.pug
 include views/switch.pug
 include views/form.pug
-include views/action-button.pug
 include views/overflow-button.pug
 include views/status-indicator.pug
 include views/avatar.pug
 include views/card.pug
 include views/popover.pug
 include views/menu.pug
+include views/navbar.pug
 include views/side-nav.pug
 include views/icon-nav.pug
 include views/backdrop.pug
@@ -108,7 +106,6 @@ html
            +view-blockquote
            +view-list
            +view-emoji
-            +view-badge
            +view-button
            +view-text-field
            +view-field-label
@@ -116,7 +113,6 @@ html
            +view-checkbox
            +view-switch
            +view-form
-            +view-action-button
            //+view-overflow-button
            +view-status-indicator
            +view-avatar
@@ -124,6 +120,7 @@ html
            +view-side-nav
            +view-popover
            +view-menu
+            +view-navbar
            //+view-icon-nav
            +view-backdrop
            //+view-dialog
diff --git a/tpl/objects/action-button.pug b/tpl/objects/action-button.pug
deleted file mode 100644
index c3a9b53..0000000
--- a/tpl/objects/action-button.pug
+++ /dev/null
@@ -1,29 +0,0 @@
-include icon.pug
-mixin action-button
-    -
-        let classes = {
-            'o-action-button':        true,
-            'u-d-block':              attributes.block,
-            'o-action-button--quiet': attributes.quiet,
-            'o-action-button--pill':  attributes.pill,
-            'o-action-button--icon':  !!attributes.icon && !block,
-            'is-selected':            attributes.selected
-        }
-        if (attributes.theme) {
-            classes['o-action-button--' + attributes.theme] = true
-        }
-        if (attributes.size) {
-            classes['o-action-button--' + attributes.size] = true
-        }
-        if (attributes.class) {
-            classes[attributes.class] = true;
-        }
-        let href = attributes.disabled ? null : '#';
-    a(class=classes href=href)
-        if attributes.icon
-            +icon(attributes.icon)
-            = ' '
-        block
diff --git a/tpl/objects/badge.pug b/tpl/objects/badge.pug
deleted file mode 100644
index 48e4029..0000000
--- a/tpl/objects/badge.pug
+++ /dev/null
@@ -1,37 +0,0 @@
-mixin badge(variant)
-    -
-        let classes = {
-            'o-badge':       true,
-            'o-badge--pill': !!attributes.pill,
-            'o-badge--quiet': !!attributes.quiet,
-            'o-menu__badge': !!attributes.menu,
-        }
-        if (attributes.size) {
-            classes['o-badge--' + attributes.size] = true
-        }
-        if (variant) {
-            classes['o-badge--' + variant] = true
-        }
-    if attributes.href
-        a(href=attributes.href class=classes)
-            if attributes.icon
-                +icon(attributes.icon)
-                = ' '
-            if block
-                span.o-badge__label
-                    block
-            if attributes.postIcon
-                = ' '
-                +icon(attributes.postIcon)
-    else
-        span(class=classes)
-            if attributes.icon
-                +icon(attributes.icon)
-                = ' '
-            if block
-                span.o-badge__label
-                    block
-            if attributes.postIcon
-                = ' '
-                +icon(attributes.postIcon)
diff --git a/tpl/objects/button.pug b/tpl/objects/button.pug
index 0884c8d..3b5de2b 100644
--- a/tpl/objects/button.pug
+++ b/tpl/objects/button.pug
@@ -1,22 +1,31 @@
-mixin a-button
+include icon.pug
+mixin button
    -
        let classes = {
-            'o-button':          true,
+            'o-button':            true,
-            'o-button--block':   attributes.block,
+            'u-d-block':           attributes.block,
-            'o-button--primary': attributes.primary,
+            'o-button--secondary': attributes.secondary,
-            'o-button--outline': attributes.outline,
+            'o-button--quiet':     attributes.quiet,
-            'o-button--round':   !!attributes.icon && !block
+            'o-button--pill':      attributes.pill,
+            'o-button--badge':     attributes.badge,
+            'o-button--icon':      !!attributes.icon && !block,
+            'is-selected':         attributes.selected,
+            'is-highlighted':      attributes.highlighted,
        }
-        if (attributes.variant) {
+        if (attributes.theme) {
-            classes['o-button--' + attributes.variant] = true
+            classes['o-button--' + attributes.theme] = true
        }
        if (attributes.size) {
            classes['o-button--' + attributes.size] = true
        }
+        if (attributes.class) {
+            classes[attributes.class] = true;
+        }
        let href = attributes.disabled ? null : '#';
-    a(class=classes href=href aria-disabled=attributes.disabled && String(attributes.disabled))
+    a(class=classes href=href)
        if attributes.icon
            +icon(attributes.icon)
            = ' '
diff --git a/tpl/objects/card.pug b/tpl/objects/card.pug
index 2ab9bef..feb1441 100644
--- a/tpl/objects/card.pug
+++ b/tpl/objects/card.pug
@@ -1,8 +1,11 @@
 mixin card
    -
        let classes = {
-            'o-card':        true,
+            'o-card':             true,
-            'o-card--quiet': !!attributes.quiet,
+            'o-card--borderless': !!attributes.borderless,
+            'o-card--shadow':     !!attributes.shadow,
+            'o-card--quiet':      !!attributes.quiet,
+            'o-card--thumbnail':  !!attributes.thumbnail,
        }
        if (attributes.class) {
@@ -26,7 +29,16 @@ mixin card-image
            classes[attributes.class] = true;
        }
-    img(class=classes src=attributes.src style=attributes.style)
+        let imgClasses = {
+            'o-card__image-img': true,
+            'l-card-list__card-image': attributes.list
+        }
+    div(class=classes)
+        img(class=imgClasses src=attributes.src style=attributes.style)
+        if block
+            .o-card__image-overlay 
+                block
 mixin card-body
    .o-card__body(style=attributes.style)
diff --git a/tpl/objects/dialog.pug b/tpl/objects/dialog.pug
index 3ceae69..95053f7 100644
--- a/tpl/objects/dialog.pug
+++ b/tpl/objects/dialog.pug
@@ -54,13 +54,13 @@ mixin dialog(title)
            else
                if title
                    +div-heading('xl')(class='o-dialog__title l-media__block l-media__block--main')= title
-            +action-button(round=true quiet=true icon='x' class='o-dialog__close-btn l-media__block')
+            +button(round=true quiet=true icon='x' class='o-dialog__close-btn l-media__block')
        section(class=bodyClass)
            if slots.body
                - slots.body()
-        footer.o-dialog__footer.l-button-group
+        footer.o-dialog__footer.l-hlist
-            +a-button(outline=true)= 'Cancel'
+            +button(outline=true)= 'Cancel'
            = ' '
-            +a-button(variant='accent')= 'Continue'
+            +button(variant='accent')= 'Continue'
diff --git a/tpl/objects/divider.pug b/tpl/objects/divider.pug
index 46425cd..ed4d27a 100644
--- a/tpl/objects/divider.pug
+++ b/tpl/objects/divider.pug
@@ -3,6 +3,8 @@ mixin divider(level)
        let classes = {
            'o-divider':                        true,
            'o-divider--labelled':              !!block,
+            'o-divider--vertical':              !!attributes.vertical,
+            'o-divider--dot':                   !!attributes.dot,
            ['o-divider--' + level]:            true,
            ['o-divider--' + attributes.color]: !!attributes.color
        }
diff --git a/tpl/objects/field-label.pug b/tpl/objects/field-label.pug
index fb96443..192780d 100644
--- a/tpl/objects/field-label.pug
+++ b/tpl/objects/field-label.pug
@@ -16,7 +16,7 @@ mixin field-label(label, hint=null)
        let labelStyle = needsLabelWidth ? 'width: ' + attributes.labelWidth : '';
-    div(class=classes)
+    label(class=classes)
        .o-field-label__label(style=labelStyle class=attributes.labelClass)= label
        .o-field-label__content(class=attributes.contentClass)
            block
diff --git a/tpl/objects/heading.pug b/tpl/objects/heading.pug
index 6cc05ad..cdc28f0 100644
--- a/tpl/objects/heading.pug
+++ b/tpl/objects/heading.pug
@@ -1,34 +1,76 @@
 mixin h1-heading(level, display = false)
-    - let classes = ['o-heading', 'o-heading--' + level, { 'o-heading--display': display }]
+    -
+        let classes = [
+            'o-heading',
+            'o-heading--' + level,
+            'o-heading--' + attributes.color,
+            { 'o-heading--display': display }
+        ]
    h1(class=classes)&attributes(attributes)
        block
 mixin h2-heading(level, display = false)
-    - let classes = ['o-heading', 'o-heading--' + level, { 'o-heading--display': display }]
+    -
+        let classes = [
+            'o-heading',
+            'o-heading--' + level,
+            'o-heading--' + attributes.color,
+            { 'o-heading--display': display }
+        ]
    h2(class=classes)&attributes(attributes)
        block
 mixin h3-heading(level, display = false)
-    - let classes = ['o-heading', 'o-heading--' + level, { 'o-heading--display': display }]
+    -
+        let classes = [
+            'o-heading',
+            'o-heading--' + level,
+            'o-heading--' + attributes.color,
+            { 'o-heading--display': display }
+        ]
    h3(class=classes)&attributes(attributes)
        block
 mixin h4-heading(level, display = false)
-    - let classes = ['o-heading', 'o-heading--' + level, { 'o-heading--display': display }]
+    -
+        let classes = [
+            'o-heading',
+            'o-heading--' + level,
+            'o-heading--' + attributes.color,
+            { 'o-heading--display': display }
+        ]
    h4(class=classes)&attributes(attributes)
        block
 mixin h5-heading(level, display = false)
-    - let classes = ['o-heading', 'o-heading--' + level, { 'o-heading--display': display }]
+    -
+        let classes = [
+            'o-heading',
+            'o-heading--' + level,
+            'o-heading--' + attributes.color,
+            { 'o-heading--display': display }
+        ]
    h5(class=classes)&attributes(attributes)
        block
 mixin h6-heading(level, display = false)
-    - let classes = ['o-heading', 'o-heading--' + level, { 'o-heading--display': display }]
+    -
+        let classes = [
+            'o-heading',
+            'o-heading--' + level,
+            'o-heading--' + attributes.color,
+            { 'o-heading--display': display }
+        ]
    h6(class=classes)&attributes(attributes)
        block
 mixin div-heading(level, display = false)
-    - let classes = ['o-heading', 'o-heading--' + level, { 'o-heading--display': display }]
+    -
+        let classes = [
+            'o-heading',
+            'o-heading--' + level,
+            'o-heading--' + attributes.color,
+            { 'o-heading--display': display }
+        ]
    div(class=classes)&attributes(attributes)
        block
diff --git a/tpl/objects/icon-nav.pug b/tpl/objects/icon-nav.pug
index f1c7d8a..afdf2db 100644
--- a/tpl/objects/icon-nav.pug
+++ b/tpl/objects/icon-nav.pug
@@ -1,6 +1,6 @@
 include icon.pug
 include status-indicator.pug
-include action-button.pug
+include button.pug
 mixin icon-nav
    -
@@ -19,9 +19,9 @@ mixin icon-nav-item(icon)
    -
        let classes = {
            'o-icon-nav__item': true,
-            'o-action-button': true,
+            'o-button': true,
-            'o-action-button--round': true,
+            'o-button--round': true,
-            'o-action-button--quiet': true,
+            'o-button--quiet': true,
            'is-selected':  attributes.selected,
        }
        if (attributes.class) {
diff --git a/tpl/objects/lightbox.pug b/tpl/objects/lightbox.pug
index 842d44a..2d520b5 100644
--- a/tpl/objects/lightbox.pug
+++ b/tpl/objects/lightbox.pug
@@ -23,14 +23,14 @@ mixin lightbox(images)
        header.o-lightbox__header
            div(class=linksClasses)
                block
-            +action-button(theme=attributes.theme pill=true quiet=true icon='x' class='o-lightbox__close-btn')
+            +button(theme=attributes.theme pill=true quiet=true icon='x' class='o-lightbox__close-btn')
        each img, i in images
            img(src=images[i] id=('image-' + i) class=`o-lightbox__img ${attributes.interactive && !i ? 'is-visible' : ''}`)
        if images.length > 1
-            +action-button(theme=attributes.theme pill=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev')
+            +button(theme=attributes.theme pill=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev')
-            +action-button(theme=attributes.theme pill=true quiet=true icon='chevron-right' class='o-lightbox__nav-btn o-lightbox__nav-btn--next')
+            +button(theme=attributes.theme pill=true quiet=true icon='chevron-right' class='o-lightbox__nav-btn o-lightbox__nav-btn--next')
        .o-lightbox__thumbnails
            each img, i in images
diff --git a/tpl/objects/menu.pug b/tpl/objects/menu.pug
index 578f9bc..802f9bd 100644
--- a/tpl/objects/menu.pug
+++ b/tpl/objects/menu.pug
@@ -1,6 +1,6 @@
 include icon.pug
 include status-indicator.pug
-include action-button.pug
+include button.pug
 mixin menu
    -
diff --git a/tpl/objects/navbar.pug b/tpl/objects/navbar.pug
new file mode 100644
index 0000000..6248e28
--- /dev/null
+++ b/tpl/objects/navbar.pug
@@ -0,0 +1,46 @@
+include icon.pug
+include status-indicator.pug
+include button.pug
+mixin navbar
+    -
+        let classes = {
+            'o-navbar': true,
+            'o-navbar--quiet': attributes.quiet,
+        }
+        if (attributes.theme) {
+            classes['o-navbar--' + attributes.theme] = true
+        }
+        if (attributes.class) {
+            classes[attributes.class] = true;
+        }
+    div(class=classes)&attributes(attributes)
+        block
+mixin navbar-item
+    -
+        let classes = {
+            'o-navbar__item': true,
+            'is-selected':    attributes.selected,
+        }
+        if (attributes.class) {
+            classes[attributes.class] = true;
+        }
+    #{!!attributes.tag ? attributes.tag : 'button'}(class=classes)&attributes(attributes)
+        if attributes.icon
+            .o-navbar__item-label
+                block
+        .o-navbar__item-content
+            if attributes.preIcon
+                +icon(attributes.preIcon)
+                = ' '
+            if attributes.icon
+                +icon(attributes.icon)(class="o-navbar__item-content-icon")
+            else
+                span.o-navbar__item-content-text
+                    block
+            if attributes.postIcon
+                = ' '
+                +icon(attributes.postIcon)
diff --git a/tpl/objects/side-nav.pug b/tpl/objects/side-nav.pug
index ccd24e4..2dcbd84 100644
--- a/tpl/objects/side-nav.pug
+++ b/tpl/objects/side-nav.pug
@@ -1,6 +1,6 @@
 include icon.pug
 include status-indicator.pug
-include action-button.pug
+include button.pug
 mixin side-nav
    -
diff --git a/tpl/objects/text-field.pug b/tpl/objects/text-field.pug
index 0342f01..6de30e9 100644
--- a/tpl/objects/text-field.pug
+++ b/tpl/objects/text-field.pug
@@ -12,6 +12,7 @@ mixin text-field
        let classes = {
            'o-text-field':           true,
            'o-text-field--extended': !!block,
+            'o-text-field--pill':     attributes.pill,
            'is-invalid':             attributes.invalid,
            'is-disabled':            attributes.disabled,
            'l-media':                !!block,
diff --git a/tpl/views/action-button.pug b/tpl/views/action-button.pug
deleted file mode 100644
index 8fbf9ea..0000000
--- a/tpl/views/action-button.pug
+++ /dev/null
@@ -1,109 +0,0 @@
-mixin view-action-button 
-    +view('action-button', 'Action button')
-        .c-box
-            +action-button(size='sm')= 'Idle'
-            = ' '
-            +action-button= 'Idle'
-            = ' '
-            +action-button(size='lg')= 'Idle'
-            = ' '
-            +action-button(size='xl')= 'Idle'
-        .c-box
-            +action-button(icon='trash' size='sm')
-            = ' '
-            +action-button(icon='trash')
-            = ' '
-            +action-button(icon='trash' size='lg')
-            = ' '
-            +action-button(icon='trash' size='xl')
-        .c-box
-            +action-button(pill=true size='sm')= 'Idle'
-            = ' '
-            +action-button(pill=true)= 'Idle'
-            = ' '
-            +action-button(pill=true size='lg')= 'Idle'
-            = ' '
-            +action-button(pill=true size='xl')= 'Idle'
-        .c-box
-            +action-button(pill=true icon='trash' size='sm')
-            = ' '
-            +action-button(pill=true icon='trash')
-            = ' '
-            +action-button(pill=true icon='trash' size='lg')
-            = ' '
-            +action-button(pill=true icon='trash' size='xl')
-        .c-box
-            +action-button= 'Label'
-            = ' '
-            +action-button(icon='trash')= 'Label'
-            = ' '
-            +action-button(icon='trash')
-        .c-box
-            +action-button(quiet=true)= 'Label'
-            = ' '
-            +action-button(quiet=true icon='trash')= 'Label'
-            = ' '
-            +action-button(quiet=true icon='trash')
-        .c-box
-            +action-button= 'Idle'
-            = ' '
-            +action-button(selected=true)= 'Selected'
-            = ' '
-            +action-button(disabled=true)= 'Disabled'
-            = ' '
-            +action-button(selected=true disabled=true)= 'Selected + disabled'
-        .c-box
-            +action-button(quiet=true )= 'Idle'
-            = ' '
-            +action-button(quiet=true selected=true)= 'Selected'
-            = ' '
-            +action-button(quiet=true disabled=true)= 'Disabled'
-            = ' '
-            +action-button(quiet=true selected=true disabled=true)= 'Selected + disabled'
-        .c-box
-            +action-button(pill=true)= 'Idle'
-            = ' '
-            +action-button(pill=true selected=true)= 'Selected'
-            = ' '
-            +action-button(pill=true disabled=true)= 'Disabled'
-            = ' '
-            +action-button(pill=true selected=true disabled=true)= 'Selected + disabled'
-        .c-box
-            +action-button(pill=true quiet=true)= 'Idle'
-            = ' '
-            +action-button(pill=true quiet=true selected=true)= 'Selected'
-            = ' '
-            +action-button(pill=true quiet=true disabled=true)= 'Disabled'
-            = ' '
-            +action-button(pill=true quiet=true selected=true disabled=true)= 'Selected + disabled'
-        each theme in ['static-black', 'static-white']
-            -
-                const bg = theme.startsWith('static-black') ? 500 : 1000;
-            .c-box(style=`background-color: var(--colors--blue-static--${bg});`)
-                +action-button(theme=theme)= 'Idle'
-                = ' '
-                +action-button(theme=theme selected=true)= 'Selected'
-                = ' '
-                +action-button(theme=theme disabled=true)= 'Disabled'
-                = ' '
-                +action-button(theme=theme selected=true disabled=true)= 'Selected + disabled'
-            .c-box(style=`background-color: var(--colors--blue-static--${bg});`)
-                +action-button(theme=theme quiet=true)= 'Idle'
-                = ' '
-                +action-button(theme=theme quiet=true selected=true)= 'Selected'
-                = ' '
-                +action-button(theme=theme quiet=true disabled=true)= 'Disabled'
-                = ' '
-                +action-button(theme=theme quiet=true selected=true disabled=true)= 'Selected + disabled'
diff --git a/tpl/views/badge.pug b/tpl/views/badge.pug
deleted file mode 100644
index cc1f346..0000000
--- a/tpl/views/badge.pug
+++ /dev/null
@@ -1,69 +0,0 @@
-mixin view-badge 
-    +view('badge', 'Badge')
-        .c-box
-            +badge(size='sm' href='#')= '50'
-            = ' '
-            +badge(href='#')= '100'
-            = ' '
-            +badge(size='lg' href='#')= '200'
-            = ' '
-            +badge(size='xl' href='#')= '300'
-        .c-box
-            +badge(pill=true size='sm' href='#')= '50'
-            = ' '
-            +badge(pill=true href='#')= '100'
-            = ' '
-            +badge(pill=true size='lg' href='#')= '200'
-            = ' '
-            +badge(pill=true size='xl' href='#')= '300'
-        .c-box
-            +badge(icon='image' size='sm' href='#')= '50'
-            = ' '
-            +badge(icon='image' href='#')= '100'
-            = ' '
-            +badge(icon='image' size='lg' href='#')= '200'
-            = ' '
-            +badge(icon='image' size='xl' href='#')= '300'
-        .c-box
-            +badge(pill=true icon='image' size='sm' href='#')= '50'
-            = ' '
-            +badge(pill=true icon='image' href='#')= '100'
-            = ' '
-            +badge(pill=true icon='image' size='lg' href='#')= '200'
-            = ' '
-            +badge(pill=true icon='image' size='xl' href='#')= '300'
-        .c-box
-            +badge(href='#')= '100'
-            = ' '
-            +badge(quiet=true href='#')= '100'
-            = ' '
-            +badge(pill=true href='#')= '100'
-            = ' '
-            +badge(quiet=true pill=true href='#')= '100'
-        each theme in ['accent', 'positive', 'negative', 'warning']
-            .c-box
-                +badge(theme)(href='#')= 'new'
-                = ' '
-                +badge(theme)(quiet=true href='#')= 'new'
-                = ' '
-                +badge(theme)(pill=true href='#')= 'new'
-                = ' '
-                +badge(theme)(quiet=true pill=true href='#')= 'new'
-        each theme in ['static-black', 'static-white']
-            -
-                const bg = theme.startsWith('static-black') ? 500 : 1000;
-            .c-box(style=`background-color: var(--colors--blue-static--${bg});`)
-                +badge(theme)(href='#')= 'new'
-                = ' '
-                +badge(theme)(quiet=true href='#')= 'new'
-                = ' '
-                +badge(theme)(pill=true href='#')= 'new'
-                = ' '
-                +badge(theme)(quiet=true pill=true href='#')= 'new'
diff --git a/tpl/views/button.pug b/tpl/views/button.pug
index edd8ef6..4b8c59f 100644
--- a/tpl/views/button.pug
+++ b/tpl/views/button.pug
@@ -1,85 +1,206 @@
 mixin view-button 
    +view('button', 'Button')
        .c-box
-            +a-button(size='sm')= 'Button'
+            +button(size='sm')= 'Idle'
            = ' '
-            +a-button= 'Button'
+            +button= 'Idle'
            = ' '
-            +a-button(size='lg')= 'Button'
+            +button(size='lg')= 'Idle'
            = ' '
-            +a-button(size='xl')= 'Button'
+            +button(size='xl')= 'Idle'
+            br
+            br
+            +button(icon='trash' size='sm')
+            = ' '
+            +button(icon='trash')
+            = ' '
+            +button(icon='trash' size='lg')
+            = ' '
+            +button(icon='trash' size='xl')
+            br
+            br
+            +button(icon='user' size='sm')= 'Idle'
+            = ' '
+            +button(icon='user')= 'Idle'
+            = ' '
+            +button(icon='user' size='lg')= 'Idle'
+            = ' '
+            +button(icon='user' size='xl')= 'Idle'
        .c-box
-            +a-button(size='sm' outline=true)= 'Button'
+            +button(pill=true size='sm')= 'Idle'
+            = ' '
+            +button(pill=true)= 'Idle'
+            = ' '
+            +button(pill=true size='lg')= 'Idle'
+            = ' '
+            +button(pill=true size='xl')= 'Idle'
+            br
+            br
+            +button(pill=true icon='trash' size='sm')
+            = ' '
+            +button(pill=true icon='trash')
            = ' '
-            +a-button(outline=true)= 'Button'
+            +button(pill=true icon='trash' size='lg')
            = ' '
-            +a-button(size='lg' outline=true)= 'Button'
+            +button(pill=true icon='trash' size='xl')
+            br
+            br
+            +button(pill=true icon='user' size='sm')= 'Idle'
+            = ' '
+            +button(pill=true icon='user')= 'Idle'
+            = ' '
+            +button(pill=true icon='user' size='lg')= 'Idle'
            = ' '
-            +a-button(size='xl' outline=true)= 'Button'
+            +button(pill=true icon='user' size='xl')= 'Idle'
        .c-box
-            +a-button(postIcon='arrow-right' size='sm')= 'Button'
+            +button= 'Label'
            = ' '
-            +a-button(postIcon='arrow-right')= 'Button'
+            +button(icon='trash')= 'Label'
            = ' '
-            +a-button(postIcon='arrow-right' size='lg')= 'Button'
+            +button(icon='trash')
+            br
+            br
+            +button(quiet=true)= 'Label'
            = ' '
-            +a-button(postIcon='arrow-right' size='xl')= 'Button'
+            +button(quiet=true icon='trash')= 'Label'
+            = ' '
+            +button(quiet=true icon='trash')
        .c-box
-            .l-button-group
+            +button= 'Idle'
-                +a-button= 'Button'
+            = ' '
-                +a-button(disabled=true)= 'Button'
+            +button(highlighted=true)= 'Highlighted'
-                +a-button(outline=true)= 'Button'
+            = ' '
-                +a-button(outline=true disabled=true)= 'Button'
+            +button(selected=true)= 'Selected'
+            = ' '
+            +button(disabled=true)= 'Disabled'
+            = ' '
+            +button(selected=true disabled=true)= 'Selected + disabled'
+            br
            br
-            .l-button-group
+            +button(badge=true)= 'Idle'
-                +a-button(icon='trash')
+            = ' '
-                +a-button(disabled=true icon='trash')
+            +button(badge=true highlighted=true)= 'Highlighted'
-                +a-button(outline=true icon='trash')
+            = ' '
-                +a-button(outline=true disabled=true icon='trash')
+            +button(badge=true selected=true)= 'Selected'
+            = ' '
+            +button(badge=true disabled=true)= 'Disabled'
+            = ' '
+            +button(badge=true selected=true disabled=true)= 'Selected + disabled'
+            br
+            br
+            +button(quiet=true)= 'Idle'
+            = ' '
+            +button(quiet=true highlighted=true)= 'Highlighted'
+            = ' '
+            +button(quiet=true selected=true)= 'Selected'
+            = ' '
+            +button(quiet=true disabled=true)= 'Disabled'
+            = ' '
+            +button(quiet=true selected=true disabled=true)= 'Selected + disabled'
-        each theme in ['primary', 'accent', 'negative']
+        .c-box
+            +button(pill=true)= 'Idle'
+            = ' '
+            +button(pill=true highlighted=true)= 'Highlighted'
+            = ' '
+            +button(pill=true selected=true)= 'Selected'
+            = ' '
+            +button(pill=true disabled=true)= 'Disabled'
+            = ' '
+            +button(pill=true selected=true disabled=true)= 'Selected + disabled'
+            br
+            br
+            +button(pill=true badge=true)= 'Idle'
+            = ' '
+            +button(pill=true badge=true highlighted=true)= 'Highlighted'
+            = ' '
+            +button(pill=true badge=true selected=true)= 'Selected'
+            = ' '
+            +button(pill=true badge=true disabled=true)= 'Disabled'
+            = ' '
+            +button(pill=true badge=true selected=true disabled=true)= 'Selected + disabled'
+            br
+            br
+            +button(pill=true quiet=true)= 'Idle'
+            = ' '
+            +button(pill=true quiet=true highlighted=true)= 'Highlighted'
+            = ' '
+            +button(pill=true quiet=true selected=true)= 'Selected'
+            = ' '
+            +button(pill=true quiet=true disabled=true)= 'Disabled'
+            = ' '
+            +button(pill=true quiet=true selected=true disabled=true)= 'Selected + disabled'
+        each theme, i in ['accent', 'positive', 'negative', 'warning']
            .c-box
-                .l-button-group
+                +button(theme=theme)= 'Idle'
-                    +a-button(variant=theme)= 'Button'
+                = ' '
-                    +a-button(variant=theme disabled=true)= 'Button'
+                +button(theme=theme highlighted=true)= 'Highlighted'
-                    +a-button(variant=theme outline=true)= 'Button'
+                = ' '
-                    +a-button(variant=theme outline=true disabled=true)= 'Button'
+                +button(theme=theme selected=true)= 'Selected'
+                = ' '
+                +button(theme=theme disabled=true)= 'Disabled'
+                = ' '
+                +button(theme=theme selected=true disabled=true)= 'Selected + disabled'
                br
-                .l-button-group
+                br
-                    +a-button(variant=theme icon='trash')
+                +button(theme=theme badge=true)= 'Idle'
-                    +a-button(variant=theme disabled=true icon='trash')
+                = ' '
-                    +a-button(variant=theme outline=true icon='trash')
+                +button(theme=theme badge=true highlighted=true)= 'Highlighted'
-                    +a-button(variant=theme outline=true disabled=true icon='trash')
+                = ' '
+                +button(theme=theme badge=true selected=true)= 'Selected'
+                = ' '
+                +button(theme=theme badge=true disabled=true)= 'Disabled'
+                = ' '
+                +button(theme=theme badge=true selected=true disabled=true)= 'Selected + disabled'
+                br
+                br
+                +button(theme=theme quiet=true)= 'Idle'
+                = ' '
+                +button(theme=theme quiet=true highlighted=true)= 'Highlighted'
+                = ' '
+                +button(theme=theme quiet=true selected=true)= 'Selected'
+                = ' '
+                +button(theme=theme quiet=true disabled=true)= 'Disabled'
+                = ' '
+                +button(theme=theme quiet=true selected=true disabled=true)= 'Selected + disabled'
        each theme in ['static-black', 'static-white']
            -
                const bg = theme.startsWith('static-black') ? 500 : 1000;
            .c-box(style=`background-color: var(--colors--blue-static--${bg});`)
-                .l-button-group
+                +button(theme=theme)= 'Idle'
-                    +a-button(variant=theme)= 'Button'
+                = ' '
-                    +a-button(variant=theme disabled=true)= 'Button'
+                +button(theme=theme highlighted=true)= 'Highlighted'
-                    +a-button(variant=theme outline=true)= 'Button'
+                = ' '
-                    +a-button(variant=theme outline=true disabled=true)= 'Button'
+                +button(theme=theme selected=true)= 'Selected'
+                = ' '
+                +button(theme=theme disabled=true)= 'Disabled'
+                = ' '
+                +button(theme=theme selected=true disabled=true)= 'Selected + disabled'
+                br
+                br
+                +button(theme=theme badge=true)= 'Idle'
+                = ' '
+                +button(theme=theme badge=true highlighted=true)= 'Highlighted'
+                = ' '
+                +button(theme=theme badge=true selected=true)= 'Selected'
+                = ' '
+                +button(theme=theme badge=true disabled=true)= 'Disabled'
+                = ' '
+                +button(theme=theme badge=true selected=true disabled=true)= 'Selected + disabled'
                br
-                .l-button-group
-                    +a-button(variant=theme icon='trash')
-                    +a-button(variant=theme disabled=true icon='trash')
-                    +a-button(variant=theme outline=true icon='trash')
-                    +a-button(variant=theme outline=true disabled=true icon='trash')
-            .c-box(style=`background-color: var(--colors--blue-static--${bg});`)
-                .l-button-group
-                    +a-button(variant=theme primary=true)= 'Button'
-                    +a-button(variant=theme primary=true disabled=true)= 'Button'
-                    +a-button(variant=theme primary=true outline=true)= 'Button'
-                    +a-button(variant=theme primary=true outline=true disabled=true)= 'Button'
                br
-                .l-button-group
+                +button(theme=theme quiet=true)= 'Idle'
-                    +a-button(variant=theme primary=true icon='trash')
+                = ' '
-                    +a-button(variant=theme primary=true disabled=true icon='trash')
+                +button(theme=theme quiet=true highlighted=true)= 'Highlighted'
-                    +a-button(variant=theme primary=true outline=true icon='trash')
+                = ' '
-                    +a-button(variant=theme primary=true outline=true disabled=true icon='trash')
+                +button(theme=theme quiet=true selected=true)= 'Selected'
+                = ' '
+                +button(theme=theme quiet=true disabled=true)= 'Disabled'
+                = ' '
+                +button(theme=theme quiet=true selected=true disabled=true)= 'Selected + disabled'
diff --git a/tpl/views/card.pug b/tpl/views/card.pug
index 633cf01..e982925 100644
--- a/tpl/views/card.pug
+++ b/tpl/views/card.pug
@@ -1,6 +1,63 @@
 mixin view-card 
    +view('card', 'Card')(wide=true)
+        .l-card-list
+            +card(href='#' class='l-card-list__card')
+                +card-body
+                    strong= 'Lorem ipsum dolor'
+                    = 'sit amet'
+            +card(href='#' class='l-card-list__card' shadow=true)
+                +card-body
+                    strong= 'Lorem ipsum dolor'
+                    = 'sit amet'
+            +card(href='#' class='l-card-list__card' borderless=true)
+                +card-body
+                    strong= 'Lorem ipsum dolor'
+                    = 'sit amet'
+            +card(href='#' class='l-card-list__card' shadow=true borderless=true)
+                +card-body
+                    strong= 'Lorem ipsum dolor'
+                    = 'sit amet'
+        +divider('faint')(class='u-mb-700')
+        .l-card-list.l-card-list--merge
+            +card(href='#' class='l-card-list__card' borderless=true)
+                +card-body
+                    strong= 'Lorem ipsum dolor'
+                    = 'sit amet'
+            +card(href='#' class='l-card-list__card' borderless=true)
+                +card-body
+                    strong= 'Lorem ipsum dolor'
+                    = 'sit amet'
+            +card(href='#' class='l-card-list__card' borderless=true)
+                +card-body
+                    strong= 'Lorem ipsum dolor'
+                    = 'sit amet'
+        +divider('faint')(class='u-mb-700')
+        .l-card-list.l-card-list--merge.l-card-list--borderless.l-card-list--shadow
+            +card(href='#' class='l-card-list__card' borderless=true)
+                +card-body
+                    strong= 'Lorem ipsum dolor'
+                    = 'sit amet'
+            +card(href='#' class='l-card-list__card' borderless=true)
+                +card-body
+                    strong= 'Lorem ipsum dolor'
+                    = 'sit amet'
+            +card(href='#' class='l-card-list__card' borderless=true)
+                +card-body
+                    strong= 'Lorem ipsum dolor'
+                    = 'sit amet'
+        +divider('faint')(class='u-mb-700')
        .l-card-list.l-card-list--masonry
+            +card(thumbnail=true href='#' class='l-card-list__card')
+                +card-image(src='Drawing_Half.png')
+                +card-body
+                    +card-title= 'XS Heading'
            +card(href='#' class='l-card-list__card')
                +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '21 / 9' })
                +card-avatar(src='avatar.png')
@@ -26,29 +83,30 @@ mixin view-card
                +card-body
                    .l-media
                        .l-media__block
-                            +badge('positive')(quiet=true icon='repeat' href='#')
+                            +button(theme='positive' badge=true pill=true size='sm' icon='repeat' href='#')
                                strong= '12'
                        .l-media__block
-                            +badge('warning')(quiet=true icon='star' href='#')
+                            +button(theme='warning' badge=true pill=true size='sm' icon='star' href='#')
                                strong= '34'
                        .l-media__block.u-mis-auto
-                            +a-button(primary=true)= 'Reply'
+                            +button(selected=true)= 'Reply'
            +card(quiet=true href='#' class='l-card-list__card')
                +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '21 / 9' })
+                    +button(badge=true selected=true)= 'Drawings'
                +card-body
                    +card-title= 'XS Heading'
                    +card-content
                        p= loremIpsum
                        p= loremIpsum
-        each layout in ['grid', 'masonry', 'masonry-h']
+        each layout in ['grid', 'grid-sm', 'masonry', 'masonry-h']
            -
                let quiet = true
                let classes = {
                    'l-card-list': true,
-                    'l-card-list--aspect-5/4': layout === 'grid',
+                    'l-card-list--aspect-5/4': ['grid', 'grid-sm'].includes(layout),
                    'l-card-list--quiet': quiet,
                }
                classes[`l-card-list--${layout}`] = true;
@@ -59,7 +117,7 @@ mixin view-card
            div(class=classes)
                each img, i in ['Drawing_Half.png', '0000 Cover@0.5x.webp', 'avatar.png', '01 Design Cody.png', 'avatar.png', 'Drawing_Half.png']
                    +card(quiet=quiet href='#' class='l-card-list__card')
-                        +card-image(src=img class='l-card-list__card-image')
+                        +card-image(src=img list=true)
                        +card-body
                            .l-media
                                .l-media__block.l-media__block--main
diff --git a/tpl/views/dialog.pug b/tpl/views/dialog.pug
index 5a659dd..9c2e520 100644
--- a/tpl/views/dialog.pug
+++ b/tpl/views/dialog.pug
@@ -53,8 +53,8 @@ mixin view-dialog
                +dialog
                    +slot('header')
                        .l-media__block.l-flex
-                            +action-button(quiet=true icon='chevron-left')
+                            +button(quiet=true icon='chevron-left')
-                            +action-button(quiet=true icon='chevron-right')
+                            +button(quiet=true icon='chevron-right')
                        .l-media__block.l-media__block--main
                            +div-heading('xl')(class="u-mt-0")= 'Tags'
                    +slot('sidebar')
diff --git a/tpl/views/divider.pug b/tpl/views/divider.pug
index e2f2e01..5429ab5 100644
--- a/tpl/views/divider.pug
+++ b/tpl/views/divider.pug
@@ -12,24 +12,45 @@ mixin view-divider
        .c-box
            +div-heading('xs')= 'Heading'
+            +divider('quiet')
+            p= loremIpsum
+        .c-box
+            +div-heading('xs')= 'Heading'
            +divider('faint')
            p= loremIpsum
        .c-box
            +divider('strong')= 'Strong'
            +divider('medium')= 'Medium'
+            +divider('quiet')= 'Quiet'
            +divider('faint')= 'Faint'
            +divider('strong')
            +divider('medium')
+            +divider('quiet')
            +divider('faint')
+        .c-box
+            .l-media(style="height: 1em")
+                +divider('strong')(vertical=true class="l-media__block")
+                +divider('medium')(vertical=true class="l-media__block")
+                +divider('quiet')(vertical=true class="l-media__block")
+                +divider('faint')(vertical=true class="l-media__block")
+            .l-media(style="height: 1em")
+                +divider('strong')(dot=true class="l-media__block")
+                +divider('medium')(dot=true class="l-media__block")
+                +divider('quiet')(dot=true class="l-media__block")
+                +divider('faint')(dot=true class="l-media__block")
        each theme in ['accent', 'negative']
            .c-box
                +divider('strong')(color=theme)= 'Strong'
                +divider('medium')(color=theme)= 'Medium'
+                +divider('quiet')(color=theme)= 'Quiet'
                +divider('faint')(color=theme)= 'Faint'
                +divider('strong')(color=theme)
                +divider('medium')(color=theme)
+                +divider('quiet')(color=theme)
                +divider('faint')(color=theme)
        each theme in ['static-black', 'static-white']
@@ -39,7 +60,9 @@ mixin view-divider
            .c-box(style=`background-color: var(--colors--blue-static--${bg});`)
                +divider('strong')(color=theme)= 'Strong'
                +divider('medium')(color=theme)= 'Medium'
+                +divider('quiet')(color=theme)= 'Quiet'
                +divider('faint')(color=theme)= 'Faint'
                +divider('strong')(color=theme)
                +divider('medium')(color=theme)
+                +divider('quiet')(color=theme)
                +divider('faint')(color=theme)
diff --git a/tpl/views/emoji.pug b/tpl/views/emoji.pug
index 3d01ca7..d6e2b56 100644
--- a/tpl/views/emoji.pug
+++ b/tpl/views/emoji.pug
@@ -1,14 +1,14 @@
 mixin view-emoji 
    +view('emoji', 'Emoji')
        .c-box
-            +action-button(icon='trash')
+            +button(icon='trash')
            = ' '
-            +action-button
+            +button
                +emoji('drgn')(size='icon')
            = ' '
-            +action-button(icon='trash' quiet=true)
+            +button(icon='trash' quiet=true)
            = ' '
-            +action-button(quiet=true)
+            +button(quiet=true)
                +emoji('drgn')(size='icon')
        .c-box
diff --git a/tpl/views/form.pug b/tpl/views/form.pug
index 5b24757..ca9e224 100644
--- a/tpl/views/form.pug
+++ b/tpl/views/form.pug
@@ -27,4 +27,4 @@ mixin view-form
                        +checkbox= 'I\'ve read and accept the terms and conditions'
                    +form-item('')
-                        +a-button(variant='primary')= 'Register'
+                        +button(variant='primary')= 'Register'
diff --git a/tpl/views/heading.pug b/tpl/views/heading.pug
index bc16cee..35c4de4 100644
--- a/tpl/views/heading.pug
+++ b/tpl/views/heading.pug
@@ -39,3 +39,47 @@ mixin view-heading
            +div-heading('md', true)= 'MD display Heading'
            +div-heading('sm', true)= 'SM display Heading'
            +div-heading('xs', true)= 'XS display Heading'
+        each theme in ['static-black', 'static-white']
+            -
+                const bg = theme.startsWith('static-black') ? 500 : 1000;
+            .c-box(style=`background-color: var(--colors--blue-static--${bg});`)
+                h1.u-mt-0= 'H1 default'
+                h2= 'H2 default'
+                h3= 'H3 default'
+                h4= 'H4 default'
+                h5= 'H5 default'
+                h6= 'H6 default'
+            .c-box.s-headings(class=`s-headings--${theme}` style=`background-color: var(--colors--blue-static--${bg});`)
+                h1.u-mt-0= 'H1 styled'
+                h2= 'H2 styled'
+                h3= 'H3 styled'
+                h4= 'H4 styled'
+                h5= 'H5 styled'
+                h6= 'H6 styled'
+            .c-box.s-headings.s-headings--display(class=`s-headings--${theme}` style=`background-color: var(--colors--blue-static--${bg});`)
+                h1.u-mt-0= 'H1 display styled'
+                h2= 'H2 display styled'
+                h3= 'H3 display styled'
+                h4= 'H4 display styled'
+                h5= 'H5 display styled'
+                h6= 'H6 display styled'
+            .c-box(style=`background-color: var(--colors--blue-static--${bg});`)
+                +div-heading('xxl')(color=theme class='u-mt-0')= 'XXL Heading'
+                +div-heading('xl')(color=theme)= 'XL Heading'
+                +div-heading('lg')(color=theme)= 'LG Heading'
+                +div-heading('md')(color=theme)= 'MD Heading'
+                +div-heading('sm')(color=theme)= 'SM Heading'
+                +div-heading('xs')(color=theme)= 'XS Heading'
+            .c-box(style=`background-color: var(--colors--blue-static--${bg});`)
+                +div-heading('xxl', true)(color=theme class='u-mt-0')= 'XXL display Heading'
+                +div-heading('xl', true)(color=theme)= 'XL display Heading'
+                +div-heading('lg', true)(color=theme)= 'LG display Heading'
+                +div-heading('md', true)(color=theme)= 'MD display Heading'
+                +div-heading('sm', true)(color=theme)= 'SM display Heading'
+                +div-heading('xs', true)(color=theme)= 'XS display Heading'
diff --git a/tpl/views/menu.pug b/tpl/views/menu.pug
index 7c5df03..682f8bb 100644
--- a/tpl/views/menu.pug
+++ b/tpl/views/menu.pug
@@ -2,7 +2,7 @@ mixin view-menu
    +view('menu', 'Menu')
        .c-box
            div(style={ display: 'flex', 'flex-direction': 'column', 'align-items': 'flex-start' })
-                +action-button(quiet=true selected=true)= 'Menu'
+                +button(quiet=true selected=true)= 'Menu'
                +popover
                    +menu
                        +menu-slot(class='l-media')
diff --git a/tpl/views/navbar.pug b/tpl/views/navbar.pug
new file mode 100644
index 0000000..9272796
--- /dev/null
+++ b/tpl/views/navbar.pug
@@ -0,0 +1,41 @@
+mixin view-navbar 
+    +view('navbar', 'Navbar')
+        .c-box
+            +navbar
+                +navbar-item= 'Home'
+                +navbar-item(selected=true)= 'Art'
+                +navbar-item= 'Emojis'
+        .c-box
+            +navbar(quiet=true)
+                +navbar-item= 'Home'
+                +navbar-item(selected=true)= 'Art'
+                +navbar-item= 'Emojis'
+        .c-box
+            +navbar(quiet=true)
+                +navbar-item(selected=true preIcon="arrow-left")= 'Home'
+                +navbar-item= 'Art'
+                +navbar-item= 'Emojis'
+        .c-box
+            +navbar(quiet=true)
+                +navbar-item(icon="image")= 'Home'
+                +navbar-item(icon="video" selected=true)= 'Art'
+                +navbar-item(icon="user")= 'Emojis'
+        each theme in ['static-black', 'static-white']
+            -
+                const bg = theme.startsWith('static-black') ? 500 : 1000;
+            .c-box(style=`background-color: var(--colors--blue-static--${bg});`)
+                +navbar(theme=theme)
+                    +navbar-item(icon="image")= 'Home'
+                    +navbar-item(icon="video" selected=true)= 'Art'
+                    +navbar-item(icon="user")= 'Emojis'
+            .c-box(style=`background-color: var(--colors--blue-static--${bg});`)
+                +navbar(quiet=true theme=theme)
+                    +navbar-item(icon="image")= 'Home'
+                    +navbar-item(icon="video" selected=true)= 'Art'
+                    +navbar-item(icon="user")= 'Emojis'
diff --git a/tpl/views/popover.pug b/tpl/views/popover.pug
index b269596..bd78471 100644
--- a/tpl/views/popover.pug
+++ b/tpl/views/popover.pug
@@ -1,6 +1,6 @@
 mixin view-popover
    +view('popover', 'Popover')
        .c-box
-            +action-button(quiet=true selected=true)= 'Popover'
+            +button(quiet=true selected=true)= 'Popover'
            +popover
                = loremIpsum
diff --git a/tpl/views/text-field.pug b/tpl/views/text-field.pug
index 165e2ce..4309ff6 100644
--- a/tpl/views/text-field.pug
+++ b/tpl/views/text-field.pug
@@ -16,8 +16,8 @@ mixin view-text-field
            div
                +text-field(placeholder='Just landed in L.A.' class="u-p-50")
                    +slot('pre')
-                        +action-button(quiet=true class='l-media__block')= 'Volpeon'
+                        +button(quiet=true class='l-media__block')= 'Volpeon'
                        +divider('vertical')(class='u-mis-50')
                    +slot('post')
-                        +action-button(quiet=true icon='smile' class='l-media__block')
+                        +button(quiet=true icon='smile' class='l-media__block')
-                        +action-button(quiet=true icon='send' class='l-media__block')
+                        +button(quiet=true icon='send' class='l-media__block')