@semanticus/semanticus-css 0.4.0 → 0.5.1

package/src/{_variables.css → variables/_all.css}

@@ -10,123 +10,10 @@
 
 */
 
-/* ==========================================================================
-   1. Base Tokens
-   ========================================================================== */
-
-:root {
-  --transparent: transparent;
-}
-
-/* ==========================================================================
-   Responsive Breakpoints (custom media queries)
-   Used consistently across semantics, variants, and utilities.
-   ========================================================================== */
-
-@custom-media --breakpoint-sm (min-width: 576px);
-@custom-media --breakpoint-md (min-width: 768px);
-@custom-media --breakpoint-lg (min-width: 1024px);
-@custom-media --breakpoint-xl (min-width: 1280px);
-@custom-media --breakpoint-xxl (min-width: 1536px);
-
-/* ==========================================================================
-   2. Typography & Layout Variables (from Pico Theme)
-   ========================================================================== */
-
-:root,
-:host {
-  /* Font Families */
-  --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);
-
-  /* Typography – base defaults inherited by all elements */
-  --line-height: 1.5;
-  --font-weight: 400;
-  --font-size: 100%; /* Root font-size; overridden per breakpoint below and per element in §6 */
-  --text-underline-offset: 0.1rem;
-
-  /* Borders & Effects – global defaults for border-radius, border-width, outline, and transition */
-  --border-radius: 0.25rem;
-  --border-width: 0.0625rem; /* 1px – base border width used by forms, tables, etc. */
-  --outline-width: 0.125rem; /* 2px – focus-ring width */
-  --transition: 0.2s ease-in-out; /* Default transition timing for interactive state changes */
-
-  /* Spacing – shared base unit used for padding, margins, and gaps throughout the layout */
-  --spacing: 1rem;
-  --typography-spacing-vertical: 1rem; /* Vertical margin below typographic elements (p, lists, etc.) */
-  --block-spacing-vertical: var(--spacing); /* Vertical padding inside block-level components (cards, modals, etc.) */
-  --block-spacing-horizontal: var(--spacing); /* Horizontal padding inside block-level components */
-  --grid-column-gap: var(--spacing); /* Column gap in CSS Grid layouts */
-  --grid-row-gap: var(--spacing); /* Row gap in CSS Grid layouts */
-  --form-element-spacing-vertical: 0.75rem; /* Vertical padding inside form inputs, selects, and textareas */
-  --form-element-spacing-horizontal: 1rem; /* Horizontal padding inside form inputs, selects, and textareas */
-
-  /* Shadows – used by [role="group"] and [role="search"] button/input combos */
-  --group-shadow: 0 0 0 rgba(0, 0, 0, 0); /* Default (no shadow) */
-  --group-shadow-focus-with-button: 0 0 0 var(--outline-width) var(--color-primary-focus); /* Focus ring when a button inside the group is focused */
-  --group-shadow-focus-with-input: 0 0 0 0.0625rem var(--form-border-color); /* Focus ring when an input inside the group is focused */
-
-  /* Modal – backdrop overlay settings */
-  --modal-overlay-backdrop-filter: blur(0.375rem); /* Applies a blur behind the modal overlay */
-
-  /* Navigation – spacing and breadcrumb configuration */
-  --nav-element-spacing-vertical: 1rem; /* Vertical padding for nav container items */
-  --nav-element-spacing-horizontal: 0.5rem; /* Horizontal padding for nav container items */
-  --nav-link-spacing-vertical: 0.5rem; /* Vertical padding inside nav links */
-  --nav-link-spacing-horizontal: 0.5rem; /* Horizontal padding inside nav links */
-  --nav-breadcrumb-divider: ">"; /* Character displayed between breadcrumb items */
-
-  /* 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"); /* Checkmark for checked checkboxes */
-  --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"); /* Minus icon for indeterminate checkboxes */
-  --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"); /* Dropdown arrow for <select> elements */
-  --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"); /* Calendar icon for date inputs */
-  --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"); /* Clock icon for time inputs */
-  --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"); /* Magnifying glass for search inputs */
-  --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"); /* X icon for close/dismiss actions (e.g. modal close button) */
-  --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"); /* Animated spinner for [aria-busy="true"] elements */
-}
-
-/* Responsive Font Sizes – progressively increase root font-size at wider viewports */
-@media (--breakpoint-sm) {
-  :root,
-  :host {
-    --font-size: 106.25%;
-  }
-}
-
-@media (--breakpoint-md) {
-  :root,
-  :host {
-    --font-size: 112.5%;
-  }
-}
-
-@media (--breakpoint-lg) {
-  :root,
-  :host {
-    --font-size: 118.75%;
-  }
-}
-
-@media (--breakpoint-xl) {
-  :root,
-  :host {
-    --font-size: 125%;
-  }
-}
-
-@media (--breakpoint-xxl) {
-  :root,
-  :host {
-    --font-size: 131.25%;
-  }
-}
+@import './_shared.css';
 
 /* ==========================================================================
-   3. Semantic Colors - Light Theme (Default)
+   Semantic Colors - Light Theme (Default)
    ==========================================================================
 
    Color variable naming convention used throughout sections 3–5:
@@ -331,7 +218,7 @@
 }
 
 /* ==========================================================================
-   4. Semantic Colors - Dark Theme (System Preference)
+   Semantic Colors - Dark Theme (System Preference)
    ==========================================================================
 
    Applied when the user's OS is set to dark mode AND no explicit
@@ -515,7 +402,7 @@
 }
 
 /* ==========================================================================
-   5. Semantic Colors - Dark Theme (Explicit)
+   Semantic Colors - Dark Theme (Explicit)
    ==========================================================================
 
    Applied when data-theme="dark" is set on the root element,
@@ -689,7 +576,7 @@
 }
 
 /* ==========================================================================
-   6. Scoped Element Variables (from Pico Theme)
+   Scoped Element Variables (from Pico Theme)
    ==========================================================================
 
    These selectors override the global :root variables on a per-element
@@ -724,37 +611,37 @@ h6 {
 h1 {
   --font-size: 2rem;
   --line-height: 1.125;
-  --typography-spacing-top: 3rem; /* Extra top margin to separate from previous content */
+  --typography-headings-top: 3rem; /* Extra top margin to separate from previous content */
 }
 
 h2 {
   --font-size: 1.75rem;
   --line-height: 1.15;
-  --typography-spacing-top: 2.625rem;
+  --typography-headings-top: 2.625rem;
 }
 
 h3 {
   --font-size: 1.5rem;
   --line-height: 1.175;
-  --typography-spacing-top: 2.25rem;
+  --typography-headings-top: 2.25rem;
 }
 
 h4 {
   --font-size: 1.25rem;
   --line-height: 1.2;
-  --typography-spacing-top: 1.874rem;
+  --typography-headings-top: 1.874rem;
 }
 
 h5 {
   --font-size: 1.125rem;
   --line-height: 1.225;
-  --typography-spacing-top: 1.6875rem;
+  --typography-headings-top: 1.6875rem;
 }
 
 h6 {
   --font-size: 1rem;
   --line-height: 1.25;
-  --typography-spacing-top: 1.5rem;
+  --typography-headings-top: 1.5rem;
 }
 
 /* Table head/foot cells get a bolder weight and a thicker bottom border */

