@semanticus/semanticus-css 3.1.0 → 3.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@semanticus/semanticus-css",
-  "version": "3.1.0",
+  "version": "3.1.3",
   "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",

package/src/components/_content-grid.css

@@ -1,4 +1,4 @@
-/*!
+/*
  * Content Grid
  *
  * A CSS Grid layout pattern that eliminates the need for container/wrapper divs.

package/src/components/_sidebar.css

@@ -1,26 +1,30 @@
-aside.sidebar {
+/* Preventing scrollbars on the page while the sidebar is open */
+body:has(.sidebar:popover-open) {
+  overflow-x: hidden;
+}
+
+.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;
+  top: 0; /* for position sticky to take effect */
 
   &:popover-open {
     margin: 0;
     display: flex !important;
     width: 100%;
     box-shadow: var(--menu-box-shadow);
-    background-color: var(--background-color);
     left: 0;
     bottom: 0;
+    opacity: 1;
+    transform: translateX(0);
+    transition:
+      opacity 0.3s,
+      transform 0.3s,
+      display 0.3s allow-discrete;
 
     &[data-placement="right"] {
       left: unset;
@@ -38,7 +42,7 @@ aside.sidebar {
 }
 
 @starting-style {
-  aside.sidebar:popover-open {
+  .sidebar:popover-open {
     opacity: 0;
     transform: translateX(-20px);
 
@@ -47,8 +51,9 @@ aside.sidebar {
     }
   }
 
-  aside.sidebar:popover-open::backdrop {
+  .sidebar:popover-open::backdrop {
     backdrop-filter: none;
     background-color: transparent;
   }
 }
+

package/src/index.css

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

package/src/semantics/elements/_details.css

@@ -3,7 +3,6 @@ summary {
 }
 
 details {
-  --_details-summary-background-color: var(--details-summary-background-color);
   --_details-summary-color: var(--details-summary-color);
   --_details-summary-color-focus: var(--primary-color-hover);
   --_details-summary-color-open: var(--details-summary-color-open);
@@ -16,14 +15,14 @@ details {
     list-style-type: none;
     cursor: pointer;
     transition: color var(--transition);
-
     color: var(--_details-summary-color);
-    background-color: var(--_details-summary-background-color);
 
     &:not([role]) {
-      &:focus {
+      &:is(:active, :focus) {
         --_details-summary-color: var(--_details-summary-color-focus);
+      }
 
+      &:focus-visible {
         outline: var(--outline-width) solid
           var(--_details-summary-outline-color);
         box-shadow: 0 0 0 var(--focus-ring-width)
@@ -99,14 +98,13 @@ details:has(> summary[aria-haspopup="menu"]) {
   position: relative;
 
   > summary[aria-haspopup="menu"] {
+    --_details-dropdown-background-color: var(
+      --details-dropdown-background-color
+    );
     --_details-dropdown-color: var(--details-dropdown-color);
     --_details-dropdown-border-color: var(--details-dropdown-border-color);
-    --_details-dropdown-padding-block: var(
-      --details-dropdown-padding-block
-    );
-    --_details-dropdown-padding-inline: var(
-      --details-dropdown-padding-inline
-    );
+    --_details-dropdown-padding-block: var(--details-dropdown-padding-block);
+    --_details-dropdown-padding-inline: var(--details-dropdown-padding-inline);
     --_details-summary-color: var(--_details-dropdown-color);
 
     &::after {
@@ -117,6 +115,7 @@ details:has(> summary[aria-haspopup="menu"]) {
     }
 
     &:not([role]) {
+      background-color: var(--_details-dropdown-background-color);
       border: var(--border-width) solid var(--_details-dropdown-border-color);
       border-radius: var(--border-radius);
       padding: var(--_details-dropdown-padding-block)
@@ -124,8 +123,8 @@ details:has(> summary[aria-haspopup="menu"]) {
       display: flex;
       align-items: center;
       height: calc(
-        1rem * var(--line-height) + var(--_details-dropdown-padding-block) *
-          2 + var(--border-width) * 2
+        1rem * var(--line-height) + var(--_details-dropdown-padding-block) * 2 +
+          var(--border-width) * 2
       );
       line-height: inherit;
       cursor: pointer;
@@ -135,6 +134,15 @@ details:has(> summary[aria-haspopup="menu"]) {
         border-color var(--transition),
         color var(--transition);
 
+      &:is(:active, :focus) {
+        --_details-summary-color: var(--details-summary-color);
+
+        outline: var(--outline-width) solid
+          var(--_details-summary-outline-color);
+        box-shadow: 0 0 0 var(--focus-ring-width)
+          var(--_details-summary-outline-color);
+      }
+
       &[aria-invalid="false"] {
         --_details-dropdown-border-color: var(--success-background-color);
         --_details-summary-outline-color: var(--success-outline-color);

package/src/variables/_theme.css

@@ -245,12 +245,12 @@
 
   /* --- Details --- */
   /* Affects accordions and dropdowns */
-  --details-summary-background-color: var(--inputs-background-color);
   --details-summary-color: var(--color);
   --details-summary-color-open: var(--color-muted);
 
   /* --- Dropdown styling applied to the summary element --- */
   --details-dropdown-color: var(--inputs-placeholder-color);
+  --details-dropdown-background-color: var(--inputs-background-color);
   --details-dropdown-border-color: var(--inputs-border-color);
   --details-dropdown-padding-block: var(--inputs-padding-block);
   --details-dropdown-padding-inline: var(--inputs-padding-inline);