@semanticus/semanticus-css 0.4.0 → 0.7.0

package/dist/semanticus.size.slim.css

@@ -1 +1 @@
-:root,:host{--font-size:1rem;--spacing:.75rem;--block-spacing-vertical:1.2rem;--block-spacing-horizontal:1.2rem;--form-element-spacing-vertical:.4rem;--form-element-spacing-horizontal:.6rem}
+:root{--transparent:transparent;--font-family-emoji:"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-family-sans-serif:system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif, var(--font-family-emoji);--font-family-monospace:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace, var(--font-family-emoji);--font-family:var(--font-family-sans-serif);--line-height:1.5;--font-weight:400;--font-size:100%;--text-underline-offset:.1rem;--border-radius:.25rem;--border-width:.0625rem;--outline-width:.125rem;--transition:.2s ease-in-out;--spacing:1rem;--responsive-multiplier:1;--typography-spacing-vertical:1rem;--block-spacing-vertical:var(--spacing);--block-spacing-horizontal:var(--spacing);--grid-column-gap:var(--spacing);--grid-row-gap:var(--spacing);--form-element-spacing-vertical:.75rem;--form-element-spacing-horizontal:1rem;--group-shadow:0 0 0 transparent;--group-shadow-focus-with-button:0 0 0 var(--outline-width) var(--color-primary-focus);--group-shadow-focus-with-input:0 0 0 .0625rem var(--form-border-color);--modal-overlay-backdrop-filter:blur(.375rem);--nav-link-spacing-vertical:.5rem;--nav-link-spacing-horizontal:.5rem;--nav-breadcrumb-divider:">";--icon-checkbox:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--icon-minus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");--icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");--icon-date:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");--icon-time:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");--icon-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");--icon-close:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");--icon-loading:url("data:image/svg+xml,%3Csvg fill='none' height='24' width='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite; transform-origin: center center; %7D circle %7B stroke-dasharray: 75,100; stroke-dashoffset: -5; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; %7D @keyframes rotate %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D @keyframes dash %7B 0%25 %7B stroke-dasharray: 1,100; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -17.5; %7D 100%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -62; %7D %7D %3C/style%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='rgb(136, 145, 164)' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E");--sidebar-width:25%}@media (width>=576px){:root{--font-size:106.25%;--sidebar-width:max(25%, 150px);--responsive-multiplier:1.25}:host{--font-size:106.25%;--sidebar-width:max(25%, 150px);--responsive-multiplier:1.25}}@media (width>=768px){:root{--font-size:112.5%;--sidebar-width:max(22%, 180px);--responsive-multiplier:1.5}:host{--font-size:112.5%;--sidebar-width:max(22%, 180px);--responsive-multiplier:1.5}}@media (width>=1024px){:root{--font-size:118.75%;--sidebar-width:max(20%, 200px);--responsive-multiplier:1.75}:host{--font-size:118.75%;--sidebar-width:max(20%, 200px);--responsive-multiplier:1.75}}@media (width>=1280px){:root{--font-size:125%;--sidebar-width:max(18%, 220px);--responsive-multiplier:2}:host{--font-size:125%;--sidebar-width:max(18%, 220px);--responsive-multiplier:2}}@media (width>=1536px){:root{--font-size:131.25%;--sidebar-width:clamp(240px, 16%, 300px);--responsive-multiplier:2.25}:host{--font-size:131.25%;--sidebar-width:clamp(240px, 16%, 300px);--responsive-multiplier:2.25}}:root{--font-size:1rem;--spacing:.75rem;--block-spacing-vertical:1.2rem;--block-spacing-horizontal:1.2rem;--form-element-spacing-vertical:.5rem;--form-element-spacing-horizontal:.7rem}:host{--font-size:1rem;--spacing:.75rem;--block-spacing-vertical:1.2rem;--block-spacing-horizontal:1.2rem;--form-element-spacing-vertical:.5rem;--form-element-spacing-horizontal:.7rem}@media (width>=1280px){:root{--responsive-multiplier:1.85}:host{--responsive-multiplier:1.85}}@media (width>=1536px){:root{--responsive-multiplier:2}:host{--responsive-multiplier:2}}[role=search] button,[role=search] [role=button],[role=group] button,[role=group] [role=button]{--form-element-spacing-horizontal:1rem}[role=search] [type=submit]{--form-element-spacing-horizontal:1rem}[role=search] [type=button]{--form-element-spacing-horizontal:1rem}[role=group] [type=submit]{--form-element-spacing-horizontal:1rem}[role=group] [type=button]{--form-element-spacing-horizontal:1rem}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@semanticus/semanticus-css",
-  "version": "0.4.0",
+  "version": "0.7.0",
   "description": "lightweight CSS framework that prioritizes semantic HTML and ARIA-focused accessibility, with a small set of atomic utilities",
   "author": "Joao Goncalves",
   "style": "./dist/semanticus.css",
