@uniweb/kit 0.10.3 → 0.10.5

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@uniweb/kit",
-  "version": "0.10.3",
+  "version": "0.10.5",
   "description": "Standard component library for Uniweb foundations",
   "type": "module",
   "exports": {
     ".": "./src/index.js",
     "./xref": "./src/xref/index.js",
     "./theme-tokens.css": "./src/theme-tokens.css",
-    "./prose-tokens.css": "./src/prose-tokens.css"
+    "./prose-tokens.css": "./src/prose-tokens.css",
+    "./callout-tokens.css": "./src/callout-tokens.css"
   },
   "files": [
     "src",
@@ -41,9 +42,9 @@
     "fuse.js": "^7.0.0",
     "shiki": "^3.0.0",
     "tailwind-merge": "^3.6.0",
+    "@uniweb/core": "0.8.0",
     "@uniweb/semantic-parser": "1.2.0",
-    "@uniweb/scene": "0.1.2",
-    "@uniweb/core": "0.8.0"
+    "@uniweb/scene": "0.1.2"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/src/callout-tokens.css

@@ -0,0 +1,107 @@
+/*
+ * Callout styling for the five standard concept tags, wired to the theme.
+ *
+ * Usage — one line, in the foundation's stylesheet, alongside the others:
+ *
+ *   @import "@uniweb/kit/callout-tokens.css";
+ *
+ * OPT-IN, and that is the point. kit's render engine emits a concept block as
+ * a bare `<div data-concept="<tag>">` — no classes, no box, nothing decided,
+ * because what a callout looks like is a foundation's design. Without an
+ * import like this one a concept block is unstyled and reads as plain prose,
+ * which is the correct default for a tag nobody has designed for yet.
+ *
+ * So this file supplies the WHOLE look, not just the colours: the frame, the
+ * padding and the spacing as well as the tint. An earlier version set only
+ * `border-color` and `background-color`, which on a bare div with no border
+ * width and no padding rendered as a tinted band running edge to edge — the
+ * right hue and nothing else.
+ *
+ * ── Why five names may live here when they may not live in a component ──
+ *
+ * kit answers for no NAME: it must never render its own accordion for `faq` or
+ * its own Alert for a `@Alert` reference, because that shadows a foundation
+ * shipping its own and cannot be overridden without forking. Two things make a
+ * stylesheet different:
+ *
+ *   1. CSS loses to specificity. A foundation that disagrees writes one rule
+ *      and wins, keeping kit's walk and its own look.
+ *   2. These five are not names we invented. `NOTE`, `TIP`, `IMPORTANT`,
+ *      `WARNING` and `CAUTION` are GitHub's alert kinds, which content-reader
+ *      accepts as a second spelling of a concept block. Implementing a
+ *      published convention is the same category as shipping icon-library
+ *      prefixes; inventing a list would be the concept registry the whole
+ *      design forbids.
+ *
+ * ── The colours are the site's ──
+ *
+ * Every value below is a semantic token the site sets in `theme.yml` —
+ * `--info`, `--warning`, `--error`, `--success` and their `-subtle` surfaces.
+ * kit supplies the MAPPING (which tag means which token); the site supplies
+ * what those tokens are, and they flip with the visitor's scheme on their own.
+ * No fixed palette appears here, for the reason `tests/no-fixed-palettes.test.js`
+ * exists.
+ *
+ * ── Tags with no rule ──
+ *
+ * A concept block whose tag is not one of the five gets the neutral frame
+ * above and no tint. That is deliberate: an unrecognized concept should look
+ * unremarkable rather than borrow a severity it was never given.
+ */
+
+/*
+ * The frame. `--border` is the neutral fallback, so a tag with no rule of its
+ * own below still reads as a deliberate box rather than as loose prose.
+ *
+ * The margin is stated here because the engine emits an unclassed div: a prose
+ * container styles the elements it knows, and this is not one of them, so
+ * without this a callout would sit flush against the paragraph above it and
+ * against the next callout.
+ */
+[data-concept] {
+  border: 1px solid var(--border);
+  border-radius: var(--radius, 0.5rem);
+  padding: 1rem 1.25rem;
+  margin: 1.5rem 0;
+}
+
+[data-concept="note"],
+[data-concept="info"] {
+  border-color: var(--info);
+  background-color: var(--info-subtle);
+}
+
+[data-concept="tip"],
+[data-concept="success"] {
+  border-color: var(--success);
+  background-color: var(--success-subtle);
+}
+
+[data-concept="important"] {
+  border-color: var(--primary);
+  background-color: var(--muted);
+}
+
+[data-concept="warning"] {
+  border-color: var(--warning);
+  background-color: var(--warning-subtle);
+}
+
+[data-concept="caution"],
+[data-concept="error"] {
+  border-color: var(--error);
+  background-color: var(--error-subtle);
+}
+
+/*
+ * A callout inside a `prose` container should not inherit the container's
+ * first-child/last-child margin collapsing on its own children, or the box
+ * gains dead space at top and bottom that its neighbours do not have.
+ */
+[data-concept] > :first-child {
+  margin-top: 0;
+}
+
+[data-concept] > :last-child {
+  margin-bottom: 0;
+}