@semanticus/semanticus-css 0.8.0 → 0.9.0

package/src/variables/_layout.css

@@ -41,11 +41,10 @@
   --transition: 0.2s ease-in-out;
 
   /* Spacing - shared base unit */
-  --spacing: 0.75rem;
+  --base-spacing: 0.75rem;
   --responsive-multiplier: 1;
+  --spacing: calc(var(--base-spacing) * var(--responsive-multiplier));
   --typography-spacing-vertical: 1rem;
-  --block-spacing-vertical: 1.2rem;
-  --block-spacing-horizontal: 1.2rem;
   --grid-column-gap: var(--spacing);
   --grid-row-gap: var(--spacing);
   --form-element-spacing-vertical: 0.5rem;
@@ -56,26 +55,12 @@
   --group-shadow-focus-with-button: 0 0 0 var(--outline-width) var(--color-primary-focus);
   --group-shadow-focus-with-input: 0 0 0 0.0625rem var(--form-border-color);
 
-  /* Modal */
-  --modal-overlay-backdrop-filter: blur(0.375rem);
-
   /* Navigation */
-  --nav-link-spacing-vertical: 0.5rem;
-  --nav-link-spacing-horizontal: 0.5rem;
+  --nav-link-spacing: calc(var(--spacing) * 0.5);
   --nav-breadcrumb-divider: ">";
 
   /* Sidebar */
   --sidebar-width: 25%;
-
-  /* Icons - inline SVG data-URIs used by form elements and UI components */
-  --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");
 }
 
 /* ==========================================================================
@@ -87,7 +72,9 @@
   :host {
     --font-size: 98%;
     --sidebar-width: max(25%, 150px);
-    --responsive-multiplier: 1.25;
+    --responsive-multiplier: 1.1;
+    --spacing: calc(var(--base-spacing) * var(--responsive-multiplier));
+    --nav-link-spacing: calc(var(--spacing) * 0.5);
   }
 }
 
@@ -96,7 +83,9 @@
   :host {
     --font-size: 99%;
     --sidebar-width: max(22%, 180px);
-    --responsive-multiplier: 1.5;
+    --responsive-multiplier: 1.2;
+    --spacing: calc(var(--base-spacing) * var(--responsive-multiplier));
+    --nav-link-spacing: calc(var(--spacing) * 0.5);
   }
 }
 
@@ -105,7 +94,9 @@
   :host {
     --font-size: 100%;
     --sidebar-width: max(20%, 200px);
-    --responsive-multiplier: 1.75;
+    --responsive-multiplier: 1.3;
+    --spacing: calc(var(--base-spacing) * var(--responsive-multiplier));
+    --nav-link-spacing: calc(var(--spacing) * 0.5);
   }
 }
 
@@ -114,7 +105,9 @@
   :host {
     --font-size: 101%;
     --sidebar-width: max(18%, 220px);
-    --responsive-multiplier: 1.85;
+    --responsive-multiplier: 1.4;
+    --spacing: calc(var(--base-spacing) * var(--responsive-multiplier));
+    --nav-link-spacing: calc(var(--spacing) * 0.5);
   }
 }
 
@@ -123,6 +116,8 @@
   :host {
     --font-size: 102%;
     --sidebar-width: clamp(240px, 16%, 300px);
-    --responsive-multiplier: 2;
+    --responsive-multiplier: 1.5;
+    --spacing: calc(var(--base-spacing) * var(--responsive-multiplier));
+    --nav-link-spacing: calc(var(--spacing) * 0.5);
   }
 }

package/src/variants/_contrast.css

@@ -17,21 +17,23 @@
   }
 }
 
-:is(.panel, button, [type="submit"], [type="button"], [role="button"]).contrast {
-  --color-background: var(--color-contrast-bg);
-  --border-color: var(--color-contrast-border);
-  --color-text: var(--color-contrast-inverse);
-}
+:is(button, [type="submit"], [type="button"], [role="button"]) {
+  &.contrast {
+    --color-background: var(--color-contrast-bg);
+    --border-color: var(--color-contrast-border);
+    --color-text: var(--color-contrast-inverse);
 
-:is(button, [type="submit"], [type="button"], [role="button"]).contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
-  --color-background: var(--color-contrast-hover-bg);
-  --border-color: var(--color-contrast-hover-border);
-  --color-text: var(--color-contrast-inverse);
-}
+    &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+      --color-background: var(--color-contrast-hover-bg);
+      --border-color: var(--color-contrast-hover-border);
+      --color-text: var(--color-contrast-inverse);
+    }
 
-:is(button, [type="submit"], [type="button"], [role="button"]).contrast:focus,
-:is(button, [type="submit"], [type="button"], [role="button"]).contrast:is([aria-current]:not([aria-current="false"])):focus {
-  --shadow-lg: var(--button-shadow-hover, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--color-contrast-focus);
+    &:focus,
+    &:is([aria-current]:not([aria-current="false"])):focus {
+      --shadow-lg: var(--button-shadow-hover, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--color-contrast-focus);
+    }
+  }
 }
 
 /* Accordion chevron dark mode override */
