@letsprogram/ng-oat 0.1.6 → 0.1.8

package/assets/oat/css/grid.css

@@ -22,28 +22,83 @@
   }
 
   /* Column spans using CSS custom property */
-  .col, [class*="col-"] { grid-column-end: span var(--span, var(--grid-cols)); }
-  
-  .col-1  { --span: 1; }
-  .col-2  { --span: 2; }
-  .col-3  { --span: 3; }
-  .col-4  { --span: 4; }
-  .col-5  { --span: 5; }
-  .col-6  { --span: 6; }
-  .col-7  { --span: 7; }
-  .col-8  { --span: 8; }
-  .col-9  { --span: 9; }
-  .col-10 { --span: 10; }
-  .col-11 { --span: 11; }
-  .col-12 { --span: 12; }
+  .col,
+  [class*="col-"] {
+    grid-column-end: span var(--span, var(--grid-cols));
+  }
+
+  .col-1 {
+    --span: 1;
+  }
+
+  .col-2 {
+    --span: 2;
+  }
+
+  .col-3 {
+    --span: 3;
+  }
+
+  .col-4 {
+    --span: 4;
+  }
+
+  .col-5 {
+    --span: 5;
+  }
+
+  .col-6 {
+    --span: 6;
+  }
+
+  .col-7 {
+    --span: 7;
+  }
+
+  .col-8 {
+    --span: 8;
+  }
+
+  .col-9 {
+    --span: 9;
+  }
+
+  .col-10 {
+    --span: 10;
+  }
+
+  .col-11 {
+    --span: 11;
+  }
+
+  .col-12 {
+    --span: 12;
+  }
 
   /* Offsets via grid-column-start */
-  .offset-1  { grid-column-start: 2; }
-  .offset-2  { grid-column-start: 3; }
-  .offset-3  { grid-column-start: 4; }
-  .offset-4  { grid-column-start: 5; }
-  .offset-5  { grid-column-start: 6; }
-  .offset-6  { grid-column-start: 7; }
+  .offset-1 {
+    grid-column-start: 2;
+  }
+
+  .offset-2 {
+    grid-column-start: 3;
+  }
+
+  .offset-3 {
+    grid-column-start: 4;
+  }
+
+  .offset-4 {
+    grid-column-start: 5;
+  }
+
+  .offset-5 {
+    grid-column-start: 6;
+  }
+
+  .offset-6 {
+    grid-column-start: 7;
+  }
 
   .col-end {
     grid-column-start: span var(--span, 1);
@@ -68,29 +123,65 @@
     grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
   }
 