package/src/variables/_shared.css

@@ -0,0 +1,121 @@
+:root {
+  --transparent: transparent;
+}
+
+/* ==========================================================================
+   Responsive Breakpoints (custom media queries)
+   Used consistently across semantics, variants, and utilities.
+   ========================================================================== */
+
+@custom-media --breakpoint-sm (min-width: 576px);
+@custom-media --breakpoint-md (min-width: 768px);
+@custom-media --breakpoint-lg (min-width: 1024px);
+@custom-media --breakpoint-xl (min-width: 1280px);
+@custom-media --breakpoint-xxl (min-width: 1536px);
+
+/* ==========================================================================
+   2. Typography & Layout Variables (from Pico Theme)
+   ========================================================================== */
+
+:root,
+:host {
+  /* Font Families */
+  --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);
+
+  /* Typography – base defaults inherited by all elements */
+  --line-height: 1.5;
+  --font-weight: 400;
+  --font-size: 100%; /* Root font-size; overridden per breakpoint below and per element in §6 */
+  --text-underline-offset: 0.1rem;
+
+  /* Borders & Effects – global defaults for border-radius, border-width, outline, and transition */
+  --border-radius: 0.25rem;
+  --border-width: 0.0625rem; /* 1px – base border width used by forms, tables, etc. */
+  --outline-width: 0.125rem; /* 2px – focus-ring width */
+  --transition: 0.2s ease-in-out; /* Default transition timing for interactive state changes */
+
+  /* Spacing – shared base unit used for padding, margins, and gaps throughout the layout */
+  --spacing: 1rem;
+  --responsive-multiplier: 1; /* Multiplier applied to spacing for responsive adjustments at wider breakpoints */
+  --typography-spacing-vertical: 1rem; /* Vertical margin below typographic elements (p, lists, etc.) */
+  --block-spacing-vertical: var(--spacing); /* Vertical padding inside block-level components (cards, modals, etc.) */
+  --block-spacing-horizontal: var(--spacing); /* Horizontal padding inside block-level components */
+  --grid-column-gap: var(--spacing); /* Column gap in CSS Grid layouts */
+  --grid-row-gap: var(--spacing); /* Row gap in CSS Grid layouts */
+  --form-element-spacing-vertical: 0.75rem; /* Vertical padding inside form inputs, selects, and textareas */
+  --form-element-spacing-horizontal: 1rem; /* Horizontal padding inside form inputs, selects, and textareas */
+
+  /* Shadows – used by [role="group"] and [role="search"] button/input combos */
+  --group-shadow: 0 0 0 rgba(0, 0, 0, 0); /* Default (no shadow) */
+  --group-shadow-focus-with-button: 0 0 0 var(--outline-width) var(--color-primary-focus); /* Focus ring when a button inside the group is focused */
+  --group-shadow-focus-with-input: 0 0 0 0.0625rem var(--form-border-color); /* Focus ring when an input inside the group is focused */
+
+  /* Modal – backdrop overlay settings */
+  --modal-overlay-backdrop-filter: blur(0.375rem); /* Applies a blur behind the modal overlay */
+
+  /* Navigation – spacing and breadcrumb configuration */
+  --nav-link-spacing-vertical: 0.5rem; /* Vertical padding inside nav links */
+  --nav-link-spacing-horizontal: 0.5rem; /* Horizontal padding inside nav links */
+  --nav-breadcrumb-divider: ">"; /* Character displayed between breadcrumb items */
+
+  /* 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"); /* Checkmark for checked checkboxes */
+  --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"); /* Minus icon for indeterminate checkboxes */
+  --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"); /* Dropdown arrow for <select> elements */
+  --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"); /* Calendar icon for date inputs */
+  --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"); /* Clock icon for time inputs */
+  --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"); /* Magnifying glass for search inputs */
+  --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"); /* X icon for close/dismiss actions (e.g. modal close button) */
+  --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"); /* Animated spinner for [aria-busy="true"] elements */
+
+  --sidebar-width: 25%; /* Sidebar width */
+}
+
+/* Responsive Font Sizes – progressively increase root font-size at wider viewports */
+@media (--breakpoint-sm) {
+  :root,
+  :host {
+    --font-size: 106.25%;
+    --sidebar-width: max(25%, 150px);
+    --responsive-multiplier: 1.25;
+  }
+}
+
+@media (--breakpoint-md) {
+  :root,
+  :host {
+    --font-size: 112.5%;
+    --sidebar-width: max(22%, 180px);
+    --responsive-multiplier: 1.5;
+  }
+}
+
+@media (--breakpoint-lg) {
+  :root,
+  :host {
+    --font-size: 118.75%;
+    --sidebar-width: max(20%, 200px);
+    --responsive-multiplier: 1.75;
+  }
+}
+
+@media (--breakpoint-xl) {
+  :root,
+  :host {
+    --font-size: 125%;
+    --sidebar-width: max(18%, 220px);
+    --responsive-multiplier: 2;
+  }
+}
+
+@media (--breakpoint-xxl) {
+  :root,
+  :host {
+    --font-size: 131.25%;
+    --sidebar-width: clamp(240px, 16%, 300px);
+    --responsive-multiplier: 2.25;
+  }
+}