@@ -45,3 +47,15 @@
 [data-theme="dark"] details summary[role="button"].contrast::after {
   filter: brightness(0);
 }
+
+:is(.card, .pane, .panel).contrast {
+  --color-text: rgb(var(--color-contrast-emphasis-rgb)) !important;
+  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
+  --pane-bg: var(--color-contrast-bg-subtle);
+  --pane-section-bg: rgba(var(--color-contrast-rgb), 0.6);
+  --pane-section-border: var(--color-contrast-border-subtle);
+}
+
+:is(.panel).contrast {
+  --pane-border: var(--color-contrast-border);
+}

package/src/variants/_ghost.css

@@ -10,47 +10,54 @@
   background-color: var(--color-background) !important;
 }
 
-:is(button, [type="submit"], [type="button"], [role="button"]).ghost {
-  --color-background: transparent;
-  --color-text: rgb(var(--color-primary-rgb));
-  --border-color: rgb(var(--color-primary-rgb));
-}
+:is(button, [type="submit"], [type="button"], [role="button"]) {
+  &.ghost {
+    --color-background: transparent;
+    --border-color: rgb(var(--color-primary-rgb));
+    --color-text: rgb(var(--color-primary-rgb));
 
-:is(button, [type="submit"], [type="button"], [role="button"]).ghost:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
-  --color-background: transparent;
-  --color-text: var(--color-primary-hover);
-  --border-color: var(--color-primary-hover);
-}
+    &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+      --color-background: var(--color-primary-hover-bg);
+      --border-color: var(--color-primary-hover-border);
+      --color-text: var(--color-primary-inverse);
+    }
 
-:is(.panel, button, [type="submit"], [type="button"], [role="button"]).ghost.secondary {
-  --color-text: rgb(var(--color-secondary-rgb));
-  --border-color: rgb(var(--color-secondary-rgb));
-}
+    &.secondary {
+      --color-background: transparent;
+      --border-color: rgb(var(--color-secondary-rgb));
+      --color-text: rgb(var(--color-secondary-rgb));
 
-:is(button, [type="submit"], [type="button"], [role="button"]).ghost.secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
-  --color-text: var(--color-secondary-hover);
-  --border-color: var(--color-secondary-hover);
-}
+      &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+        --color-background: var(--color-secondary-hover-bg);
+        --border-color: var(--color-secondary-hover-border);
+        --color-text: var(--color-secondary-inverse);
+      }
+    }
 
-:is(.panel, button, [type="submit"], [type="button"], [role="button"]).ghost.contrast {
-  --color-text: rgb(var(--color-contrast-rgb));
-  --border-color: rgb(var(--color-contrast-rgb));
-}
+    &.contrast {
+      --color-background: transparent;
+      --border-color: rgb(var(--color-contrast-rgb));
+      --color-text: rgb(var(--color-contrast-rgb));
 
-:is(button, [type="submit"], [type="button"], [role="button"]).ghost.contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
-  --color-text: var(--color-contrast-hover);
-  --border-color: var(--color-contrast-hover);
+      &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+        --color-background: var(--color-contrast-hover-bg);
+        --border-color: var(--color-contrast-hover-border);
+        --color-text: var(--color-contrast-inverse);
+      }
+    }
+  }
 }
 
 /* Reset buttons */
 [type="reset"].ghost {
   --color-background: transparent;
-  --color-text: rgb(var(--color-secondary-rgb));
   --border-color: rgb(var(--color-secondary-rgb));
+  --color-text: rgb(var(--color-secondary-rgb));
 
   &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
-    --color-text: var(--color-secondary-hover);
-    --border-color: var(--color-secondary-hover);
+    --color-background: var(--color-secondary-hover-bg);
+    --border-color: var(--color-secondary-hover-border);
+    --color-text: var(--color-secondary-inverse);
   }
 }
 

