@semanticus/semanticus-css 1.2.0 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@semanticus/semanticus-css",
-  "version": "1.2.0",
+  "version": "2.0.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",
@@ -89,6 +89,7 @@
     "demo:server": "tsx --tsconfig scripts/tsconfig.json scripts/demo-server.ts",
     "test": "npx playwright test",
     "test:dev": "npx playwright test --ui",
+    "test:report": "npx playwright show-report --host 0.0.0.0",
     "test:update-snapshots": "npx playwright test -u",
     "kill-zombies": "sh -c 'PORT=${PORT:-4000}; pids=$(lsof -t -i :$PORT); if [ -n \"$pids\" ]; then echo \"Killing PIDs: $pids\"; kill -9 $pids; else echo \"No processes listening on port $PORT\"; fi'",
     "kill-playwright": "sh -c 'pgrep -af playwright | awk \"{print $1}\" | xargs -r kill -9 || true'",

package/src/components/_card.css

@@ -41,4 +41,68 @@
   > :last-child:is(hgroup, h1, h2, h3, h4, h5, h6) {
     margin-bottom: 0;
   }
+
+  &:is(ul, [role="list"], [role="group"]) {
+    padding: 0;
+    border: none;
+
+    > * {
+      --color-background: transparent;
+      --card-item-fill: var(--color-background);
+      --border-color: color-mix(in srgb, light-dark(var(--color-slate-900), var(--color-zinc-350)), transparent 90%);
+
+      background: var(--card-item-fill);
+      color: var(--color-text);
+      margin: 0;
+      padding: var(--spacing);
+      border-radius: 0;
+      border: var(--border-size) solid var(--border-color);
+
+      &:first-child {
+        border-top-left-radius: var(--radius);
+      }
+
+      &:last-child {
+        border-bottom-right-radius: var(--radius);
+      }
+
+      &:is([aria-current]:not([aria-current="false"])) {
+        --card-item-fill: color-mix(in srgb, var(--color-background), var(--color-hover-effect) 15%);
+      }
+    }
+  }
+
+  &:is(ul, [role="list"]) {
+    display: flex;
+    flex-direction: column;
+
+    > * {
+      border-top: none;
+      list-style: none;
+
+      &:first-child {
+        border-top: var(--border-size) solid var(--border-color);
+        border-top-right-radius: var(--radius);
+      }
+
+      &:last-child {
+        border-bottom-left-radius: var(--radius);
+      }
+    }
+  }
+
+  &[role="group"] {
+    > * {
+      border-left: none;
+
+      &:first-child {
+        border-left: var(--border-size) solid var(--border-color);
+        border-bottom-left-radius: var(--radius);
+      }
+
+      &:last-child {
+        border-top-right-radius: var(--radius);
+      }
+    }
+  }
 }

package/src/components/_content-grid.css

