@semanticus/semanticus-css 1.0.0 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@semanticus/semanticus-css",
-  "version": "1.0.0",
+  "version": "1.2.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,7 @@
     "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: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-list.css

@@ -0,0 +1,60 @@
+.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;
+      }
+    }
+  }
+}

package/src/components/_card.css

@@ -1,7 +1,4 @@
-.card,
-.pane,
-.panel {
-  --shadow: var(--dialog-shadow);
+.card {
   --color-background: var(--dialog-fill);
   --border-color: var(--dialog-border);
 
@@ -11,8 +8,6 @@
   border-radius: var(--radius);
   border: var(--border-size) solid var(--border-color);
   background: var(--color-background);
-  box-shadow: var(--shadow);
-  position: relative;
 
   > header,
   > footer {
@@ -20,65 +15,30 @@
     margin-inline: calc(var(--spacing) * -1);
     padding-inline: var(--spacing);
     background-color: var(--dialog-section-fill);
+    display: flex;
+    gap: calc(var(--nav-link-gap) * 1.5);
+    align-items: center;
   }
 
+  /* Header styling */
   > header {
     margin-top: calc(var(--spacing) * -1);
     border-bottom: var(--border-size) solid var(--dialog-section-border);
     border-top-right-radius: var(--radius);
     border-top-left-radius: var(--radius);
+    justify-content: space-between;
   }
 
+  /* Footer styling */
   > footer {
     margin-bottom: calc(var(--spacing) * -1);
     border-top: var(--border-size) solid var(--dialog-section-border);
     border-bottom-right-radius: var(--radius);
     border-bottom-left-radius: var(--radius);
-    display: flex;
     justify-content: end;
-    gap: calc(var(--nav-link-gap) * 1.5);
   }
 
-  > :last-child:is(hgroup) {
+  > :last-child:is(hgroup, h1, h2, h3, h4, h5, h6) {
     margin-bottom: 0;
   }
-
-  /* Close button styling */
-  [rel="prev"] {
-    margin: 0;
-    padding: 0;
-    position: absolute;
-    display: block;
-    width: 1rem;
-    height: 1rem;
-    top: var(--spacing);
-    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;
-    }
-  }
-}
-
-.pane,
-.panel {
-  --dialog-shadow: none;
-  --shadow: none;
-}
-
-.pane {
-  --dialog-border: transparent;
-  --border-color: transparent;
-
-  border-radius: 0;
 }

package/src/components/_icons.css

@@ -0,0 +1,59 @@
+/* Base styles shared by all .icon-* classes */
+[class^="icon-"],
+[class*=" icon-"] {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  margin: 0;
+  padding: 0;
+  border: none;
+  border-radius: 0;
+  background-color: currentColor;
+  background-image: none;
+  mask-position: center;
+  mask-size: contain;
+  mask-repeat: no-repeat;
+  vertical-align: -.199em;
+  align-self: center;
+  color: inherit;
+}
+
+.icon-checkbox {
+  mask-image: var(--icon-checkbox);
+}
+
+.icon-chevron {
+  mask-image: var(--icon-chevron);
+}
+
+.icon-close {
+  mask-image: var(--icon-close);
+}
+
+.icon-date {
+  mask-image: var(--icon-date);
+}
+
+.icon-invalid {
+  mask-image: var(--icon-invalid);
+}
+
+.icon-loading {
+  mask-image: var(--icon-loading);
+}
+
+.icon-minus {
+  mask-image: var(--icon-minus);
+}
+
+.icon-search {
+  mask-image: var(--icon-search);
+}
+
+.icon-time {
+  mask-image: var(--icon-time);
+}
+
+.icon-valid {
+  mask-image: var(--icon-valid);
+}

package/src/components/modules.css

@@ -1,2 +1,5 @@
 @import "./_card.css";
+@import "./_card-list.css";
+@import "./_container.css";
+@import "./_icons.css";
 @import "./_sidebar.css";

package/src/index.css

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

package/src/semantics/attributes/_aria-disabled.css

@@ -0,0 +1,25 @@
+/* Buttons and button-like elements */
+:is(button, [type=submit], [type=button], [type=reset], [role=button])[aria-disabled=true],
+fieldset[aria-disabled=true] :is(button, [type=submit], [type=button], [type=reset], [role=button]) {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* Links */
+a[aria-disabled=true],
+[role=link][aria-disabled=true] {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* Form controls */
+:is(input:not([type=submit], [type=button], [type=reset]), select, textarea)[aria-disabled=true],
+fieldset[aria-disabled=true] :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
+  opacity: var(--input-opacity-disabled);
+  pointer-events: none;
+}
+
+/* Switch color adjustment */
+[type=checkbox][role=switch][aria-disabled=true] {
+  --color-background: var(--border-color);
+}

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

@@ -0,0 +1,125 @@
+[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) {
+      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

@@ -0,0 +1,122 @@
+[role="status"],
+[role="alert"] {
+  --color-background: light-dark(
+    color-mix(in srgb, var(--color-slate-50) 25%, white),
+    color-mix(in srgb, var(--color-slate-50), transparent 95%)
+  );
+  --border-color: var(--dialog-border);
+  --alert-size: var(--border-size);
+
+  color: var(--color-text);
+  padding: var(--spacing);
+  margin-bottom: var(--spacing);
+  border-radius: var(--radius);
+  border: var(--border-size) solid var(--border-color);
+  border-inline-start-width: var(--alert-size);
+  border-inline-start-color: var(--dialog-border);
+  background: var(--color-background);
+
+  &:is(.ghost, .subtle) {
+    --alert-size: calc(var(--border-size) * 4);
+  }
+
+  /* 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;
+
+  &[popover] {
+    display: none;
+    box-shadow: var(--shadow);
+    left: unset;
+    right: 0;
+    bottom: 0;
+    top: unset;
+    margin: var(--spacing);
+
+    &:popover-open {
+      display: flex;
+    }
+
+    &[data-placement="top-start"] {
+      left: 0;
+      right: unset;
+      top: 0;
+      bottom: unset;
+    }
+
+    &[data-placement="top-center"] {
+      right: 50%;
+      transform: translateX(50%);
+      top: 0;
+      bottom: unset;
+    }
+
+    &[data-placement="top-end"] {
+      right: 0;
+      top: 0;
+      bottom: unset;
+    }
+
+    &[data-placement="middle-start"] {
+      left: 0;
+      right: unset;
+      bottom: 50%;
+      transform: translateY(50%);
+    }
+
+    &[data-placement="middle-center"] {
+      right: 50%;
+      transform: translate(50%, 50%);
+      bottom: 50%;
+    }
+
+    &[data-placement="middle-end"] {
+      right: 0;
+      bottom: 50%;
+      transform: translateY(50%);
+    }
+
+    &[data-placement="bottom-start"] {
+      left: 0;
+      right: unset;
+      bottom: 0;
+    }
+
+    &[data-placement="bottom-center"] {
+      right: 50%;
+      transform: translateX(50%);
+      bottom: 0;
+    }
+
+    &[data-placement="bottom-end"] {
+      right: 0;
+      bottom: 0;
+    }
+  }
+}
+
+@starting-style {
+  :is([role="status"], [role="alert"]):popover-open {
+    opacity: 0;
+
+    &:not([data-placement]) {
+      right: -20px;
+    }
+
+    &[data-placement$="start"] {
+      left: -20px;
+    }
+
+    &[data-placement="top-center"] {
+      top: -20px;
+    }
+
+    &[data-placement="bottom-center"] {
+      bottom: -20px;
+    }
+
+    &[data-placement$="end"] {
+      right: -20px;
+    }
+  }
+}

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

@@ -4,7 +4,7 @@
   width: fit-content;
 }
 
-:not(a, button, input, [role=button])[aria-describedby] {
+:not(a, button, dialog, input, [role=button])[aria-describedby] {
   border-bottom: 1px dotted;
   text-decoration: none;
   cursor: help;

package/src/semantics/elements/_button.css

@@ -75,8 +75,7 @@ button:focus, button:is([aria-current]:not([aria-current=false])):focus,
 }
 
 [type=reset],
-[type=file]::file-selector-button,
-[aria-label="Close"] {
+[type=file]::file-selector-button {
   --color-background: var(--color-secondary-fill);
   --border-color: var(--color-secondary-fill);
   --color-text: var(--color-secondary-on-fill);
@@ -84,15 +83,13 @@ button:focus, button:is([aria-current]:not([aria-current=false])):focus,
 }
 
 [type=reset]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
-[type=file]::file-selector-button:is(:hover, :active, :focus),
-[aria-label="Close"]:is(:hover, :active, :focus) {
+[type=file]::file-selector-button:is(:hover, :active, :focus) {
   --color-background: var(--color-secondary-fill-hover);
   --border-color: var(--color-secondary-fill-hover);
   --color-text: var(--color-secondary-on-fill);
 }
 
 [type=reset]:focus,
-[aria-label="Close"]:focus,
 [type=reset]:is([aria-current]:not([aria-current=false])):focus,
 [type=file]::file-selector-button:focus {
   --shadow: var(--button-shadow-hover, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-size) var(--color-secondary-focus-ring);

package/src/semantics/elements/_dialog.css

@@ -19,7 +19,7 @@ dialog {
   border-radius: var(--radius);
   background: var(--dialog-fill);
   box-shadow: var(--dialog-shadow);
-  border: 0;
+  border: var(--border-size) solid var(--border-color);
 
   /* Opening animation using @starting-style (Chrome 117+, Firefox 129+, Safari 17.4+) */
   /* Gracefully degrades to instant appearance in unsupported browsers */
@@ -52,6 +52,9 @@ dialog {
     margin-inline: calc(var(--spacing) * -1);
     padding-inline: var(--spacing);
     background-color: var(--dialog-section-fill);
+    display: flex;
+    gap: calc(var(--nav-link-gap) * 1.5);
+    align-items: center;
   }
 
   /* Header styling */
@@ -60,6 +63,7 @@ dialog {
     border-bottom: var(--border-size) solid var(--dialog-section-border);
     border-top-right-radius: var(--radius);
     border-top-left-radius: var(--radius);
+    justify-content: space-between;
   }
 
   /* Footer styling */
@@ -68,35 +72,11 @@ dialog {
     border-top: var(--border-size) solid var(--dialog-section-border);
     border-bottom-right-radius: var(--radius);
     border-bottom-left-radius: var(--radius);
-    display: flex;
     justify-content: end;
-    gap: calc(var(--nav-link-gap) * 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;
-    }
+  > :last-child:is(hgroup, h1, h2, h3, h4, h5, h6) {
+    margin-bottom: 0;
   }
 }
 

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

@@ -1,7 +1,10 @@
 @import "./attributes/_aria-busy.css";
+@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";
 

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;
 }