package/src/variants/_card.css

@@ -4,6 +4,9 @@
  * Can be applied to any element (article, div, section, etc.)
  */
 .card {
+  --block-spacing-vertical: calc(var(--spacing) * var(--responsive-multiplier));
+  --block-spacing-horizontal: calc(var(--spacing) * var(--responsive-multiplier));
+
   margin-bottom: var(--block-spacing-vertical);
   padding: var(--block-spacing-vertical) var(--block-spacing-horizontal);
   border-radius: var(--border-radius);
@@ -12,6 +15,7 @@
 
   & > header,
   & > footer {
+    width: calc(100% + var(--block-spacing-horizontal) * 2);
     margin-right: calc(var(--block-spacing-horizontal) * -1);
     margin-left: calc(var(--block-spacing-horizontal) * -1);
     padding: calc(var(--block-spacing-vertical) * 0.66) var(--block-spacing-horizontal);

package/src/variants/_contained.css

@@ -0,0 +1,43 @@
+/**
+ * Contained
+ * Applies container constraints (max-width and horizontal margins) to all direct children
+ * instead of the container itself
+ */
+.contained,
+.contained-fluid {
+  width: 100%;
+
+  & > * {
+    margin-right: auto;
+    margin-left: auto;
+    padding-right: var(--spacing);
+    padding-left: var(--spacing);
+    width: 100%;
+  }
+}
+
+.contained {
+  & > * {
+    @media (--breakpoint-sm) {
+      max-width: 510px;
+      padding-right: 0;
+      padding-left: 0;
+    }
+
+    @media (--breakpoint-md) {
+      max-width: 700px;
+    }
+
+    @media (--breakpoint-lg) {
+      max-width: 950px;
+    }
+
+    @media (--breakpoint-xl) {
+      max-width: 1200px;
+    }
+
+    @media (--breakpoint-xxl) {
+      max-width: 1450px;
+    }
+  }
+}

package/src/variants/_container.css

@@ -31,6 +31,6 @@
   }
 
   @media (--breakpoint-xxl) {
-    max-width: 1450px;
+    max-width: 1440px;
   }
 }

