@semanticus/semanticus-css 0.8.0 → 0.9.0

package/dist/semanticus.size.pico.css

@@ -1 +1 @@
-:root{--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:">";--sidebar-width:25%}:host{--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:">";--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-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;--base-spacing:1rem;--responsive-multiplier:1;--spacing:calc(var(--base-spacing) * var(--responsive-multiplier));--typography-spacing-vertical:1rem;--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);--nav-link-spacing:calc(var(--spacing) * .5);--nav-breadcrumb-divider:">";--sidebar-width:25%}:host{--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;--base-spacing:1rem;--responsive-multiplier:1;--spacing:calc(var(--base-spacing) * var(--responsive-multiplier));--typography-spacing-vertical:1rem;--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);--nav-link-spacing:calc(var(--spacing) * .5);--nav-breadcrumb-divider:">";--sidebar-width:25%}@media (width>=576px){:root{--font-size:106.25%;--sidebar-width:max(25%, 150px);--responsive-multiplier:1.25;--spacing:calc(var(--base-spacing) * var(--responsive-multiplier));--nav-link-spacing:calc(var(--spacing) * .5)}:host{--font-size:106.25%;--sidebar-width:max(25%, 150px);--responsive-multiplier:1.25;--spacing:calc(var(--base-spacing) * var(--responsive-multiplier));--nav-link-spacing:calc(var(--spacing) * .5)}}@media (width>=768px){:root{--font-size:112.5%;--sidebar-width:max(22%, 180px);--responsive-multiplier:1.5;--spacing:calc(var(--base-spacing) * var(--responsive-multiplier));--nav-link-spacing:calc(var(--spacing) * .5)}:host{--font-size:112.5%;--sidebar-width:max(22%, 180px);--responsive-multiplier:1.5;--spacing:calc(var(--base-spacing) * var(--responsive-multiplier));--nav-link-spacing:calc(var(--spacing) * .5)}}@media (width>=1024px){:root{--font-size:118.75%;--sidebar-width:max(20%, 200px);--responsive-multiplier:1.75;--spacing:calc(var(--base-spacing) * var(--responsive-multiplier));--nav-link-spacing:calc(var(--spacing) * .5)}:host{--font-size:118.75%;--sidebar-width:max(20%, 200px);--responsive-multiplier:1.75;--spacing:calc(var(--base-spacing) * var(--responsive-multiplier));--nav-link-spacing:calc(var(--spacing) * .5)}}@media (width>=1280px){:root{--font-size:125%;--sidebar-width:max(18%, 220px);--responsive-multiplier:2;--spacing:calc(var(--base-spacing) * var(--responsive-multiplier));--nav-link-spacing:calc(var(--spacing) * .5)}:host{--font-size:125%;--sidebar-width:max(18%, 220px);--responsive-multiplier:2;--spacing:calc(var(--base-spacing) * var(--responsive-multiplier));--nav-link-spacing:calc(var(--spacing) * .5)}}@media (width>=1536px){:root{--font-size:131.25%;--sidebar-width:clamp(240px, 16%, 300px);--responsive-multiplier:2.25;--spacing:calc(var(--base-spacing) * var(--responsive-multiplier));--nav-link-spacing:calc(var(--spacing) * .5)}:host{--font-size:131.25%;--sidebar-width:clamp(240px, 16%, 300px);--responsive-multiplier:2.25;--spacing:calc(var(--base-spacing) * var(--responsive-multiplier));--nav-link-spacing:calc(var(--spacing) * .5)}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@semanticus/semanticus-css",
-  "version": "0.8.0",
+  "version": "0.9.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",
@@ -63,25 +63,28 @@
     "src/**/*.css"
   ],
   "devDependencies": {
-    "backstopjs": "^6.3.25",
+    "@playwright/test": "^1.59.1",
+    "@storybook/addon-docs": "^10.3.6",
+    "@storybook/html": "^10.3.5",
+    "@storybook/html-vite": "^10.3.5",
+    "@types/node": "^25.6.0",
     "browserslist": "^4.28.2",
     "highlight.js": "^11.11.1",
     "lightningcss": "^1.32.0",
     "lightningcss-cli": "^1.32.0",
-    "puppeteer": "^23.0.0",
+    "storybook": "^10.3.5",
     "stylelint": "^17.7.0",
     "stylelint-config-standard": "^40.0.0",
     "vitepress": "^2.0.0-alpha.17"
   },
   "scripts": {
-    "start": "npm run docs:dev",
-    "demo": "node scripts/demo.js",
+    "start": "npm run build && npm run storybook",
     "lint": "stylelint \"src/**/*.css\"",
     "lint:fix": "stylelint \"src/**/*.css\" --fix",
-    "test": "npx backstopjs test",
-    "test:snapshot": "npx backstopjs reference",
-    "test:kill-zombies": "pkill -f '(chrome)?(--headless)'",
     "check": "npm run lint && npm run build",
+    "storybook": "storybook dev -p 6006",
+    "test:visual-regression": "npx playwright test",
+    "test:update-snapshots": "npx playwright test -u",
     "prepublishOnly": "npm run lint && npm run build",
     "release:sync-versions": "node scripts/sync-version-references.js",
     "build": "npm run build:css && npm run build:palettes && npm run build:sizes && npm run build:update-size-claims",

package/src/semantics/_misc.css

@@ -0,0 +1,3 @@
+::selection {
+  background-color: var(--color-text-selection);
+}

package/src/semantics/attributes/_popover.css

@@ -0,0 +1,13 @@
+[popover] {
+  overflow: auto;
+  border: 0;
+  padding: 0;
+  color: var(--color-text);
+  background-color: var(--color-background);
+  height: unset;
+  margin: unset;
+
+  &:popover-open {
+    display: block !important;
+  }
+}

package/src/semantics/attributes/_role-group-search.css

@@ -0,0 +1,140 @@
+/**
+ * Group ([role="group"], [role="search"])
+ */
+[role="search"],
+[role="group"] {
+    border-radius: var(--border-radius);
+    box-shadow: var(--group-shadow, 0 0 0 rgba(0, 0, 0, 0));
+    display: inline-flex;
+    gap: 0;
+    margin-bottom: var(--spacing);
+    position: relative;
+    transition: box-shadow var(--transition);
+    vertical-align: middle;
+    width: 100%;
+
+    & > *:not(details),
+    & input:not([type="checkbox"], [type="radio"]),
+    & select {
+        position: relative;
+        flex: 1 1 auto;
+        margin-bottom: 0;
+
+        &:not(:first-child) {
+            margin-left: calc(var(--border-width) * -1);
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+        }
+
+        &:not(:last-child) {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+        }
+
+        &:focus {
+            z-index: 2;
+        }
+    }
+
+    & button,
+    & [type="submit"],
+    & [type="reset"],
+    & [type="button"],
+    & [role="button"] {
+        width: auto;
+    }
+
+    /* Details dropdown inside group */
+    & > details {
+        position: relative;
+        margin-bottom: 0;
+        /* Constrain details height to just the button, not the dropdown menu */
+        height: calc(
+            1rem * var(--line-height) + var(--form-element-spacing-vertical) *
+                2 + var(--border-width) * 2
+        );
+        overflow: visible;
+
+        &:not(:first-child) {
+            margin-left: calc(var(--border-width) * -1);
+
+            & > summary {
+                border-top-left-radius: 0;
+                border-bottom-left-radius: 0;
+            }
+        }
+
+        &:not(:last-child) > summary {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+        }
+
+        & > summary:focus {
+            z-index: 2;
+        }
+
+        /* Ensure consistent height with other form elements in the group */
+        & > summary[role="button"] {
+            display: flex;
+            align-items: center;
+            height: 100%;
+
+            &::after {
+                height: calc(1rem * var(--line-height, 1.5));
+            }
+        }
+    }
+}
+
+@supports selector(:has(*)) {
+    [role="search"],
+    [role="group"] {
+        &:has(
+            button:focus,
+            [type="submit"]:focus,
+            [type="button"]:focus,
+            [role="button"]:focus
+        ) {
+            --group-shadow: var(--group-shadow-focus-with-button);
+
+            & input:not([type="checkbox"], [type="radio"]),
+            & select {
+                border-color: transparent;
+            }
+        }
+
+        &:has(input:not([type="submit"], [type="button"]):focus, select:focus) {
+            --group-shadow: var(--group-shadow-focus-with-input);
+
+            & button,
+            & [type="submit"],
+            & [type="button"],
+            & [role="button"] {
+                --button-shadow: 0 0 0 var(--border-width)
+                    var(--color-primary-border);
+                --button-shadow-hover: 0 0 0 var(--border-width)
+                    var(--color-primary-hover-border);
+            }
+        }
+
+        & button:focus,
+        & [type="submit"]:focus,
+        & [type="reset"]:focus,
+        & [type="button"]:focus,
+        & [role="button"]:focus {
+            box-shadow: none;
+        }
+    }
+}
+
+[role="search"] {
+    & > :first-child {
+        border-top-left-radius: 5rem;
+        border-bottom-left-radius: 5rem;
+    }
+
+    & > :last-child {
+        border-top-right-radius: 5rem;
+        border-bottom-right-radius: 5rem;
+    }
+}

package/src/semantics/elements/_abbr.css

@@ -0,0 +1,5 @@
+abbr[title] {
+  border-bottom: 1px dotted;
+  text-decoration: none;
+  cursor: help;
+}

package/src/semantics/elements/_address.css

@@ -0,0 +1,7 @@
+address {
+  margin-top: 0;
+  margin-bottom: var(--typography-spacing-vertical);
+  color: var(--color-text);
+  font-style: normal;
+  font-weight: var(--font-weight);
+}

package/src/semantics/elements/_article.css

@@ -0,0 +1,6 @@
+/**
+ * Article
+ */
+article {
+  width: 100%;
+}

package/src/semantics/{_aside.css → elements/_aside.css}

@@ -5,8 +5,8 @@
  * 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;
+  padding: var(--spacing) !important;
 
   :where(ol, ul, li) {
     align-items: stretch !important;

package/src/semantics/elements/_blockquote.css

@@ -0,0 +1,18 @@
+blockquote {
+  border-inline-end: none;
+  border-inline-start: 0.25rem solid var(--color-border-muted);
+  border-left: 0.25rem solid var(--color-border-muted);
+  border-right: none;
+  color: var(--color-text);
+  display: block;
+  font-style: normal;
+  font-weight: var(--font-weight);
+  margin-bottom: var(--typography-spacing-vertical);
+  margin-top: 0;
+  padding: var(--spacing);
+
+  & footer {
+    margin-top: calc(var(--typography-spacing-vertical) * 0.5);
+    color: var(--color-text-muted);
+  }
+}

package/src/semantics/{_button.css → elements/_button.css}

@@ -118,8 +118,8 @@ aside {
 
 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);
+    --form-element-spacing-vertical: calc(var(--nav-link-spacing) - var(--border-width) * 2);
+    --form-element-spacing-horizontal: var(--nav-link-spacing);
 
     height: auto;
     margin-right: inherit;

package/src/semantics/{_code.css → elements/_code.css}

@@ -8,8 +8,8 @@ samp {
   font-size: 0.875em;
   font-family: var(--font-family);
   border-radius: var(--border-radius);
-  background: var(--color-code-bg);
-  color: var(--color-code-text);
+  background: var(--code-bg);
+  color: var(--code-color);
   font-weight: var(--font-weight);
   line-height: initial;
 }
@@ -23,10 +23,13 @@ samp {
 
 pre {
   -ms-overflow-style: scrollbar;
-  overflow: auto;
+  color: var(--color-text);
   display: block;
-  margin-bottom: var(--spacing);
-  overflow-x: auto;
+  font-style: normal;
+  font-weight: var(--font-weight);
+  margin-bottom: var(--typography-spacing-vertical);
+  margin-top: 0;
+  overflow: auto;
 
   & code,
   & samp {
@@ -44,7 +47,7 @@ pre {
 }
 
 kbd {
-  background-color: var(--color-kbd-bg);
-  color: var(--color-kbd-text);
+  background-color: var(--kbd-bg);
+  color: var(--kbd-color);
   vertical-align: baseline;
 }

package/src/semantics/elements/_del.css

@@ -0,0 +1,3 @@
+del {
+  color: rgb(var(--color-danger-rgb));
+}

package/src/semantics/{_details.css → elements/_details.css}

@@ -173,11 +173,11 @@ details:has(> summary[aria-haspopup="menu"]) {
     margin: 0;
     margin-top: var(--outline-width);
     padding: 0;
-    border: var(--border-width) solid var(--dropdown-border);
+    border: var(--border-width) solid var(--menu-border);
     border-radius: var(--border-radius);
-    background-color: var(--dropdown-bg);
-    box-shadow: var(--dropdown-shadow);
-    color: var(--dropdown-text);
+    background-color: var(--menu-bg);
+    box-shadow: var(--menu-shadow);
+    color: var(--menu-text);
     white-space: nowrap;
     opacity: 0;
     transition: opacity var(--transition), transform 0s ease-in-out 1s;
@@ -208,7 +208,7 @@ details:has(> summary[aria-haspopup="menu"]) {
       padding: calc(var(--form-element-spacing-vertical) * 0.5) var(--form-element-spacing-horizontal);
       overflow: hidden;
       border-radius: 0;
-      color: var(--dropdown-text);
+      color: var(--menu-text);
       text-decoration: none;
       text-overflow: ellipsis;
 
@@ -217,7 +217,7 @@ details:has(> summary[aria-haspopup="menu"]) {
       &:active,
       &:focus-visible,
       &[aria-current]:not([aria-current=false]) {
-        background-color: var(--dropdown-hover-bg);
+        background-color: var(--menu-hover-bg);
       }
     }
 
@@ -226,7 +226,7 @@ details:has(> summary[aria-haspopup="menu"]) {
     }
 
     &:has(label):hover {
-      background-color: var(--dropdown-hover-bg);
+      background-color: var(--menu-hover-bg);
     }
   }
 
@@ -269,7 +269,7 @@ nav details:has(> summary[aria-haspopup="menu"]) {
     display: flex;
     align-items: center;
     height: auto;
-    padding: calc(var(--nav-link-spacing-vertical) - var(--border-width) * 2) var(--nav-link-spacing-horizontal);
+    padding: calc(var(--nav-link-spacing) - var(--border-width) * 2) var(--nav-link-spacing);
   }
 
   & > :where(summary:not([role]):focus-visible) {
@@ -286,6 +286,6 @@ nav details:has(> summary[aria-haspopup="menu"]) {
     align-items: center;
     width: auto;
     height: auto;
-    padding: calc(var(--nav-link-spacing-vertical) - var(--border-width) * 2) var(--nav-link-spacing-horizontal);
+    padding: calc(var(--nav-link-spacing) - var(--border-width) * 2) var(--nav-link-spacing);
   }
 }

package/src/semantics/elements/_dialog.css

@@ -0,0 +1,117 @@
+/**
+ * Modal (<dialog>)
+ */
+
+/* Prevent body scroll and interaction when modal is open */
+body:has(dialog[open]) {
+  overflow: hidden;
+  pointer-events: none;
+  touch-action: none;
+
+  & dialog[open],
+  & dialog:target {
+    pointer-events: auto;
+    touch-action: auto;
+  }
+}
+
+dialog {
+  max-height: calc(100vh - var(--spacing) * 2);
+  margin: auto;
+  overflow: auto;
+  padding: var(--spacing);
+  border-radius: var(--border-radius);
+  background: var(--pane-bg);
+  box-shadow: var(--pane-shadow);
+  border: 0;
+
+  /* Opening animation using @starting-style (Chrome 117+, Firefox 129+, Safari 17.4+) */
+  /* Gracefully degrades to instant appearance in unsupported browsers */
+  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
+
+  @media (--breakpoint-sm) {
+    max-width: 510px;
+  }
+
+  @media (--breakpoint-md) {
+    max-width: 700px;
+  }
+
+  /* Hidden state */
+  &:not([open]),
+  &[open=false] {
+    display: none;
+  }
+
+  /* Backdrop overlay */
+  &::backdrop {
+    backdrop-filter: var(--backdrop-overlay-filter);
+    background-color: var(--backdrop-overlay-bg);
+    transition: backdrop-filter 0.2s ease-in-out, background-color 0.2s ease-in-out;
+  }
+
+  > header,
+  > footer {
+    width: auto;
+    margin-inline: calc(var(--spacing) * -1);
+    padding-inline: var(--spacing);
+    background-color: var(--pane-section-bg);
+  }
+
+  /* Header styling */
+  > header {
+    margin-top: calc(var(--spacing) * -1);
+    border-bottom: var(--border-width) solid var(--pane-section-border);
+    border-top-right-radius: var(--border-radius);
+    border-top-left-radius: var(--border-radius);
+  }
+
+  /* Footer styling */
+  > footer {
+    margin-bottom: calc(var(--spacing) * -1);
+    border-top: var(--border-width) solid var(--pane-section-border);
+    border-bottom-right-radius: var(--border-radius);
+    border-bottom-left-radius: var(--border-radius);
+    display: flex;
+    justify-content: end;
+    gap: calc(var(--nav-link-spacing) * 1.5);
+  }
+
+  /* Close button styling */
+  [rel=prev] {
+    margin: 0;
+    padding: 0;
+    position: absolute;
+    display: block;
+    width: 1rem;
+    height: 1rem;
+    top: calc(var(--spacing) * .66);
+    right: var(--spacing);
+    border: none;
+    border-radius: 0;
+    background-image: var(--icon-close);
+    background-position: center;
+    background-size: auto 1rem;
+    background-repeat: no-repeat;
+    background-color: transparent;
+    box-shadow: none;
+    opacity: 0.5;
+    transition: opacity var(--transition);
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+}
+
+@starting-style {
+  dialog[open] {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+
+  dialog[open]::backdrop {
+    backdrop-filter: none;
+    background-color: transparent;
+  }
+}

package/src/semantics/elements/_footer.css

@@ -0,0 +1,13 @@
+/**
+ * Footer
+ */
+footer {
+  width: 100%;
+  padding-block: var(--spacing);
+  margin-top: var(--spacing);
+
+  & > * {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+  }
+}

package/src/semantics/elements/_header.css

@@ -0,0 +1,13 @@
+/**
+ * Header
+ */
+header {
+  width: 100%;
+  padding-block: var(--spacing);
+  margin-bottom: var(--spacing);
+
+  & > * {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+  }
+}

package/src/semantics/elements/_headings.css

@@ -0,0 +1,34 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-top: 0;
+  margin-bottom: var(--typography-spacing-vertical);
+  color: var(--color-text);
+  font-weight: var(--font-weight);
+  font-size: var(--font-size);
+  line-height: var(--line-height);
+  font-family: var(--font-family);
+}
+
+/* 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/elements/_hgroup.css

@@ -0,0 +1,14 @@
+hgroup {
+  margin-bottom: var(--typography-spacing-vertical);
+
+  & > * {
+    margin-top: 0;
+    margin-bottom: 0;
+
+    &:not(:first-child):last-child {
+      color: color-mix(in srgb, var(--color-text), rgb(128, 128, 128) 70%);
+      --font-weight: unset;
+      font-size: 1rem;
+    }
+  }
+}

package/src/semantics/{_hr.css → elements/_hr.css}

@@ -1,5 +1,5 @@
 /**
- * Misc
+ * Horizontal Rule
  */
 hr {
   height: 0;

package/src/semantics/{_input.css → elements/_input.css}

@@ -84,8 +84,7 @@ input:not([type=checkbox], [type=radio], [type=range]) {
 
 fieldset {
   width: 100%;
-  margin: 0;
-  margin-bottom: var(--spacing);
+  margin: 0 ;
   padding: 0;
   border: 0;
 }

package/src/semantics/elements/_ins.css

@@ -0,0 +1,4 @@
+ins {
+  color: rgb(var(--color-success-rgb));
+  text-decoration: none;
+}

package/src/semantics/{_links.css → elements/_links.css}

@@ -3,20 +3,27 @@
  */
 :where(a:not([role=button])),
 [role=link] {
-  --color-text: rgb(var(--color-primary-rgb));
   --color-background: transparent;
+  --border-color: transparent;
+  --color-text: rgb(var(--color-primary-rgb));
+  --shadow-lg: transparent;
   --underline: var(--color-primary-underline);
   outline: none;
+  padding: 0;
   background-color: var(--color-background);
   color: var(--color-text);
   text-decoration: var(--text-decoration);
   text-decoration-color: var(--underline);
   text-underline-offset: 0.125em;
   transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition);
-}
 
-:where(a:not([role=button])),
-[role=link] {
+  &:is(:hover, :active, :focus) {
+    --color-background: transparent;
+    --border-color: transparent;
+    --color-text: rgb(var(--color-primary-rgb));
+    --shadow-lg: transparent;
+  }
+
   &:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
     --color-text: var(--color-primary-hover);
     --underline: var(--color-primary-hover-underline);

package/src/semantics/elements/_lists.css

@@ -0,0 +1,22 @@
+dl,
+ol,
+ul {
+  margin-top: 0;
+  margin-bottom: var(--typography-spacing-vertical);
+  color: var(--color-text);
+  font-style: normal;
+  font-weight: var(--font-weight);
+}
+
+:where(ol, ul) li {
+  margin-bottom: calc(var(--typography-spacing-vertical) * 0.25);
+}
+
+:where(dl, ol, ul) :where(dl, ol, ul) {
+  margin: 0;
+  margin-top: calc(var(--typography-spacing-vertical) * 0.25);
+}
+
+ul li {
+  list-style: square;
+}