@letsprogram/ng-oat 0.1.4 → 0.1.6

package/assets/oat/css/00-base.css

@@ -28,6 +28,10 @@
     -webkit-font-smoothing: antialiased;
   }
 
+  main {
+    padding-block-start: var(--space-8);
+  }
+
   img, picture, video, canvas, svg {
     max-width: 100%;
   }
@@ -38,7 +42,9 @@
 
   h1, h2, h3, h4, h5, h6 {
     font-weight: var(--font-semibold);
-    line-height: 1.25;
+    line-height: var(--leading-tight);
+    text-wrap: balance;
+    letter-spacing: var(--tracking-tight);
 
     &:first-child {
       margin-block-start: 0;
@@ -76,6 +82,9 @@
   }
 
   p {
+    font-size: var(--text-regular);
+    line-height: var(--leading-normal);
+    text-wrap: pretty;
     margin-block-end: var(--space-4);
 
     &:last-child {
@@ -179,4 +188,94 @@
     opacity: 0.5;
     cursor: not-allowed;
   }
+
+  /* ── Prose — long-form rich-text content ───────────────────────────── */
+  .prose {
+    --prose-body: var(--foreground);
+    --prose-heading: var(--foreground);
+    --prose-muted: var(--muted-foreground);
+    --prose-link: var(--primary);
+
+    font-size: var(--text-regular);
+    line-height: var(--leading-relaxed);
+    color: var(--prose-body);
+    max-width: 65ch;
+
+    > * + * {
+      margin-block-start: var(--space-5);
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+      color: var(--prose-heading);
+      letter-spacing: var(--tracking-tight);
+    }
+
+    h1 { margin-block-start: 0; }
+    h2 { margin-block-start: var(--space-10); }
+    h3 { margin-block-start: var(--space-8); }
+    h4, h5, h6 { margin-block-start: var(--space-6); }
+
+    a {
+      color: var(--prose-link);
+      text-decoration-color: rgb(from var(--prose-link) r g b / 0.4);
+      text-underline-offset: 3px;
+      transition: text-decoration-color var(--transition-fast);
+
+      &:hover {
+        text-decoration-color: currentColor;
+      }
+    }
+
+    p {
+      text-wrap: pretty;
+    }
+
+    :is(ul, ol) {
+      padding-inline-start: var(--space-6);
+    }
+
+    li {
+      margin-block-end: var(--space-2);
+    }
+
+    blockquote {
+      border-inline-start: 3px solid var(--border);
+      padding-inline-start: var(--space-5);
+      color: var(--prose-muted);
+      font-style: italic;
+    }
+
+    img, video {
+      border-radius: var(--radius-medium);
+    }
+
+    code {
+      font-size: 0.875em;
+    }
+
+    pre {
+      font-size: var(--text-7);
+      line-height: var(--leading-relaxed);
+    }
+
+    hr {
+      margin-block: var(--space-8);
+    }
+
+    table {
+      font-size: var(--text-7);
+    }
+
+    figcaption {
+      text-align: center;
+      font-size: var(--text-7);
+      color: var(--prose-muted);
+      margin-block-start: var(--space-2);
+    }
+  }
+
+  /* Prose width variants */
+  .prose-sm { max-width: 45ch; font-size: var(--text-7); }
+  .prose-lg { max-width: 75ch; }
+  .prose-full { max-width: none; }
 }

package/assets/oat/css/01-theme.css

@@ -25,46 +25,70 @@
     --input: light-dark(#d4d4d8, #52525b);
     --ring: light-dark(#574747, #d4d4d8);
 
-    /* ==================== */
+    /* ── Breakpoints ──────────────────────────────────────────────────────── */
+    --breakpoint-sm: 640px;
+    --breakpoint-md: 768px;
+    --breakpoint-lg: 1024px;
+    --breakpoint-xl: 1280px;
+
+    /* ── Spacing (fluid) ─────────────────────────────────────────────────── */
     --space-1: 0.25rem;
     --space-2: 0.5rem;
-    --space-3: 0.75rem;
-    --space-4: 1rem;
-    --space-5: 1.25rem;
-    --space-6: 1.5rem;
-    --space-8: 2rem;
-    --space-10: 2.5rem;
+    --space-3:  clamp(0.5rem,  1.5vw, 0.75rem);
+    --space-4:  clamp(0.5rem,  2vw,   1rem);
+    --space-5:  clamp(0.75rem, 2.5vw, 1.25rem);
+    --space-6:  clamp(0.75rem, 3vw,   1.5rem);
+    --space-8:  clamp(1rem,    4vw,   2rem);
+    --space-10: clamp(1.5rem,  5vw,   2.5rem);
     --space-12: 3rem;
     --space-14: 3.5rem;
     --space-16: 4rem;
     --space-18: 4.5rem;
 
+    /* ── Border radius (fluid) ───────────────────────────────────────────── */
     --radius-small: 0.125rem;
-    --radius-medium: 0.375rem;
-    --radius-large: 0.75rem;
+    --radius-medium: clamp(0.25rem, 0.8vw, 0.375rem);
+    --radius-large:  clamp(0.5rem,  1.5vw, 0.75rem);
     --radius-full: 9999px;
 
     --bar-height: 0.5rem;
 
+    /* ── Fonts ────────────────────────────────────────────────────────────── */
     --font-sans: system-ui, sans-serif;
     --font-mono: ui-monospace, Consolas, monospace;
 
+    /* ── Typography (fluid clamp) ────────────────────────────────────────── */
     --text-1: clamp(1.75rem, 1.5rem + 1.1vw, 2.25rem);
     --text-2: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
     --text-3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
     --text-4: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
-    --text-5: 1.125rem;
+    --text-5: clamp(1rem, 1rem + 0.3vw, 1.125rem);
     --text-6: 1rem;
-    --text-7: 0.875rem;
-    --text-8: 0.75rem;
-    --text-regular: var(--text-6);
+    --text-7: clamp(0.8125rem, 0.8rem + 0.2vw, 0.875rem);
+    --text-8: clamp(0.6875rem, 0.65rem + 0.2vw, 0.75rem);
+    --text-regular: clamp(1rem, 1rem + 0.15vw, 1.125rem);
+
+    /* ── Line-height ─────────────────────────────────────────────────────── */
+    --leading-none: 1;
+    --leading-tight: 1.25;
+    --leading-snug: 1.375;
+    --leading-normal: clamp(1.5, 1.45 + 0.3vw, 1.6);
+    --leading-relaxed: 1.625;
+    --leading-loose: 2;
 
-    --leading-normal: 1.5;
+    /* ── Letter-spacing ──────────────────────────────────────────────────── */
+    --tracking-tighter: -0.05em;
+    --tracking-tight: -0.025em;
+    --tracking-normal: 0em;
+    --tracking-wide: 0.025em;
+    --tracking-wider: 0.05em;
+    --tracking-widest: 0.1em;
 
+    /* ── Font weight ─────────────────────────────────────────────────────── */
     --font-normal: 400;
     --font-medium: 500;
     --font-semibold: 600;
-    --font-bold: 600;
+    --font-bold: 700;
 
     --shadow-small: 0 1px 2px 0 rgb(0 0 0 / 0.05);
     --shadow-medium: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);

package/assets/oat/css/accordion.css

@@ -57,6 +57,6 @@
   }
 
   details > *:not(summary) {
-    margin: var(--space-4);
+    margin: clamp(var(--space-2), 3vw, var(--space-4));
   }
 }