package/src/variants/_pane-panel-card.css

@@ -0,0 +1,54 @@
+/**
+ * Pane, Panel and Card
+ * A container component for grouped content with visual pane, panel and card styling
+ * Can be applied to any element (article, div, section, etc.)
+ */
+.pane,
+.panel,
+.card {
+  padding-block: var(--spacing);
+  padding-inline: var(--spacing);
+  margin-bottom: var(--spacing);
+  border-radius: var(--border-radius);
+  border: var(--border-width) solid var(--pane-border);
+  background: var(--pane-bg);
+  box-shadow: var(--pane-shadow);
+
+  & > header,
+  & > footer {
+    width: auto;
+    margin-inline: calc(var(--spacing) * -1);
+    padding-inline: var(--spacing);
+    background-color: var(--pane-section-bg);
+  }
+
+  & > 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 {
+    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);
+  }
+}
+
+.pane,
+.panel {
+  --pane-shadow: none;
+}
+
+.panel {
+  --pane-border: var(--pane-section-border);
+}
+
+.card {
+  --pane-shadow: var(--shadow-lg);
+}

package/src/variants/_secondary.css

@@ -17,19 +17,32 @@
   }
 }
 
-:is(.panel, button, [type="submit"], [type="button"], [role="button"]).secondary {
-  --color-background: var(--color-secondary-bg);
-  --border-color: var(--color-secondary-border);
-  --color-text: var(--color-secondary-inverse);
+:is(button, [type="submit"], [type="button"], [role="button"]) {
+  &.secondary {
+    --color-background: var(--color-secondary-bg);
+    --border-color: var(--color-secondary-border);
+    --color-text: var(--color-secondary-inverse);
+
+    &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+      --color-background: var(--color-secondary-hover-bg);
+      --border-color: var(--color-secondary-hover-border);
+      --color-text: var(--color-secondary-inverse);
+    }
+
+    &:focus,
+    &:is([aria-current]:not([aria-current="false"])):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);
+    }
+  }
 }
 
-:is(button, [type="submit"], [type="button"], [role="button"]).secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
-  --color-background: var(--color-secondary-hover-bg);
-  --border-color: var(--color-secondary-hover-border);
-  --color-text: var(--color-secondary-inverse);
+:is(.card, .pane, .panel).secondary {
+  --color-text: rgb(var(--color-secondary-emphasis-rgb)) !important;
+  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
+  --pane-bg: var(--color-secondary-bg-subtle);
 }
 
-:is(button, [type="submit"], [type="button"], [role="button"]).secondary:focus,
-:is(button, [type="submit"], [type="button"], [role="button"]).secondary:is([aria-current]:not([aria-current="false"])):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);
+:is(.panel).secondary {
+  --pane-section-border: var(--color-secondary-border-subtle);
+  --pane-border: var(--color-secondary-border-subtle);
 }

package/src/variants/_sidebar.css