@@ -0,0 +1,95 @@
+/*!
+ * Content Grid
+ *
+ * A CSS Grid layout pattern that eliminates the need for container/wrapper divs.
+ * Inspired by Kevin Powell's content grid technique (https://www.youtube.com/watch?v=c13gpBrnGEw)
+ * and the original idea from Stephanie Eckles (smolcss.dev) and Ryan Mulligan.
+ *
+ * The grid provides three width levels for direct children:
+ *   - content (default) — constrained to the content max-width
+ *   - .breakout        — wider than content, narrower than full-width
+ *   - .full-width      — edge-to-edge spanning the entire viewport
+ *
+ * .full-width elements also create a nested grid with the same column structure,
+ * so their children follow the same content / breakout / full-width rules.
+ */
+
+.content-grid {
+  --content-grid-padding-inline: var(--spacing);
+  --content-grid-content-max-width: 70ch;
+  --content-grid-breakout-max-width: 90ch;
+
+  /* Internal computed value */
+  --content-grid-breakout-size: max(
+    0px,
+    calc(
+      (var(--content-grid-breakout-max-width) - var(--content-grid-content-max-width)) / 2
+    )
+  );
+
+  display: grid;
+  grid-template-columns:
+    [full-width-start]
+    minmax(var(--content-grid-padding-inline), 1fr)
+    [breakout-start]
+    minmax(0px, var(--content-grid-breakout-size))
+    [content-start]
+    min(
+      var(--content-grid-content-max-width),
+      100% - var(--content-grid-padding-inline) * 2
+    )
+    [content-end]
+    minmax(0px, var(--content-grid-breakout-size))
+    [breakout-end]
+    minmax(var(--content-grid-padding-inline), 1fr)
+    [full-width-end];
+}
+
+/* ── Default placement: all direct children → content column ── */
+.content-grid > :not(.breakout, .full-width) {
+  grid-column: content;
+}
+
+/* ── Breakout: spans the breakout area (wider than content) ── */
+.content-grid > .breakout {
+  grid-column: breakout;
+}
+
+/* ── Full-width: spans edge-to-edge, becomes a nested content grid ── */
+.content-grid > .full-width {
+  grid-column: full-width;
+  display: grid;
+  grid-template-columns: inherit;
+}
+
+/* Children of any .full-width (at any nesting depth) follow the same rules */
+.content-grid .full-width > :not(.breakout, .full-width) {
+  grid-column: content;
+}
+
+.content-grid .full-width > .breakout {
+  grid-column: breakout;
+}
+
+/* ── Nested full-width: spans edge-to-edge within any .full-width ancestor ── */
+/*
+ * Instead of inheriting the full 5-track template (which starts with a gutter
+ * column), we define a single centered content-width column. This ensures that
+ * auto-placed items — including bare text nodes, which CSS selectors cannot
+ * target — land in the content column rather than the first gutter track.
+ *
+ * Trade-off: .breakout and .full-width children inside a nested .full-width
+ * will not span wider than the content column (graceful degradation).
+ */
+.content-grid .full-width > .full-width {
+  grid-column: full-width;
+  display: grid;
+  grid-template-columns:
+    [full-width-start breakout-start content-start]
+    min(
+      var(--content-grid-content-max-width),
+      100% - var(--content-grid-padding-inline) * 2
+    )
+    [content-end breakout-end full-width-end];
+  justify-content: center;
+}

package/src/{semantics/attributes/_role-toolbar.css → components/_grid.css}

