@kouji-ui/core 0.8.4 → 0.9.0

package/icon/icon.css

@@ -1,6 +1,6 @@
 /* packages/core/src/icon/icon.css
  *
- * Renders icons set up by `KjIconDirective`. The directive writes:
+ * Renders icons set up by `KjIcon`. The directive writes:
  *   --kj-icon            → CSS-ready value (`url("...")` or `"glyph"`)
  *   data-kj-icon-mode    → "svg" | "font"
  *
@@ -10,31 +10,33 @@
  *   font and (optionally) set `--kj-icon-font` on a parent.
  */
 
-.kj-icon {
-  display: inline-block;
-  width: 1em;
-  height: 1em;
-  flex-shrink: 0;
-  line-height: 1;
-  vertical-align: middle;
-}
+@layer kj.component {
+  .kj-icon {
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    flex-shrink: 0;
+    line-height: 1;
+    vertical-align: middle;
+  }
 
-.kj-icon[data-kj-icon-mode='svg'] {
-  background-color: currentColor;
-  mask-image: var(--kj-icon);
-  -webkit-mask-image: var(--kj-icon);
-  mask-size: contain;
-  -webkit-mask-size: contain;
-  mask-repeat: no-repeat;
-  -webkit-mask-repeat: no-repeat;
-  mask-position: center;
-  -webkit-mask-position: center;
-}
+  .kj-icon[data-kj-icon-mode='svg'] {
+    background-color: currentColor;
+    mask-image: var(--kj-icon);
+    -webkit-mask-image: var(--kj-icon);
+    mask-size: contain;
+    -webkit-mask-size: contain;
+    mask-repeat: no-repeat;
+    -webkit-mask-repeat: no-repeat;
+    mask-position: center;
+    -webkit-mask-position: center;
+  }
 
-.kj-icon[data-kj-icon-mode='font'] {
-  font-family: var(--kj-icon-font, inherit);
-}
+  .kj-icon[data-kj-icon-mode='font'] {
+    font-family: var(--kj-icon-font, inherit);
+  }
 
-.kj-icon[data-kj-icon-mode='font']::before {
-  content: var(--kj-icon);
+  .kj-icon[data-kj-icon-mode='font']::before {
+    content: var(--kj-icon);
+  }
 }

package/overlay/overlay.css

@@ -37,11 +37,19 @@
     pointer-events: auto;
   }
 
+  /* Scrim colour: the theme's `--kj-bg-overlay` (every theme declares one);
+     `--kj-backdrop-bg` remains a per-overlay override knob. */
   .kj-backdrop,
   .kj-overlay-backdrop {
     position: absolute;
     inset: 0;
-    background: var(--kj-backdrop-bg, rgb(0 0 0 / 0.5));
+    background: var(--kj-backdrop-bg, var(--kj-bg-overlay, rgb(0 0 0 / 0.5)));
     pointer-events: auto;
   }
+
+  /* `blurredBackdrop()` adds this modifier on top of the solid scrim. */
+  .kj-backdrop--blur {
+    -webkit-backdrop-filter: blur(var(--kj-backdrop-blur, 4px));
+    backdrop-filter: blur(var(--kj-backdrop-blur, 4px));
+  }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kouji-ui/core",
-  "version": "0.8.4",
-  "description": "Headless Angular 21 UI primitives — directives over CDK with WCAG 2.1 AAA semantics and zero CSS.",
+  "version": "0.9.0",
+  "description": "Headless Angular UI primitives — signal-driven directives with WCAG 2.1 AAA semantics, no CDK, and a handful of opt-in global stylesheets.",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -17,9 +17,9 @@
     "ui",
     "headless",
     "directives",
-    "cdk",
     "a11y",
-    "wcag"
+    "wcag",
+    "signals"
   ],
   "publishConfig": {
     "access": "public",
@@ -29,7 +29,6 @@
   "peerDependencies": {
     "@angular/common": "^22.0.0",
     "@angular/core": "^22.0.0",
-    "@angular/cdk": "^22.0.0",
     "@angular/forms": "^22.0.0",
     "rxjs": "^7.8.0",
     "echarts": "^6.0.0",
@@ -47,9 +46,14 @@
   },
   "sideEffects": false,
   "type": "module",
-  "module": "fesm2022/kouji-ui-core.mjs",
-  "typings": "types/kouji-ui-core.d.ts",
   "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    "./styles.css": {
+      "style": "./styles.css",
+      "default": "./styles.css"
+    },
     "./overlay/overlay.css": {
       "style": "./overlay/overlay.css",
       "default": "./overlay/overlay.css"
@@ -66,9 +70,6 @@
       "style": "./motion/motion.css",
       "default": "./motion/motion.css"
     },
-    "./package.json": {
-      "default": "./package.json"
-    },
     ".": {
       "types": "./types/kouji-ui-core.d.ts",
       "default": "./fesm2022/kouji-ui-core.mjs"
@@ -115,5 +116,7 @@
   "dependencies": {
     "@tanstack/angular-table": "^8.21.4",
     "tslib": "^2.3.0"
-  }
+  },
+  "module": "fesm2022/kouji-ui-core.mjs",
+  "typings": "types/kouji-ui-core.d.ts"
 }

package/styles.css

@@ -0,0 +1,32 @@
+/* ─────────────────────────────────────────────────────────────
+   @kouji-ui/core — aggregated global stylesheet
+   --------------------------------------------------------------
+   Published as `@kouji-ui/core/styles.css`: one line in the
+   `styles` array of angular.json, or `@import "@kouji-ui/core/styles.css"`
+   from a bundler that resolves package exports. It pulls in every
+   global piece the package ships — each is also published on its
+   own for à-la-carte registration:
+
+     @kouji-ui/core/overlay/overlay.css     overlay container / wrapper / backdrop chrome
+     @kouji-ui/core/icon/icon.css           [kjIcon] mask + font rendering
+     @kouji-ui/core/typography/prose.css    .kj-prose long-form typography
+     @kouji-ui/core/motion/motion.css       kjMotion enter / exit presets
+
+   The THEMED overlay surfaces (popover, tooltip, dropdown-menu,
+   dialog, drawer, toast, confirm-popup, sheet, action-sheet) live
+   one package up, in `@kouji-ui/components/src/overlay/overlay.css`
+   — register that one too, or every panel composed from the
+   headless directives paints with no background, border or shadow.
+
+   The @imports below are SOURCE-relative because the docs app
+   registers this file straight from the repo. ng-packagr flattens
+   the parts (`ng-package.json` assets), so `scripts/write-core-styles.mjs`
+   rewrites each import to its published path when the package
+   builds; `package-exports.spec.ts` pins that every import maps to
+   a shipped, exported asset.
+   ──────────────────────────────────────────────────────────── */
+
+@import "./overlay/overlay.css";
+@import "./typography/prose.css";
+@import "./icon/icon.css";
+@import "./motion/motion.css";