@@ -1,11 +1,51 @@
-aside {
-  &.sidebar {
-    z-index: 1020;
-    position: sticky;
-    top: 0;
-    max-height: 100svh;
-    align-self: stretch;
-    display: flex;
-    flex-direction: column;
+aside.sidebar {
+  z-index: 1020;
+  position: sticky !important;
+  top: 0;
+  max-height: 100svh;
+  align-self: stretch;
+  display: flex;
+  flex-direction: column;
+
+  /* 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;
+
+  &:popover-open {
+    --color-background: var(--color-body-bg);
+
+    display: flex !important;
+    width: 60% !important;
+    box-shadow: var(--pane-shadow);
+    background-color: var(--color-background) !important;
+    left: 0;
+    right: unset;
+
+    &[data-placement="right"] {
+      left: unset;
+      right: 0;
+    }
+  }
+
+  &::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;
+  }
+}
+
+@starting-style {
+  aside.sidebar:popover-open {
+    opacity: 0;
+    transform: translateX(-20px);
+
+    &[data-placement="right"] {
+      transform: translateX(20px);
+    }
+  }
+
+  aside.sidebar:popover-open::backdrop {
+    backdrop-filter: none;
+    background-color: transparent;
   }
 }

package/src/variants/modules.css

@@ -4,11 +4,10 @@
  * Used by the full version which imports global variables, normalize, and semantics separately
  */
 
-@import "./_card.css";
-@import "./_contained.css";
-@import "./_container.css";
-@import "./_contrast.css";
-@import "./_panel.css";
+ @import "./_contained.css";
+ @import "./_container.css";
+ @import "./_contrast.css";
+ @import "./_pane-panel-card.css";
 @import "./_secondary.css";
 @import "./_sidebar.css";
 @import "./_striped.css";

package/src/semantics/_article.css

@@ -1,12 +0,0 @@
-/**
- * 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/_dialog.css

@@ -1,157 +0,0 @@
-/**
- * Modal (<dialog>)
- */
-
-/* Prevent body scroll and interaction when modal is open */
-/* Uses :has() for automatic detection - no classes needed */
-/* Accounts for both [open] attribute (JS) and :target (CSS-only) */
-body:has(dialog[open]),
-body:has(dialog:target) {
-  overflow: hidden;
-  pointer-events: none;
-  touch-action: none;
-
-  & dialog[open],
-  & dialog:target {
-    pointer-events: auto;
-    touch-action: auto;
-  }
-}
-
-dialog {
-  display: flex;
-  z-index: 999;
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  align-items: center;
-  justify-content: center;
-  width: inherit;
-  min-width: 100%;
-  height: inherit;
-  min-height: 100%;
-  padding: 0;
-  border: 0;
-  backdrop-filter: var(--modal-overlay-backdrop-filter);
-  background-color: var(--modal-overlay-bg);
-  color: var(--color-text);
-
-  /* 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);
-    padding: var(--block-spacing-vertical) var(--block-spacing-horizontal);
-    overflow: auto;
-    border-radius: var(--border-radius);
-    background: var(--card-bg);
-    box-shadow: var(--card-shadow);
-
-    @media (--breakpoint-sm) {
-      max-width: 510px;
-    }
-
-    @media (--breakpoint-md) {
-      max-width: 700px;
-    }
-
-    /* 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);
-      border-bottom: var(--border-width) solid var(--card-border);
-      border-top-right-radius: var(--border-radius);
-      border-top-left-radius: var(--border-radius);
-
-      & > * {
-        margin-bottom: 0;
-      }
-    }
-
-    /* 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);
-      border-top: var(--border-width) solid var(--card-border);
-      border-bottom-right-radius: var(--border-radius);
-      border-bottom-left-radius: var(--border-radius);
-      text-align: right;
-
-      & :where(button, [role=button]) {
-        margin-bottom: 0;
-
-        &:not(:first-of-type) {
-          margin-left: calc(var(--spacing) * 0.5);
-        }
-      }
-    }
-
-    /* Close button styling */
-    & :is(a, button)[rel=prev]:not([role=button]) {
-      margin: 0;
-      padding: 0;
-      position: absolute;
-      display: block;
-      width: 1rem;
-      height: 1rem;
-      top: calc(var(--block-spacing-vertical) * .66);
-      right: var(--block-spacing-horizontal);
-      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;
-      }
-    }
-  }
-
-  /* Hidden state */
-  &:not([open]),
-  &[open=false] {
-    display: none;
-  }
-
-  /* CSS-only modal triggering using :target pseudo-class */
-  /* When dialog is targeted via anchor link (e.g., <a href="#modal-id">) */
-  &:target {
-    display: flex;
-  }
-}
-
-/* Opening animation using @starting-style (Chrome 117+, Firefox 129+, Safari 17.4+) */
-/* Gracefully degrades to instant appearance in unsupported browsers */
-dialog {
-  transition: opacity 0.2s ease-in-out, backdrop-filter 0.2s ease-in-out;
-}
-
-dialog > article {
-  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
-}
-
-@starting-style {
-  dialog {
-    backdrop-filter: none;
-    background-color: transparent;
-  }
-
-  dialog > article {
-    opacity: 0;
-    transform: translateY(-20px);
-  }
-}

package/src/semantics/_footer.css

@@ -1,12 +0,0 @@
-/**
- * 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

@@ -1,12 +0,0 @@
-/**
- * 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/_main.css

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