@letsprogram/ng-oat 0.1.2 → 0.1.3

package/README.md

@@ -31,9 +31,9 @@ npm install @letsprogram/ng-oat
 
 That's it — the Oat CSS framework ships as a bundled asset inside the package.
 
-### 2. Add CSS & JS to your project
+### 2. Add Oat CSS to your project
 
-Open `angular.json` and add the stylesheet, tokens, and script:
+Open `angular.json` and add the stylesheet and tokens:
 
 ```json
 {
@@ -46,9 +46,6 @@ Open `angular.json` and add the stylesheet, tokens, and script:
               "node_modules/@letsprogram/ng-oat/assets/oat/oat.css",
               "node_modules/@letsprogram/ng-oat/src/lib/tokens/tokens.css",
               "src/styles.css"
-            ],
-            "scripts": [
-              "node_modules/@letsprogram/ng-oat/assets/oat/oat.js"
             ]
           }
         }
@@ -62,7 +59,8 @@ Open `angular.json` and add the stylesheet, tokens, and script:
 |------|---------|
 | `oat.css` | Core Oat CSS framework (typography, colors, layout, all component styles) |
 | `tokens.css` | `--oat-*` design token aliases for runtime theming |
-| `oat.js` | Lightweight JS for dropdown, toast, sidebar, and tabs native behavior |
+
+> **No JavaScript required!** All interactive behavior (dropdowns, toasts, sidebars, tabs, tooltips) is handled natively by Angular components — no external JS file needed.
 
 > **Alternative:** You can also import the CSS in your `styles.css` instead:
 > ```css
@@ -73,7 +71,7 @@ Open `angular.json` and add the stylesheet, tokens, and script:
 
 ### 3. Configure the provider
 
-Add `provideNgOat()` to your application config. Since CSS and JS are already loaded via `angular.json`, the provider only sets up internal injection tokens — no runtime asset loading occurs by default.
+Add `provideNgOat()` to your application config. Since CSS is already loaded via `angular.json`, the provider only sets up internal injection tokens — no runtime asset loading occurs by default.
 
 ```typescript
 // src/app/app.config.ts

package/assets/oat/css/utilities.css

@@ -4,6 +4,7 @@
   .align-right { text-align: end; }
   .text-light { color: var(--muted-foreground); }
   .text-lighter { color: var(--faint-foreground); }
+  .text-center { text-align: center; }
 
   .flex { display: flex; }
   .flex-col { flex-direction: column; }
@@ -45,6 +46,9 @@
   .p-4 { padding: var(--space-4); }
 
   .w-100 { width: 100%; }
+  .w-50 { width: 50%; }
+  .w-25 { width: 25%; }
+  .w-75 { width: 75%; }
 
   :is(ul, ol, a).unstyled {
     list-style: none;

package/assets/oat/oat.min.css

@@ -1814,6 +1814,10 @@
     justify-content: flex-end
   }
 
+  .text-center {
+    text-align: center
+  }
+
   .hstack {
     display: flex;
     align-items: center;
@@ -1877,6 +1881,18 @@
     width: 100%
   }
 
+  .w-50 {
+    width: 50%
+  }
+
+  .w-75 {
+    width: 75%
+  }
+
+  .w-25 {
+    width: 25%
+  }
+
   :is(ul, ol, a).unstyled {
     list-style: none;
     text-decoration: none;