@@ -88,10 +88,10 @@
     "release:update-cdn-urls": "node scripts/update-cdn-urls.js",
     "build": "npm run build:css && npm run build:palettes && npm run build:sizes && npm run build:update-size-claims",
     "build:css": "npm run build:full && npm run build:semantics && npm run build:variants && npm run build:utilities",
-    "build:full": "lightningcss --bundle --minify --browserslist src/index.css -o dist/semanticus.css",
-    "build:semantics": "lightningcss --bundle --minify --browserslist src/semantics/index.css -o dist/semanticus-semantics.css",
-    "build:variants": "lightningcss --bundle --minify --browserslist src/variants/index.css -o dist/semanticus-variants.css",
-    "build:utilities": "lightningcss --bundle --minify --browserslist src/utilities/index.css -o dist/semanticus-utilities.css",
+    "build:full": "lightningcss --bundle --minify --browserslist src/index.css -o dist/semanticus.css --custom-media",
+    "build:semantics": "lightningcss --bundle --minify --browserslist src/semantics/index.css -o dist/semanticus-semantics.css --custom-media",
+    "build:variants": "lightningcss --bundle --minify --browserslist src/variants/index.css -o dist/semanticus-variants.css --custom-media",
+    "build:utilities": "lightningcss --bundle --minify --browserslist src/utilities/index.css -o dist/semanticus-utilities.css --custom-media",
     "build:palettes": "node scripts/build-palettes.js",
     "build:sizes": "node scripts/build-sizes.js",
     "build:update-size-claims": "node scripts/update-size-claims.js",

package/src/index.css

@@ -5,7 +5,7 @@
  */
 
 /* Global variables */
-@import './_variables.css';
+@import './variables/_all.css';
 
 /* Normalize */
 @import './_normalize.css';
@@ -13,8 +13,8 @@
 /* Semantics */
 @import './semantics/modules.css';
 
-/* Variants */
-@import './variants/modules.css';
-
 /* Utilities */
 @import './utilities/modules.css';
+
+/* Variants */
+@import './variants/modules.css';

package/src/semantics/_article.css

@@ -1,6 +1,12 @@
 /**
- * Article (<article>)
- * Represents a self-contained composition that can stand alone
- * and be independently distributed (blog post, widget, etc.)
- * Styling is provided by the .card class
+ * Article fills up the available width, and stretches to fill the available height.
+ * Stacks its children vertically.
  */
+article {
+  --block-spacing-vertical: calc(var(--spacing) * var(--responsive-multiplier));
+  --block-spacing-horizontal: calc(var(--spacing) * var(--responsive-multiplier));
+
+  width: 100%;
+  padding-block: var(--block-spacing-vertical);
+  padding-inline: var(--block-spacing-horizontal);
+}

package/src/semantics/_aside.css

@@ -0,0 +1,16 @@
+/**
+ * Aside its width changes according to breakpoints (see src/variables/_shared.css),
+ * its height grows to fill the available space,
+ * and stacks its children in a column with space between them (like a <nav> would).
+ * In case of a single child, this child will fill the entire height.
+ */
+aside {
+  padding-inline: var(--block-spacing-horizontal);
+  width: var(--sidebar-width) !important;
+
+  :where(ol, ul, li) {
+    align-items: stretch !important;
+    display: flex;
+    flex-direction: column;
+  }
+}

package/src/semantics/_body.css

@@ -1,10 +1,8 @@
+/**
+ * Body fills up the available width, and has the same height as the viewport.
+ * Stacks its children vertically.
+ */
 body {
   width: 100%;
-  margin: 0;
-
-  & > header,
-  & > main,
-  & > footer {
-    padding-block: var(--block-spacing-vertical);
-  }
+  min-height: 100svh;
 }

package/src/semantics/_button.css

@@ -87,13 +87,15 @@ button:focus, button:is([aria-current]:not([aria-current=false])):focus,
 }
 
 [type=reset]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