package/assets/oat/css/alert.css

@@ -3,7 +3,7 @@
     position: relative;
     display: flex;
     gap: var(--space-3);
-    padding: var(--space-4) var(--space-6);
+    padding: var(--space-4) clamp(var(--space-3), 3vw, var(--space-6));
     background-color: var(--background);
     border: 1px solid var(--border);
     border-radius: var(--radius-medium);

package/assets/oat/css/card.css

@@ -8,4 +8,40 @@
     padding: var(--space-6);
     overflow: hidden;
   }
+
+  .card-header {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    margin-block-end: var(--space-4);
+  }
+
+  .card-title {
+    font-size: var(--text-4);
+    font-weight: var(--font-semibold);
+    line-height: var(--leading-tight);
+    letter-spacing: var(--tracking-tight);
+    margin: 0;
+  }
+
+  .card-description {
+    font-size: var(--text-7);
+    color: var(--muted-foreground);
+    line-height: var(--leading-normal);
+    margin: 0;
+  }
+
+  .card-content {
+    font-size: var(--text-regular);
+    line-height: var(--leading-normal);
+  }
+
+  .card-footer {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    margin-block-start: var(--space-4);
+    padding-block-start: var(--space-4);
+    border-top: 1px solid var(--border);
+  }
 }

package/assets/oat/css/chips.css