-  /* Container-query breakpoints for .grid children */
-  @container (min-width: 640px) {
-    .grid { grid-template-columns: repeat(2, 1fr); }
+  /*
+   * .grid template-columns use @media (viewport-based) because a container
+   * element cannot query its own size — @container here would query the
+   * *parent* container, not .grid itself, leading to mismatched breakpoints
+   * when a sidebar or other layout shrinks the content area below 1024px.
+   */
+  @media (min-width: 640px) {
+    .grid {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .grid {
+      grid-template-columns: repeat(var(--grid-cols, 12), 1fr);
+    }
   }
-  @container (min-width: 1024px) {
-    .grid { grid-template-columns: repeat(var(--grid-cols, 12), 1fr); }
-    .grid > * { grid-column: span var(--span, 1); }
+
+  /* Children's column span responds to the .grid container's own width */
+  @container (min-width: 640px) {
+    .grid>* {
+      grid-column: span var(--span, 1);
+    }
   }
 
   /* Allow explicit column count override on .grid: .grid.cols-2, .grid.cols-3, etc. */
-  .grid.cols-2 { --grid-cols: 2; }
-  .grid.cols-3 { --grid-cols: 3; }
-  .grid.cols-4 { --grid-cols: 4; }
+  .grid.cols-2 {
+    --grid-cols: 2;
+  }
 
-  @container (min-width: 640px) {
-    .grid.cols-2, .grid.cols-3, .grid.cols-4 {
+  .grid.cols-3 {
+    --grid-cols: 3;
+  }
+
+  .grid.cols-4 {
+    --grid-cols: 4;
+  }
+
+  @media (min-width: 640px) {
+
+    .grid.cols-2,
+    .grid.cols-3,
+    .grid.cols-4 {
       grid-template-columns: repeat(2, 1fr);
     }
   }
-  @container (min-width: 1024px) {
-    .grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
-    .grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
-    .grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
+
+  @media (min-width: 1024px) {
+    .grid.cols-2 {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    .grid.cols-3 {
+      grid-template-columns: repeat(3, 1fr);
+    }
+
+    .grid.cols-4 {
+      grid-template-columns: repeat(4, 1fr);
+    }
   }
 
   /* ── Responsive .row breakpoints (media queries) ───────────────────────── */
@@ -100,9 +191,12 @@
       --grid-cols: 1;
       --grid-gap: 1rem;
     }
-    .col, [class*="col-"] {
+
+    .col,
+    [class*="col-"] {
       --span: 1;
     }
+
     [class*="offset-"] {
       grid-column-start: auto;
     }
@@ -114,9 +208,12 @@
       --grid-cols: 4;
       --grid-gap: 1rem;
     }
-    .col, [class*="col-"] {
+
+    .col,
+    [class*="col-"] {
       --span: 4;
     }
+
     [class*="offset-"] {
       grid-column-start: auto;
     }
@@ -125,65 +222,205 @@
   /* ── Responsive column classes (media queries for power users) ─────────── */
   /* sm: 640px+ */
   @media (min-width: 640px) {
-    .sm\:col-1  { --span: 1; }
-    .sm\:col-2  { --span: 2; }
-    .sm\:col-3  { --span: 3; }
-    .sm\:col-4  { --span: 4; }
-    .sm\:col-5  { --span: 5; }
-    .sm\:col-6  { --span: 6; }
-    .sm\:col-7  { --span: 7; }
-    .sm\:col-8  { --span: 8; }
-    .sm\:col-9  { --span: 9; }
-    .sm\:col-10 { --span: 10; }
-    .sm\:col-11 { --span: 11; }
-    .sm\:col-12 { --span: 12; }
+    .sm\:col-1 {
+      --span: 1;
+    }
+
+    .sm\:col-2 {
+      --span: 2;
+    }
+
+    .sm\:col-3 {
+      --span: 3;
+    }
+
+    .sm\:col-4 {
+      --span: 4;
+    }
+
+    .sm\:col-5 {
+      --span: 5;
+    }
+
+    .sm\:col-6 {
+      --span: 6;
+    }
+
+    .sm\:col-7 {
+      --span: 7;
+    }
+
+    .sm\:col-8 {
+      --span: 8;
+    }
+
+    .sm\:col-9 {
+      --span: 9;
+    }
+
+    .sm\:col-10 {
+      --span: 10;
+    }
+
+    .sm\:col-11 {
+      --span: 11;
+    }
+
+    .sm\:col-12 {
+      --span: 12;
+    }
   }
 
   /* md: 768px+ */
   @media (min-width: 768px) {
-    .md\:col-1  { --span: 1; }
-    .md\:col-2  { --span: 2; }
-    .md\:col-3  { --span: 3; }
-    .md\:col-4  { --span: 4; }
-    .md\:col-5  { --span: 5; }
-    .md\:col-6  { --span: 6; }
-    .md\:col-7  { --span: 7; }
-    .md\:col-8  { --span: 8; }
-    .md\:col-9  { --span: 9; }
-    .md\:col-10 { --span: 10; }
-    .md\:col-11 { --span: 11; }
-    .md\:col-12 { --span: 12; }
+    .md\:col-1 {
+      --span: 1;
+    }
+
+    .md\:col-2 {
+      --span: 2;
+    }
+
+    .md\:col-3 {
+      --span: 3;
+    }
+
+    .md\:col-4 {
+      --span: 4;
+    }
+
+    .md\:col-5 {
+      --span: 5;
+    }
+
+    .md\:col-6 {
+      --span: 6;
+    }
+
+    .md\:col-7 {
+      --span: 7;
+    }
+
+    .md\:col-8 {
+      --span: 8;
+    }
+
+    .md\:col-9 {
+      --span: 9;
+    }
+
+    .md\:col-10 {
+      --span: 10;
+    }
+
+    .md\:col-11 {
+      --span: 11;
+    }
+
+    .md\:col-12 {
+      --span: 12;
+    }
   }
 
   /* lg: 1024px+ */
   @media (min-width: 1024px) {
-    .lg\:col-1  { --span: 1; }
-    .lg\:col-2  { --span: 2; }
-    .lg\:col-3  { --span: 3; }
-    .lg\:col-4  { --span: 4; }
-    .lg\:col-5  { --span: 5; }
-    .lg\:col-6  { --span: 6; }
-    .lg\:col-7  { --span: 7; }
-    .lg\:col-8  { --span: 8; }
-    .lg\:col-9  { --span: 9; }
-    .lg\:col-10 { --span: 10; }
-    .lg\:col-11 { --span: 11; }
-    .lg\:col-12 { --span: 12; }
+    .lg\:col-1 {
+      --span: 1;
+    }
+
+    .lg\:col-2 {
+      --span: 2;
+    }
+
+    .lg\:col-3 {
+      --span: 3;
+    }
+
+    .lg\:col-4 {
+      --span: 4;
+    }
+
+    .lg\:col-5 {
+      --span: 5;
+    }
+
+    .lg\:col-6 {
+      --span: 6;
+    }
+
+    .lg\:col-7 {
+      --span: 7;
+    }
+
+    .lg\:col-8 {
+      --span: 8;
+    }
+
+    .lg\:col-9 {
+      --span: 9;
+    }
+
+    .lg\:col-10 {
+      --span: 10;
+    }
+
+    .lg\:col-11 {
+      --span: 11;
+    }
+
+    .lg\:col-12 {
+      --span: 12;
+    }
   }
 
   /* xl: 1280px+ */
   @media (min-width: 1280px) {
-    .xl\:col-1  { --span: 1; }
-    .xl\:col-2  { --span: 2; }
-    .xl\:col-3  { --span: 3; }
-    .xl\:col-4  { --span: 4; }
-    .xl\:col-5  { --span: 5; }
-    .xl\:col-6  { --span: 6; }
-    .xl\:col-7  { --span: 7; }
-    .xl\:col-8  { --span: 8; }
-    .xl\:col-9  { --span: 9; }
-    .xl\:col-10 { --span: 10; }
-    .xl\:col-11 { --span: 11; }
-    .xl\:col-12 { --span: 12; }
-  }
-}
+    .xl\:col-1 {
+      --span: 1;
+    }
+
+    .xl\:col-2 {
+      --span: 2;
+    }
+
+    .xl\:col-3 {
+      --span: 3;
+    }
+
+    .xl\:col-4 {
+      --span: 4;
+    }
+
+    .xl\:col-5 {
+      --span: 5;
+    }
+
+    .xl\:col-6 {
+      --span: 6;
+    }
+
+    .xl\:col-7 {
+      --span: 7;
+    }
+
+    .xl\:col-8 {
+      --span: 8;
+    }
+
+    .xl\:col-9 {
+      --span: 9;
+    }
+
+    .xl\:col-10 {
+      --span: 10;
+    }
+
+    .xl\:col-11 {
+      --span: 11;
+    }
+
+    .xl\:col-12 {
+      --span: 12;
+    }
+  }
+}

package/assets/oat/css/sidebar.css

@@ -7,19 +7,19 @@
     min-height: 100dvh;
     gap: var(--space-4);
 
-    > main {
+    >main {
       min-width: 0;
     }
 
     &:has(nav[data-topnav]) {
       --topnav-offset: var(--space-12);
 
-      > main [id] {
+      >main [id] {
         scroll-margin-block-start: calc(var(--space-12) + var(--space-6));
       }
     }
 
-    > aside[data-sidebar] {
+    >aside[data-sidebar] {
       position: sticky;
       top: var(--topnav-offset);
       z-index: 1;
@@ -36,11 +36,11 @@
         padding: var(--space-3);
       }
 
-      > footer {
+      >footer {
         margin-block-start: auto;
       }
 
-      > nav {
+      >nav {
         flex: 1;
         min-height: 0;
         overflow-y: auto;
@@ -78,9 +78,18 @@
           border: none;
           overflow: visible;
 
-          & + details { margin-top: 0; }
-          &[open] summary { border-bottom: none; }
-          > ul { margin-inline-start: var(--space-4); padding: var(--space-1) 0; }
+          &+details {
+            margin-top: 0;
+          }
+
+          &[open] summary {
+            border-bottom: none;
+          }
+
+          >ul {
+            margin-inline-start: var(--space-4);
+            padding: var(--space-1) 0;
+          }
         }
 
         summary {
@@ -110,13 +119,13 @@
     background-color: var(--background);
     border-bottom: 1px solid var(--border);
     box-shadow: var(--shadow-small);
-    
+
     a {
       text-decoration: none;
     }
   }
 
-  nav[data-topnav] ~ main {
+  nav[data-topnav]~main {
     margin-block-start: var(--space-12);
   }
 
@@ -139,7 +148,7 @@
         display: inline-block;
       }
 
-      > aside[data-sidebar] {
+      >aside[data-sidebar] {
         transform: translateX(0);
         opacity: 1;
         transition: transform var(--transition), opacity var(--transition), visibility var(--transition);
@@ -149,7 +158,7 @@
         grid-template-columns: 0px 1fr;
         gap: 0;
 
-        > aside[data-sidebar] {
+        >aside[data-sidebar] {
           overflow: hidden;
           min-width: 0;
           transform: translateX(-100%);
@@ -165,7 +174,7 @@
     [data-sidebar-layout] {
       grid-template-columns: 1fr;
 
-      > aside[data-sidebar] {
+      >aside[data-sidebar] {
         position: fixed;
         left: 0;
         width: min(16rem, 80vw);
@@ -174,11 +183,14 @@
         box-shadow: var(--shadow-large);
       }
 
-      &[data-sidebar-open] > aside[data-sidebar] {
+      &[data-sidebar-open]>aside[data-sidebar] {
         transform: translateX(0);
       }
     }
-    [data-sidebar-toggle] { display: inline-block; }
+
+    [data-sidebar-toggle] {
+      display: inline-block;
+    }
 
     [data-sidebar-header] {
       display: flex;
@@ -188,4 +200,4 @@
       border-bottom: 1px solid var(--border);
     }
   }
-}
+}