@@ -1,4 +1,4 @@
-[role="toolbar"] {
+.grid {
   grid-column-gap: var(--spacing);
   grid-row-gap: var(--spacing);
   display: grid;

package/src/components/_icons.css

@@ -2,8 +2,8 @@
 [class^="icon-"],
 [class*=" icon-"] {
   display: inline-block;
-  width: 1em;
-  height: 1em;
+  min-width: 1em;
+  min-height: 1em;
   margin: 0;
   padding: 0;
   border: none;
@@ -14,7 +14,6 @@
   mask-size: contain;
   mask-repeat: no-repeat;
   vertical-align: -.199em;
-  align-self: center;
   color: inherit;
 }
 

package/src/components/modules.css

@@ -1,5 +1,6 @@
 @import "./_card.css";
-@import "./_card-list.css";
 @import "./_container.css";
+@import "./_grid.css";
 @import "./_icons.css";
+@import "./_content-grid.css";
 @import "./_sidebar.css";

package/src/index.css

@@ -1,5 +1,5 @@
 /*!
- * Semanticus CSS v1.2.0 (https://semanticus.design/)
+ * Semanticus CSS v2.0.0 (https://semanticus.design/)
  *
  * A ARIA-centric, semantic HTML — enhanced with components and variants and utilities
  *

package/src/semantics/attributes/_popover.css

@@ -6,8 +6,4 @@
   background-color: var(--color-background);
   height: unset;
   margin: unset;
-
-  &:popover-open {
-    display: block !important;
-  }
 }

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

@@ -18,6 +18,7 @@
     margin-bottom: 0;
 
     &:not(:first-child) {
+      /* when a button is next to an input that has a border */
       margin-left: calc(var(--border-size) * -1);
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;

package/src/semantics/attributes/_role-status-alert.css

@@ -8,6 +8,31 @@
   --alert-size: var(--border-size);
 
   color: var(--color-text);
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: calc(var(--nav-link-gap) * 1.5);
+  align-items: start;
+
+  &:empty {
+    display: none;
+  }
+
+  &:has(> :nth-child(2):last-child) {
+    grid-template-columns: 1fr auto;
+
+    &:has(> :first-child:empty) {
+      display: none;
+    }
+  }
+
+  &:has(> :nth-child(3):last-child) {
+    grid-template-columns: auto 1fr auto;
+
+    &:has(> :nth-child(2):empty) {
+      display: none;
+    }
+  }
+
   padding: var(--spacing);
   margin-bottom: var(--spacing);
   border-radius: var(--radius);
@@ -20,6 +45,16 @@
     --alert-size: calc(var(--border-size) * 4);
   }
 
+  > * {
+    margin: 0 !important;
+  }
+
+  [class^="icon-"],
+  [class*=" icon-"] {
+    position: relative;
+    top: 4px;
+  }
+
   /* 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, top 0.2s ease-in-out, right 0.2s ease-in-out, left 0.2s ease-in-out, bottom 0.2s ease-in-out;
@@ -34,7 +69,7 @@
     margin: var(--spacing);
 
     &:popover-open {
-      display: flex;
+      display: grid;
     }
 
     &[data-placement="top-start"] {

package/src/semantics/elements/_details.css

@@ -4,7 +4,6 @@ summary {
 
 details {
   display: block;
-  margin-bottom: var(--spacing);
 
   & summary {
     line-height: 1rem;

package/src/semantics/modules.css

@@ -5,7 +5,6 @@
 @import "./attributes/_role-group.css";
 @import "./attributes/_role-search.css";
 @import "./attributes/_role-status-alert.css";
-@import "./attributes/_role-toolbar.css";
 @import "./attributes/_role-tooltip.css";
 
 @import "./elements/_abbr.css";

package/src/components/_card-list.css

@@ -1,60 +0,0 @@
-.card-list {
-  border: none;
-  display: flex;
-  flex-direction: column;
-  padding: 0;
-  list-style: none;
-
-  > * {
-    --color-background: transparent;
-    --card-fill: var(--color-background);
-    --border-color: color-mix(in srgb, light-dark(var(--color-slate-900), var(--color-zinc-350)), transparent 90%);
-
-    background: var(--card-fill);
-    border-bottom: var(--border-size) solid var(--border-color);
-    border-inline: var(--border-size) solid var(--border-color);
-    color: var(--color-text);
-    margin: 0;
-    padding: var(--spacing);
-    list-style: none;
-
-    &:first-child {
-      border-top: var(--border-size) solid var(--border-color);
-      border-top-left-radius: var(--radius);
-      border-top-right-radius: var(--radius);
-    }
-
-    &:last-child {
-      border-bottom-left-radius: var(--radius);
-      border-bottom-right-radius: var(--radius);
-    }
-
-    &:is([aria-current]:not([aria-current="false"])) {
-      --card-fill: color-mix(in srgb, var(--color-background), var(--color-hover-effect) 15%);
-    }
-  }
-
-  nav & {
-    gap: 0;
-    flex-direction: row;
-
-    > * {
-      flex: 1 1 0;
-      text-align: center;
-      border-top: var(--border-size) solid var(--border-color);
-      border-left: none;
-      white-space: nowrap;
-
-      &:first-child {
-        border-left: var(--border-size) solid var(--border-color);
-        border-bottom-left-radius: var(--radius);
-        border-top-right-radius: 0;
-      }
-
-      &:last-child {
-        border-top-right-radius: var(--radius);
-        border-bottom-left-radius: 0;
-      }
-    }
-  }
-}