@ng-brutalism/ui 0.1.2 → 0.2.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ng-brutalism/ui",
-  "version": "0.1.2",
-  "description": "Neo-brutalist Angular UI library — brutalist Angular components with signals, zoneless, and Tailwind v4. Install: ng add @ng-brutalism/ui",
+  "version": "0.2.0",
+  "description": "Neo-brutalist Angular UI primitive library and composition system with directive APIs, signals, zoneless-friendly patterns, and Tailwind v4. Install: ng add @ng-brutalism/ui",
   "license": "MIT",
   "author": "Khang Tran <khangtrann8198@gmail.com>",
   "repository": {
@@ -24,9 +24,12 @@
     "angular",
     "angular-ui",
     "angular-components",
+    "angular-primitives",
+    "angular-composition",
     "angular-brutalism",
     "ui-library",
     "component-library",
+    "primitive-library",
     "design-system",
     "tailwindcss",
     "signals",

package/styles.css

@@ -24,6 +24,10 @@ body {
    utility regardless of specificity. */
 
 @layer base {
+  :where([data-nb-reset-margin]) {
+    margin: 0;
+  }
+
   :where([data-slot="dialog-title"]) {
     display: block;
     padding: 1.5rem 1.5rem 0.5rem;
@@ -32,10 +36,10 @@ body {
     line-height: 1;
   }
 
-  :where([data-nb-title])::after {
+  :where([data-nb-title][data-underline])::after {
     content: "";
     display: block;
-    width: var(--nb-title-wave-width, min(18rem, 100%));
+    width: var(--nb-title-wave-width, min(9rem, 100%));
     height: var(--nb-title-wave-height, 0.625rem);
     margin-top: var(--nb-title-wave-gap, 0);
     background-color: var(--nb-title-wave-color, #a78bfa);
@@ -45,6 +49,43 @@ body {
       center / 100% 100% no-repeat;
   }
 
+  /* Built-in accent underline for nbDisplay / nbText (underline="bar" | "wave").
+     Drawn as an ::after so it stays out of the accessibility tree. Shape, size,
+     gap and color are all token-driven public API. */
+  :where([data-nb-display][data-underline], [data-nb-text][data-underline]) {
+    /* Column flex so the underline sits beneath the text and stays left-aligned,
+       regardless of any inherited text-align or shrink-to-fit width. Align to
+       start so percentage underline widths are based on the text box instead of
+       a stretched flex parent. */
+    display: inline-flex;
+    flex-direction: column;
+    align-items: flex-start;
+    align-self: flex-start;
+  }
+
+  :where([data-nb-display][data-underline="bar"], [data-nb-text][data-underline="bar"])::after {
+    content: "";
+    display: block;
+    width: var(--nb-underline-width, 7rem);
+    height: var(--nb-underline-height, 0.375rem);
+    margin-top: var(--nb-underline-gap, 0.75rem);
+    border-radius: var(--nb-underline-radius, 9999px);
+    background-color: var(--nb-underline-color, var(--nb-pink));
+  }
+
+  :where([data-nb-display][data-underline="wave"], [data-nb-text][data-underline="wave"])::after {
+    content: "";
+    display: block;
+    width: var(--nb-underline-width, min(18rem, 100%));
+    height: var(--nb-underline-height, 0.625rem);
+    margin-top: var(--nb-underline-gap, 0.5rem);
+    background-color: var(--nb-underline-color, var(--nb-pink));
+    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 12' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,6 Q10,0 20,6 T40,6 T60,6 T80,6 T100,6 T120,6 T140,6 T160,6 T180,6 T200,6 T220,6' fill='none' stroke='black' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E")
+      center / 100% 100% no-repeat;
+    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 12' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,6 Q10,0 20,6 T40,6 T60,6 T80,6 T100,6 T120,6 T140,6 T160,6 T180,6 T200,6 T220,6' fill='none' stroke='black' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E")
+      center / 100% 100% no-repeat;
+  }
+
   :where([data-slot="dialog-description"]) {
     display: block;
     padding: 0 1.5rem 1rem;
@@ -140,6 +181,69 @@ body {
   }
 }
 
+@layer components {
+  :where([data-nb-title]) {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: flex-start;
+    align-self: flex-start;
+    max-width: 100%;
+    font-size: var(--nb-title-font-size, 1.75rem);
+    font-weight: var(--nb-title-font-weight, 900);
+    line-height: var(--nb-title-line-height, 1.05);
+  }
+
+  :where(.nb-radius) {
+    border-radius: var(--nb-radius-token, var(--_nb-radius-default));
+  }
+
+  :where(.nb-tone) {
+    background-color: var(
+      --_nb-tone-bg-token,
+      var(--_nb-tone-bg-default)
+    );
+    color: var(--_nb-tone-fg-token, var(--_nb-tone-fg-default));
+    border-color: var(
+      --_nb-tone-border-color-token,
+      var(--_nb-tone-border-color-default)
+    );
+  }
+
+  :where(.nb-shadow) {
+    box-shadow: var(--nb-shadow-token, var(--_nb-shadow-default));
+  }
+
+  :where(.nb-padding) {
+    padding: var(--nb-padding-token, var(--_nb-padding-default));
+  }
+
+  :where(.nb-gap) {
+    gap: var(--_nb-gap-resolved, var(--_nb-gap-default));
+  }
+
+  :where(.nb-border-width) {
+    border-width: var(
+      --nb-border-width-token,
+      var(--_nb-border-width-default)
+    );
+  }
+
+  :where(.nb-radius [data-nb-dialog]) {
+    border-radius: var(--nb-radius-token, var(--_nb-radius-default));
+  }
+
+  :where(.nb-shadow [data-nb-dialog]) {
+    box-shadow: var(--nb-shadow-token, var(--_nb-shadow-default));
+  }
+
+  :where(.nb-border-width [data-nb-dialog]) {
+    border-width: var(
+      --nb-border-width-token,
+      var(--_nb-border-width-default)
+    );
+  }
+}
+
 /* Focus visible utility class */
 .nb-focus-visible:focus-visible {
   outline: var(--nb-focus-ring);

package/theme.css

@@ -11,6 +11,12 @@
   --nb-surface-foreground: #000000;
   --nb-secondary-background: oklch(96% 0 0);
   --nb-field-bg: #faf3d6;
+  --nb-yellow: #ffd24a;
+  --nb-pink: #ff7eb6;
+  --nb-mint: #9bf2cf;
+  --nb-lavender: #b8a4ff;
+  --nb-blue: #8ae9ff;
+  --nb-cream: #faf6f0;
 
   --nb-primary: #ff90e8;
   --nb-primary-foreground: #000000;
@@ -41,6 +47,11 @@
   /* Typography */
   --nb-font-sans: system-ui, sans-serif;
   --nb-font-mono: monospace;
+  /* Font roles — resolved by nbTypography / nbSurface[typography]. Override any
+     role to retheme its primitives without touching templates. */
+  --nb-font-body: var(--nb-font-sans);
+  --nb-font-display: var(--nb-font-sans);
+  --nb-font-accent: var(--nb-font-sans);
   --nb-font-weight-normal: 500;
   --nb-font-weight-bold: 700;