@semanticus/semanticus-css 1.1.0 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@semanticus/semanticus-css",
-  "version": "1.1.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",
@@ -88,6 +88,8 @@
     "storybook": "storybook dev -p 6006",
     "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

@@ -1,6 +1,4 @@
-.card,
-.pane {
-  --shadow: var(--dialog-shadow);
+.card {
   --color-background: var(--dialog-fill);
   --border-color: var(--dialog-border);
 
@@ -10,7 +8,6 @@
   border-radius: var(--radius);
   border: var(--border-size) solid var(--border-color);
   background: var(--color-background);
-  box-shadow: var(--shadow);
 
   > header,
   > footer {
@@ -44,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 "./_container.css";
+@import "./_grid.css";
 @import "./_icons.css";
-@import "./_pane.css";
+@import "./_content-grid.css";
 @import "./_sidebar.css";

package/src/index.css

@@ -1,5 +1,5 @@
 /*!
- * Semanticus CSS v1.1.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

@@ -0,0 +1,126 @@
+[role="search"],
+[role="group"] {
+  border-radius: var(--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) {
+      /* 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;
+    }
+
+    &: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(--input-spacing-vertical) *
+            2 + var(--border-size) * 2
+    );
+    overflow: visible;
+
+    &:not(:first-child) {
+      margin-left: calc(var(--border-size) * -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-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-input);
+
+      & button,
+      & [type="submit"],
+      & [type="button"],
+      & [role="button"] {
+        --button-shadow: 0 0 0 var(--border-size)
+            var(--color-primary-fill);
+        --button-shadow-hover: 0 0 0 var(--border-size)
+            var(--color-primary-fill-hover);
+      }
+    }
+
+    & button:focus,
+    & [type="submit"]:focus,
+    & [type="reset"]:focus,
+    & [type="button"]:focus,
+    & [role="button"]:focus {
+      box-shadow: none;
+    }
+  }
+}

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

@@ -0,0 +1,14 @@
+/* [role="search"] shares most of its styles with [role="group"] */
+/* See _role-group.css for the shared styles */
+
+[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/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);
@@ -15,12 +40,21 @@
   border-inline-start-width: var(--alert-size);
   border-inline-start-color: var(--dialog-border);
   background: var(--color-background);
-  position: relative;
 
   &:is(.ghost, .subtle) {
     --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;
@@ -35,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/elements/_nav.css

@@ -8,8 +8,12 @@ nav {
   justify-content: space-between;
   overflow: visible;
 
-  & > * {
+  > * {
     margin: 0 !important;
+
+    &:only-child {
+      flex-grow: 1;
+    }
   }
 
   &[aria-label=breadcrumb] {

package/src/semantics/modules.css

@@ -2,9 +2,9 @@
 @import "./attributes/_aria-disabled.css";
 @import "./attributes/_hidden.css";
 @import "./attributes/_popover.css";
-@import "./attributes/_role-group-search.css";
+@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/utilities/effects/_shadows.css

@@ -6,6 +6,10 @@
   box-shadow: var(--shadow-sm) !important;
 }
 
+.shadow-md {
+  box-shadow: var(--shadow-md) !important;
+}
+
 .shadow-lg {
   box-shadow: var(--shadow-lg) !important;
 }

package/src/variables/_theme.css

@@ -220,7 +220,7 @@
 
   /* === Dialog / Alert tokens === */
   --dialog-fill: light-dark(var(--color-background), var(--color-slate-900));
-  --dialog-border: light-dark(var(--color-border), var(--color-slate-900));
+  --dialog-border: var(--color-border);
   --dialog-shadow: var(--shadow);
   --dialog-section-fill: light-dark(
     color-mix(in srgb, var(--color-slate-50) 25%, white),

package/src/variants/intent/_contrast.css

@@ -1,6 +1,17 @@
-:where(a:not([role="button"])),
-[role="link"] {
-  &.contrast {
+.contrast {
+  &:not(a:not([role="button"]), [role="link"]) {
+    --color-background: oklch(from var(--color-contrast-fill) l c h / var(--color-background-opacity));
+    --border-color: oklch(from var(--color-contrast-fill) l c h / var(--color-border-opacity));
+    --color-text: oklch(from var(--color-contrast-on-fill) l c h / var(--color-text-opacity));
+    --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
+
+    --dialog-fill: oklch(from var(--color-contrast-fill) l c h / var(--color-background-opacity));
+    --dialog-border: oklch(from var(--color-contrast-fill) l c h / var(--color-background-opacity));
+    --dialog-section-fill: color-mix(in srgb, light-dark(var(--color-slate-50), var(--color-slate-900)), transparent 90%);
+    --dialog-section-border: color-mix(in srgb, light-dark(var(--color-slate-50), black), transparent 95%);
+  }
+
+  &:is(a:not([role="button"]), [role="link"]) {
     --color-text: oklch(from var(--color-contrast-text) l c h / var(--color-text-opacity));
     --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
 
@@ -8,17 +19,8 @@
       --color-text: oklch(from var(--color-contrast-text-hover) l c h / var(--color-text-opacity));
     }
   }
-}
 
-.contrast:not([role="link"], a:not([role="button"])) {
-  --color-background: oklch(from var(--color-contrast-fill) l c h / var(--color-background-opacity));
-  --border-color: oklch(from var(--color-contrast-fill) l c h / var(--color-border-opacity));
-  --color-text: oklch(from var(--color-contrast-on-fill) l c h / var(--color-text-opacity));
-  --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
-}
-
-:is(button, [type="submit"], [type="button"], [role="button"]):not([role="link"]) {
-  &.contrast {
+  &:is(button, [type="submit"], [type="button"], [role="button"]):not([role="link"]) {
     &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
       --color-background: oklch(from var(--color-contrast-fill-hover) l c h / var(--color-background-opacity));
       --border-color: oklch(from var(--color-contrast-fill-hover) l c h / var(--color-border-opacity));
@@ -32,13 +34,6 @@
   }
 }
 
-:is(.card, .pane, [role="status"], [role="alert"]).contrast {
-  --dialog-fill: oklch(from var(--color-contrast-fill) l c h / var(--color-background-opacity));
-  --dialog-border: oklch(from var(--color-contrast-fill) l c h / var(--color-background-opacity));
-  --dialog-section-fill: color-mix(in srgb, light-dark(var(--color-slate-50), var(--color-slate-900)), transparent 90%);
-  --dialog-section-border: color-mix(in srgb, light-dark(var(--color-slate-50), black), transparent 95%);
-}
-
 /* Accordion chevron override */
 details summary[role="button"].contrast::after {
   @container style(--theme: dark) {

package/src/variants/intent/_danger.css

@@ -1,6 +1,16 @@
-:where(a:not([role="button"])),
-[role="link"] {
-  &.danger {
+.danger {
+  &:not(a:not([role="button"]), [role="link"]) {
+    --color-background: oklch(from var(--color-danger-fill) l c h / var(--color-background-opacity));
+    --border-color: oklch(from var(--color-danger-fill) l c h / var(--color-border-opacity));
+    --color-text: oklch(from var(--color-danger-on-fill) l c h / var(--color-text-opacity));
+    --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
+
+    --dialog-fill: oklch(from var(--color-danger-fill) l c h / var(--color-background-opacity));
+    --dialog-border: oklch(from var(--color-danger-fill) l c h / var(--color-background-opacity));
+    --dialog-section-fill: color-mix(in srgb, light-dark(var(--color-slate-900), var(--color-slate-50)), transparent 90%);
+  }
+
+  &:is(a:not([role="button"]), [role="link"]) {
     --color-text: oklch(from var(--color-danger-text) l c h / var(--color-text-opacity));
     --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
 
@@ -8,17 +18,8 @@
       --color-text: oklch(from var(--color-danger-text-hover) l c h / var(--color-text-opacity));
     }
   }
-}
 
-.danger:not([role="link"], a:not([role="button"])) {
-  --color-background: oklch(from var(--color-danger-fill) l c h / var(--color-background-opacity));
-  --border-color: oklch(from var(--color-danger-fill) l c h / var(--color-border-opacity));
-  --color-text: oklch(from var(--color-danger-on-fill) l c h / var(--color-text-opacity));
-  --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
-}
-
-:is(button, [type="submit"], [type="button"], [role="button"]):not([role="link"]) {
-  &.danger {
+  &:is(button, [type="submit"], [type="button"], [role="button"]):not([role="link"]) {
     &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
       --color-background: oklch(from var(--color-danger-fill-hover) l c h / var(--color-background-opacity));
       --border-color: oklch(from var(--color-danger-fill-hover) l c h / var(--color-border-opacity));
@@ -31,9 +32,3 @@
     }
   }
 }
-
-:is(.card, .pane, [role="status"], [role="alert"]).danger {
-  --dialog-fill: oklch(from var(--color-danger-fill) l c h / var(--color-background-opacity));
-  --dialog-border: oklch(from var(--color-danger-fill) l c h / var(--color-background-opacity));
-  --dialog-section-fill: color-mix(in srgb, light-dark(var(--color-slate-900), var(--color-slate-50)), transparent 90%);
-}

package/src/variants/intent/_info.css

@@ -1,6 +1,16 @@
-:where(a:not([role="button"])),
-[role="link"] {
-  &.info {
+.info {
+  &:not(a:not([role="button"]), [role="link"]) {
+    --color-background: oklch(from var(--color-info-fill) l c h / var(--color-background-opacity));
+    --border-color: oklch(from var(--color-info-fill) l c h / var(--color-border-opacity));
+    --color-text: oklch(from var(--color-info-on-fill) l c h / var(--color-text-opacity));
+    --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
+
+    --dialog-fill: oklch(from var(--color-info-fill) l c h / var(--color-background-opacity));
+    --dialog-border: oklch(from var(--color-info-fill) l c h / var(--color-background-opacity));
+    --dialog-section-fill: color-mix(in srgb, light-dark(var(--color-slate-900), var(--color-slate-50)), transparent 90%);
+  }
+
+  &:is(a:not([role="button"]), [role="link"]) {
     --color-text: oklch(from var(--color-info-text) l c h / var(--color-text-opacity));
     --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
 
@@ -8,17 +18,8 @@
       --color-text: oklch(from var(--color-info-text-hover) l c h / var(--color-text-opacity));
     }
   }
-}
 
-.info:not([role="link"], a:not([role="button"])) {
-  --color-background: oklch(from var(--color-info-fill) l c h / var(--color-background-opacity));
-  --border-color: oklch(from var(--color-info-fill) l c h / var(--color-border-opacity));
-  --color-text: oklch(from var(--color-info-on-fill) l c h / var(--color-text-opacity));
-  --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
-}
-
-:is(button, [type="submit"], [type="button"], [role="button"]):not([role="link"]) {
-  &.info {
+  &:is(button, [type="submit"], [type="button"], [role="button"]):not([role="link"]) {
     &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
       --color-background: oklch(from var(--color-info-fill-hover) l c h / var(--color-background-opacity));
       --border-color: oklch(from var(--color-info-fill-hover) l c h / var(--color-border-opacity));
@@ -31,9 +32,3 @@
     }
   }
 }
-
-:is(.card, .pane, [role="status"], [role="alert"]).info {
-  --dialog-fill: oklch(from var(--color-info-fill) l c h / var(--color-background-opacity));
-  --dialog-border: oklch(from var(--color-info-fill) l c h / var(--color-background-opacity));
-  --dialog-section-fill: color-mix(in srgb, light-dark(var(--color-slate-900), var(--color-slate-50)), transparent 90%);
-}