-[type=file]::file-selector-button:is(:hover, :active, :focus) {
+[type=file]::file-selector-button:is(:hover, :active, :focus),
+[aria-label="Close"]:is(:hover, :active, :focus) {
   --color-background: var(--color-secondary-hover-bg);
   --border-color: var(--color-secondary-hover-border);
   --color-text: var(--color-secondary-inverse);
 }
 
 [type=reset]:focus,
+[aria-label="Close"]:focus,
 [type=reset]:is([aria-current]:not([aria-current=false])):focus,
 [type=file]::file-selector-button:focus {
   --shadow-lg: var(--button-shadow-hover, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--color-secondary-focus);
@@ -104,3 +106,25 @@ fieldset[disabled] :is(button, [type=submit], [type=button], [type=reset], [role
   opacity: 0.5;
   pointer-events: none;
 }
+
+aside {
+  nav {
+    :where(button, [role=button], [type=button], input:not([type=checkbox], [type=radio], [type=range], [type=file]), select) {
+      display: block !important;
+      width: 100%;
+    }
+  }
+}
+
+nav {
+  :where(button, [role=button], [type=button], input:not([type=checkbox], [type=radio], [type=range], [type=file]), select) {
+    --form-element-spacing-vertical: calc(var(--nav-link-spacing-vertical) - var(--border-width) * 2);
+    --form-element-spacing-horizontal: var(--nav-link-spacing-horizontal);
+
+    height: auto;
+    margin-right: inherit;
+    margin-bottom: 0;
+    margin-left: inherit;
+    padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
+  }
+}

package/src/semantics/_details.css

@@ -164,7 +164,7 @@ details:has(> summary[aria-haspopup="menu"]) {
 
   & > :where(summary + ul[role="menu"]) {
     display: flex;
-    z-index: 99;
+    z-index: var(--max-z-index);
     position: absolute;
     left: 0;
     flex-direction: column;
@@ -253,10 +253,13 @@ details:has(> summary[aria-haspopup="menu"]) {
   }
 }
 
+label > details:has(> summary[aria-haspopup="menu"]) {
+  margin-top: calc(var(--spacing) * 0.25);
+}
+
 nav details:has(> summary[aria-haspopup="menu"]) {
   margin-bottom: 0;
   display: inline;
-  margin: calc(var(--nav-element-spacing-vertical) * -1) 0;
 
   & > summary::after {
     transform: rotate(0deg) translateX(0rem);
@@ -265,7 +268,7 @@ nav details:has(> summary[aria-haspopup="menu"]) {
   & > :where(summary:not([role])) {
     display: flex;
     align-items: center;
-    height: calc(1rem * var(--line-height) + var(--nav-link-spacing-vertical) * 2);
+    height: auto;
     padding: calc(var(--nav-link-spacing-vertical) - var(--border-width) * 2) var(--nav-link-spacing-horizontal);
   }
 
@@ -282,11 +285,7 @@ nav details:has(> summary[aria-haspopup="menu"]) {
     display: flex;
     align-items: center;
     width: auto;
-    height: calc(1rem * var(--line-height) + var(--nav-link-spacing-vertical) * 2);
+    height: auto;
     padding: calc(var(--nav-link-spacing-vertical) - var(--border-width) * 2) var(--nav-link-spacing-horizontal);
   }
 }
-
-label > details:has(> summary[aria-haspopup="menu"]) {
-  margin-top: calc(var(--spacing) * 0.25);
-}

package/src/semantics/_dialog.css

@@ -41,6 +41,7 @@ dialog {
   /* Modal content box - styled like a card */
   /* Works with: <dialog><article>...</article></dialog> */
   & > article {
+    position: relative;
     width: 100%;
     max-height: calc(100vh - var(--spacing) * 2);
     margin: var(--spacing);
@@ -60,6 +61,7 @@ dialog {
 
     /* Header styling */
     & > header {
+      width: calc(100% + var(--block-spacing-horizontal) * 2);
       margin: calc(var(--block-spacing-vertical) * -1) calc(var(--block-spacing-horizontal) * -1) var(--block-spacing-vertical);
       padding: calc(var(--block-spacing-vertical) * 0.66) var(--block-spacing-horizontal);
       background-color: var(--card-section-bg);
@@ -74,6 +76,7 @@ dialog {
 
     /* Footer styling */
     & > footer {
+      width: calc(100% + var(--block-spacing-horizontal) * 2);
       margin: var(--block-spacing-vertical) calc(var(--block-spacing-horizontal) * -1) calc(var(--block-spacing-vertical) * -1);
       padding: calc(var(--block-spacing-vertical) * 0.66) var(--block-spacing-horizontal);
       background-color: var(--card-section-bg);
@@ -91,22 +94,16 @@ dialog {
       }
     }
 
-    /* Close button in header */
-    & > header :is(a, button)[rel=prev] {
+    /* Close button styling */
+    & :is(a, button)[rel=prev]:not([role=button]) {
       margin: 0;
-      margin-left: var(--spacing);
       padding: 0;
-      float: right;
-    }
-
-    /* Close button styling */
-    & :is(a, button)[rel=prev] {
+      position: absolute;
       display: block;
       width: 1rem;
       height: 1rem;
-      margin-top: calc(var(--spacing) * -1);
-      margin-bottom: var(--spacing);
-      margin-left: auto;
+      top: calc(var(--block-spacing-vertical) * .66);
+      right: var(--block-spacing-horizontal);
       border: none;
       border-radius: 0;
       background-image: var(--icon-close);
@@ -117,13 +114,10 @@ dialog {
       box-shadow: none;
       opacity: 0.5;
       transition: opacity var(--transition);
-    }
 
-    & :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
-      --color-background: transparent;
-      --border-color: transparent;
-      box-shadow: none;
-      opacity: 1;
+      &:hover {
+        opacity: 1;
+      }
     }
   }
 

package/src/semantics/_footer.css

@@ -0,0 +1,12 @@
+/**
+ * Footer
+ */
+footer {
+  --typography-spacing-vertical: 0;
+  --typography-headings-top: 0;
+  --block-spacing-vertical: calc(var(--spacing) * var(--responsive-multiplier));
+  --block-spacing-horizontal: calc(var(--spacing) * var(--responsive-multiplier));
+
+  width: 100%;
+  padding-block: var(--block-spacing-vertical);
+}

package/src/semantics/_header.css

@@ -0,0 +1,12 @@
+/**
+ * Header
+ */
+header {
+  --typography-spacing-vertical: 0;
+  --typography-headings-top: 0;
+  --block-spacing-vertical: calc(var(--spacing) * var(--responsive-multiplier));
+  --block-spacing-horizontal: calc(var(--spacing) * var(--responsive-multiplier));
+
+  width: 100%;
+  padding-block: var(--block-spacing-vertical);
+}

package/src/semantics/_links.css

@@ -31,3 +31,20 @@
 a[role=button] {
   display: inline-block;
 }
+
+aside {
+  nav {
+    a:not([role=button]), [role=link] {
+      display: block !important;
+      width: 100%;
+    }
+  }
+}
+
+nav {
+  a:not([role=button]), [role=link] {
+    &:not(:hover) {
+      text-decoration: none;
+    }
+  }
+}

package/src/semantics/_main.css

@@ -1,3 +1,10 @@
+/**
+ * Main fills up the available width, and has a height defined by its content.
+ * Stacks its children vertically.
+ */
 main {
-  display: block;
+  --block-spacing-vertical: calc(var(--spacing) * var(--responsive-multiplier));
+  --block-spacing-horizontal: calc(var(--spacing) * var(--responsive-multiplier));
+
+  width: 100%;
 }

package/src/semantics/_nav.css

@@ -1,116 +1,83 @@
-@charset "UTF-8";
 /**
  * Nav
  */
-:where(nav li)::before {
-  float: left;
-  content: "​";
-}
+nav {
+  --typography-spacing-vertical: 0;
+  --typography-headings-top: 0;
 
-:where(nav, nav ul) {
   display: flex;
-}
-
-:where(nav) {
+  gap: var(--spacing);
+  align-items: center;
   justify-content: space-between;
   overflow: visible;
-}
 
-:where(nav ol, nav ul) {
-  align-items: center;
-  margin-bottom: 0;
-  padding: 0;
-  list-style: none;
-}
-
-:where(nav ol:first-of-type, nav ul:first-of-type) {
-  margin-left: calc(var(--nav-element-spacing-horizontal) * -1);
-}
-
-:where(nav ol:last-of-type, nav ul:last-of-type) {
-  margin-right: calc(var(--nav-element-spacing-horizontal) * -1);
-}
-
-:where(nav li) {
-  display: inline-block;
-  margin: 0;
-  padding: var(--nav-element-spacing-vertical) var(--nav-element-spacing-horizontal);
-}
+  & > * {
+    margin: 0 !important;
+  }
 
-nav li {
-  & :where(a, [role=link]) {
-    display: inline-block;
-    margin: calc(var(--nav-link-spacing-vertical) * -1) calc(var(--nav-link-spacing-horizontal) * -1);
-    padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
-    border-radius: var(--border-radius);
+  &[aria-label=breadcrumb] {
+    align-items: center;
+    justify-content: start;
+
+    & ul li {
+      &:not(:first-child) {
+        margin-inline-start: calc(var(--nav-link-spacing-horizontal) * 2);
+      }
+
+      &:not(:last-child)::after {
+        display: inline-block;
+        position: absolute;
+        width: calc(var(--nav-link-spacing-horizontal) * 4);
+        content: var(--nav-breadcrumb-divider);
+        color: var(--color-text-muted);
+        text-align: center;
+        text-decoration: none;
+        white-space: nowrap;
+      }
+    }
 
-    &:not(:hover) {
+    & :where(a[aria-current]:not([aria-current=false]), [role=link][aria-current]:not([aria-current=false])) {
+      background-color: transparent;
+      color: inherit;
       text-decoration: none;
+      pointer-events: none;
     }
   }
 
-  & :where(button, [role=button], [type=button], input:not([type=checkbox], [type=radio], [type=range], [type=file]), select) {
-    height: auto;
-    margin-right: inherit;
-    margin-bottom: 0;
-    margin-left: inherit;
-    padding: calc(var(--nav-link-spacing-vertical) - var(--border-width) * 2) var(--nav-link-spacing-horizontal);
-  }
-}
+  ul, ol {
+    align-items: center;
+    display: flex;
+    gap: var(--spacing);
+    list-style: none;
+    margin-bottom: 0 !important;
+    padding: 0;
 
-:where(nav[aria-label=breadcrumb]) {
-  align-items: center;
-  justify-content: start;
-
-  & ul li {
-    &:not(:first-child) {
-      margin-inline-start: var(--nav-link-spacing-horizontal);
-    }
-
-    & :where(a, [role=link]) {
-      margin: calc(var(--nav-link-spacing-vertical) * -1) 0;
-      margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1);
-    }
-
-    &:not(:last-child)::after {
+    li {
       display: inline-block;
-      position: absolute;
-      width: calc(var(--nav-link-spacing-horizontal) * 4);
-      margin: 0 calc(var(--nav-link-spacing-horizontal) * -1);
-      content: var(--nav-breadcrumb-divider);
-      color: var(--color-text-muted);
-      text-align: center;
-      text-decoration: none;
-      white-space: nowrap;
+
+      &::before {
+        float: left;
+        content: "";
+      }
     }
   }
 
-  & :where(a[aria-current]:not([aria-current=false]), [role=link][aria-current]:not([aria-current=false])) {
-    background-color: transparent;
-    color: inherit;
-    text-decoration: none;
-    pointer-events: none;
+  :where(h1, h2, h3, h4, h5, h6) {
+    margin-top: 0 !important;
   }
 }
 
-:where(aside nav, aside ol, aside ul, aside li) {
-  display: block;
-}
-
-:where(aside li) {
-  padding: calc(var(--nav-element-spacing-vertical) * 0.5) var(--nav-element-spacing-horizontal);
+[dir=rtl] :where(nav[aria-label=breadcrumb]) ul li:not(:last-child)::after {
+  content: "\\";
 }
 
-aside li {
-  & :where(a, [role=link], [role=button], button, [type=button]) {
-    display: block;
+aside {
+  > nav {
+    flex-grow: 1;
   }
 
-  & :where([role=button], button, [type=button]) {
-    margin: inherit;
+  nav {
+    align-items: stretch !important;
+    flex-direction: column;
   }
 }
-
-[dir=rtl] :where(nav[aria-label=breadcrumb]) ul li:not(:last-child)::after {
-  content: "\\";
-}

package/src/semantics/_role-tooltip.css

@@ -15,7 +15,7 @@
 
 [role="tooltip"] {
   display: block;
-  z-index: 99;
+  z-index: var(--max-z-index);
   position: absolute;
   bottom: 100%;
   left: 50%;

package/src/semantics/_section.css

@@ -2,5 +2,8 @@
  * Section
  */
 section {
+  --block-spacing-vertical: calc(var(--spacing) * var(--responsive-multiplier));
+  --block-spacing-horizontal: calc(var(--spacing) * var(--responsive-multiplier));
+
   margin-bottom: var(--block-spacing-vertical);
 }

package/src/semantics/_typography.css

@@ -52,12 +52,21 @@ h6 {
   font-family: var(--font-family);
 }
 
-h1 { --color-text: var(--color-h1); }
-h2 { --color-text: var(--color-h2); }
-h3 { --color-text: var(--color-h3); }
-h4 { --color-text: var(--color-h4); }
-h5 { --color-text: var(--color-h5); }
-h6 { --color-text: var(--color-h6); }
+/* Headings - progressive lightness using color-mix */
+h1 { --color-text: var(--color-heading-base); }
+h2 { --color-text: color-mix(in srgb, var(--color-heading-base), white 12%); }
+h3 { --color-text: color-mix(in srgb, var(--color-heading-base), white 22%); }
+h4 { --color-text: color-mix(in srgb, var(--color-heading-base), white 32%); }
+h5 { --color-text: color-mix(in srgb, var(--color-heading-base), white 45%); }
+h6 { --color-text: color-mix(in srgb, var(--color-heading-base), white 55%); }
+
+/* Dark mode headings - base is lightest, mix in black for lower levels */
+[data-theme="dark"] h1 { --color-text: var(--color-heading-base); }
+[data-theme="dark"] h2 { --color-text: color-mix(in srgb, var(--color-heading-base), black 8%); }
+[data-theme="dark"] h3 { --color-text: color-mix(in srgb, var(--color-heading-base), black 18%); }
+[data-theme="dark"] h4 { --color-text: color-mix(in srgb, var(--color-heading-base), black 28%); }
+[data-theme="dark"] h5 { --color-text: color-mix(in srgb, var(--color-heading-base), black 38%); }
+[data-theme="dark"] h6 { --color-text: color-mix(in srgb, var(--color-heading-base), black 48%); }
 
 :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul, hr) ~ :is(h1, h2, h3, h4, h5, h6) {
   margin-top: var(--typography-spacing-top);

package/src/semantics/index.css

@@ -5,7 +5,7 @@
  */
 
 /* Variables */
-@import '../_variables.css';
+@import '../variables/_all.css';
 
 /* Normalize */
 @import '../_normalize.css';

package/src/semantics/modules.css

@@ -6,6 +6,7 @@
 
 @import "./_aria-busy.css";
 @import "./_article.css";
+@import "./_aside.css";
 @import "./_body.css";
 @import "./_button.css";
 @import "./_code.css";
@@ -14,6 +15,8 @@
 @import "./_document.css";
 @import "./_embedded.css";
 @import "./_figure.css";
+@import "./_footer.css";
+@import "./_header.css";
 @import "./_hidden.css";
 @import "./_hr.css";
 @import "./_input.css";

package/src/sizes/slim.css

@@ -1,12 +1,41 @@
 /*
   Semanticus CSS Size: Slim
 */
+
+/* Shared variables */
+@import '../variables/_shared.css';
+
 :root,
 :host {
   --font-size: 1rem;
   --spacing: 0.75rem;
   --block-spacing-vertical: 1.2rem;
   --block-spacing-horizontal: 1.2rem;
-  --form-element-spacing-vertical: 0.4rem;
-  --form-element-spacing-horizontal: 0.6rem;
+  --form-element-spacing-vertical: 0.5rem;
+  --form-element-spacing-horizontal: 0.7rem;
+}
+
+@media (--breakpoint-xl) {
+  :root,
+  :host {
+    --responsive-multiplier: 1.85;
+  }
+}
+
+@media (--breakpoint-xxl) {
+  :root,
+  :host {
+    --responsive-multiplier: 2;
+  }
+}
+
+[role="search"] button,
+[role="search"] [type="submit"],
+[role="search"] [type="button"],
+[role="search"] [role="button"],
+[role="group"] button,
+[role="group"] [type="submit"],
+[role="group"] [type="button"],
+[role="group"] [role="button"] {
+  --form-element-spacing-horizontal: 1rem;
 }

package/src/utilities/_variables.css

@@ -4,6 +4,9 @@
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  */
 
+/* Shared variables */
+@import '../variables/_shared.css';
+
 /* ==========================================================================
    Theme-independent variables
    ========================================================================== */
@@ -62,6 +65,8 @@
   --color-info-inverse: #fff;
   --color-warning-inverse: #000;
   --color-danger-inverse: #fff;
+
+  --max-z-index: 1050;
 }
 
 /* ==========================================================================