@@ -89,7 +89,8 @@
   /* Sizes */
   .chip-sm {
     padding: 0 var(--space-2);
-    font-size: calc(var(--text-8) - 1px);
+    font-size: var(--text-8);
+    line-height: var(--leading-tight);
   }
 
   .chip-lg {

package/assets/oat/css/dropdown.css

@@ -5,6 +5,7 @@
       margin: 0;
       /* padding: var(--space-1); */
       min-width: 12rem;
+      max-width: min(20rem, calc(100vw - var(--space-8)));
       background-color: var(--background);
       border: 1px solid var(--border);
       border-radius: var(--radius-medium);

package/assets/oat/css/file-upload.css

@@ -35,7 +35,9 @@
   }
 
   .file-upload-text {
+    font-size: var(--text-regular);
     font-weight: var(--font-medium);
+    line-height: var(--leading-normal);
   }
 
   .file-upload-hint {

package/assets/oat/css/grid.css

@@ -3,7 +3,7 @@
     --grid-cols: 12;
     --grid-gap: 1.5rem;
     --container-max: 1280px;
-    --container-pad: 1rem;
+    --container-pad: clamp(0.75rem, 4vw, 2rem);
   }
 
   .container {
@@ -13,6 +13,7 @@
     padding-inline: var(--container-pad);
   }
 
+  /* ── Classic .row grid (12-column) ─────────────────────────────────────── */
   .row {
     display: grid;
     grid-template-columns: repeat(var(--grid-cols), 1fr);
@@ -22,7 +23,7 @@
 
   /* 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; }
@@ -49,15 +50,66 @@
     grid-column-end: -1;
   }
 
-  /* ─── Responsive breakpoints ────────────────────────────────────────
-   *  sm:  ≥ 640px   (large phones / landscape)
-   *  md:  ≥ 768px   (tablets)
-   *  lg:  ≥ 1024px  (desktops)
-   *  xl:  ≥ 1280px  (wide screens)
-   * ────────────────────────────────────────────────────────────────── */
+  /* ── .grid — container-query auto-responsive grid ──────────────────────── */
+  .grid {
+    container-type: inline-size;
+    display: grid;
+    gap: var(--grid-gap);
+    width: 100%;
+    grid-template-columns: 1fr;
+  }
+
+  /* Fluid auto-fit variant: equal-width columns that wrap automatically */
+  .grid-auto {
+    container-type: inline-size;
+    display: grid;
+    gap: var(--grid-gap);
+    width: 100%;
+    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); }
+  }
+  @container (min-width: 1024px) {
+    .grid { grid-template-columns: repeat(var(--grid-cols, 12), 1fr); }
+    .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; }
+
+  @container (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); }
+  }
 
-  /* Mobile-first: all columns stack full-width by default */
+  /* ── Responsive .row breakpoints (media queries) ───────────────────────── */
+  /* Mobile: stack to single column */
   @media (max-width: 639px) {
+    .row {
+      --grid-cols: 1;
+      --grid-gap: 1rem;
+    }
+    .col, [class*="col-"] {
+      --span: 1;
+    }
+    [class*="offset-"] {
+      grid-column-start: auto;
+    }
+  }
+
+  /* Small: 2-column grid */
+  @media (min-width: 640px) and (max-width: 767px) {
     .row {
       --grid-cols: 4;
       --grid-gap: 1rem;
@@ -70,76 +122,68 @@
     }
   }
 