package/src/variants/_contrast.css

@@ -17,24 +17,21 @@
   }
 }
 
-/* Buttons */
-: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(.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([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: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);
+}
 
-    &: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);
-    }
-  }
+: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);
 }
 
 /* Accordion chevron dark mode override */

package/src/variants/_frame.css

@@ -0,0 +1,15 @@
+.hframe {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+  justify-content: stretch;
+}
+
+.vframe {
+  align-items: stretch;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  justify-content: flex-start;
+}

package/src/variants/_ghost.css

@@ -4,39 +4,42 @@
  * Used on buttons and accordion elements
  */
 
-/* Buttons */
-:is(button, [type="submit"], [type="button"], [role="button"]) {
-  &.ghost {
-    --color-background: transparent;
-    --color-text: var(--color-primary);
-    --border-color: var(--color-primary);
-
-    &: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);
-    }
-
-    &.secondary {
-      --color-text: var(--color-secondary);
-      --border-color: var(--color-secondary);
-
-      &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
-        --color-text: var(--color-secondary-hover);
-        --border-color: var(--color-secondary-hover);
-      }
-    }
-
-    &.contrast {
-      --color-text: var(--color-contrast);
-      --border-color: var(--color-contrast);
-
-      &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
-        --color-text: var(--color-contrast-hover);
-        --border-color: var(--color-contrast-hover);
-      }
-    }
-  }
+.ghost {
+  --color-background: transparent;
+
+  background-color: var(--color-background) !important;
+}
+
+:is(button, [type="submit"], [type="button"], [role="button"]).ghost {
+  --color-background: transparent;
+  --color-text: var(--color-primary);
+  --border-color: var(--color-primary);
+}
+
+: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(.panel, button, [type="submit"], [type="button"], [role="button"]).ghost.secondary {
+  --color-text: var(--color-secondary);
+  --border-color: var(--color-secondary);
+}
+
+: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(.panel, button, [type="submit"], [type="button"], [role="button"]).ghost.contrast {
+  --color-text: var(--color-contrast);
+  --border-color: var(--color-contrast);
+}
+
+: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);
 }
 
 /* Reset buttons */

package/src/variants/_panel.css

@@ -0,0 +1,18 @@
+/**
+ * Panel akin to a flat card.
+ */
+.panel {
+  --block-spacing-vertical: calc(var(--spacing) * var(--responsive-multiplier));
+  --block-spacing-horizontal: calc(var(--spacing) * var(--responsive-multiplier));
+
+  --color-background: var(--card-bg);
+  --border-color: var(--card-border);
+  --color-text: var(--color-text);
+
+  background-color: var(--color-background);
+  border-radius: var(--border-radius);
+  border: var(--border-width) solid var(--border-color);
+  color: var(--color-text);
+  margin-bottom: var(--block-spacing-vertical);
+  padding: var(--block-spacing-vertical) var(--block-spacing-horizontal);
+}

package/src/variants/_secondary.css

@@ -17,13 +17,10 @@
   }
 }
 
-/* Buttons */
-:is(button, [type="submit"], [type="button"], [role="button"]).secondary {
+: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);
-
-  cursor: pointer;
 }
 
 :is(button, [type="submit"], [type="button"], [role="button"]).secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {

package/src/variants/_sidebar.css

@@ -0,0 +1,11 @@
+aside {
+  &.sidebar {
+    z-index: 1020;
+    position: sticky;
+    top: 0;
+    max-height: 100svh;
+    align-self: stretch;
+    display: flex;
+    flex-direction: column;
+  }
+}

package/src/variants/index.css

@@ -3,7 +3,7 @@
  * Class-based variant styles that extend semantic
  */
 
-/* Global variables */
-@import '../_variables.css';
+/* Shared variables */
+@import '../variables/_shared.css';
 
 @import "./modules.css";

package/src/variants/modules.css

@@ -5,8 +5,14 @@
  */
 
 @import "./_card.css";
+@import "./_contained.css";
 @import "./_container.css";
-@import "./_secondary.css";
 @import "./_contrast.css";
-@import "./_ghost.css";
+@import "./_frame.css";
+@import "./_panel.css";
+@import "./_secondary.css";
+@import "./_sidebar.css";
 @import "./_striped.css";
+
+/* Needs to be imported after other variants to override colors */
+@import "./_ghost.css";