-  /* sm: ≥ 640px */
+  /* ── 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; }
-  }
-
-  /* md: ≥ 768px */
+    .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; }
-  }
-
-  /* lg: ≥ 1024px */
+    .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; }
-  }
-
-  /* xl: ≥ 1280px */
+    .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; }
-  }
-
-  /* Responsive visibility helpers */
-  @media (max-width: 639px)  { .hide-sm { display: none !important; } }
-  @media (max-width: 767px)  { .hide-md { display: none !important; } }
-  @media (max-width: 1023px) { .hide-lg { display: none !important; } }
-
-  @media (min-width: 640px)  { .show-sm-only { display: none !important; } }
-  @media (min-width: 768px)  { .show-md-only { display: none !important; } }
-  @media (min-width: 1024px) { .show-lg-only { display: none !important; } }
+    .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,6 +7,10 @@
     min-height: 100dvh;
     gap: var(--space-4);
 
+    > main {
+      min-width: 0;
+    }
+
     &:has(nav[data-topnav]) {
       --topnav-offset: var(--space-12);
 
@@ -15,12 +19,6 @@
       }
     }
 
-    > main {
-      min-width: 0;
-      margin-block-start: var(--topnav-offset);
-      padding-block-start: var(--space-8);
-    }
-
     > aside[data-sidebar] {
       position: sticky;
       top: var(--topnav-offset);
@@ -112,12 +110,16 @@
     background-color: var(--background);
     border-bottom: 1px solid var(--border);
     box-shadow: var(--shadow-small);
-
+    
     a {
       text-decoration: none;
     }
   }
 
+  nav[data-topnav] ~ main {
+    margin-block-start: var(--space-12);
+  }
+
   :is([data-sidebar-toggle], [data-sidebar-header]) {
     display: none;
   }
@@ -166,7 +168,7 @@
       > aside[data-sidebar] {
         position: fixed;
         left: 0;
-        width: 16rem;
+        width: min(16rem, 80vw);
         transform: translateX(-100%);
         transition: transform var(--transition);
         box-shadow: var(--shadow-large);

package/assets/oat/css/tabs.css

@@ -6,6 +6,14 @@
     padding: var(--space-1);
     background-color: var(--muted);
     border-radius: var(--radius-medium);
+    max-width: 100%;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
   }
 
   [role="tab"] {

package/assets/oat/css/toast.css

@@ -28,6 +28,18 @@
       inset: var(--space-4) var(--space-4) auto auto;
     }
 
+    /* Stack full-width on narrow screens */
+    @media (max-width: 639px) {
+      &[data-placement="top-left"],
+      &[data-placement="top-right"] {
+        inset: var(--space-4) var(--space-2) auto var(--space-2);
+      }
+      &[data-placement="bottom-left"],
+      &[data-placement="bottom-right"] {
+        inset: auto var(--space-2) var(--space-4) var(--space-2);
+      }
+    }
+
     &[data-placement="bottom-left"] {
       inset: auto auto var(--space-4) var(--space-4);
       flex-direction: column-reverse;
@@ -50,8 +62,8 @@
     --transition-in: calc(var(--transition) - 50ms);
 
     padding: var(--space-5) var(--space-4);
-    max-width: 28rem;
-    min-width: 20rem;
+    max-width: min(28rem, calc(100vw - var(--space-8)));
+    min-width: min(20rem, calc(100vw - var(--space-8)));
     pointer-events: auto;
     background-color: var(--card);
     border: 1px solid var(--border);
@@ -63,11 +75,15 @@
     line-height: 1;
 
     .toast-title {
-      font-weight: 600;
-      margin: 0 0 var(--space-3) 0;
+      font-weight: var(--font-semibold);
+      font-size: var(--text-7);
+      line-height: var(--leading-tight);
+      margin: 0 0 var(--space-2) 0;
     }
     .toast-message {
       color: var(--muted-foreground);
+      font-size: var(--text-7);
+      line-height: var(--leading-normal);
     }
 
     &[data-variant="success"] {