@axiapps/axi-design 1.7.0 → 1.8.0

package/accents.json

@@ -0,0 +1,13 @@
+[
+  { "id": "axi-gold", "label": "Axi Gold", "hex": "#ffc53d" },
+  { "id": "electric-blue", "label": "Electric Blue", "hex": "#3b82f6" },
+  { "id": "refined-cyan", "label": "Refined Cyan", "hex": "#5eadd5" },
+  { "id": "amber-warm", "label": "Amber Warm", "hex": "#f59e0b" },
+  { "id": "emerald-mint", "label": "Emerald Mint", "hex": "#34d399" },
+  { "id": "rose-pink", "label": "Rose Pink", "hex": "#f43f5e" },
+  { "id": "violet-purple", "label": "Violet Purple", "hex": "#8b5cf6" },
+  { "id": "crimson-red", "label": "Crimson Red", "hex": "#ef4444" },
+  { "id": "slate-silver", "label": "Slate Silver", "hex": "#94a3b8" },
+  { "id": "teal-ocean", "label": "Teal Ocean", "hex": "#14b8a6" },
+  { "id": "gold-bronze", "label": "Gold Bronze", "hex": "#d4a017" }
+]

package/dist/axi.css

@@ -638,6 +638,28 @@ a { color: inherit; }
 .axi-menu__pop label:hover { background: var(--axi-ground); color: var(--axi-text); }
 .axi-menu__pop input { margin: 3px 0 0; accent-color: var(--axi-accent); }
 
+/* ---------- tooltip ---------- */
+/* One line of ink on the darkest surface in the language, so it reads over
+   anything it lands on. The class draws the box only; coordinates come from
+   the consumer's script (measure the trigger, set left/top — gallery.js is
+   the reference wiring). Two contracts travel with it: the element is
+   appended to <body>, never inside the component it annotates, because
+   position: fixed re-anchors to any transformed ancestor and rule 4 makes
+   every hovered ancestor transformed; and it never carries information that
+   exists nowhere else, because a keyboard or touch user may never see it. */
+.axi-tooltip {
+  position: fixed;
+  z-index: 99999;
+  padding: 5px 8px;
+  background: var(--axi-ink-line);
+  color: var(--axi-text);
+  border: var(--axi-border-hairline) solid var(--axi-rule);
+  border-radius: var(--axi-radius-sm);
+  font: var(--axi-t-micro);
+  white-space: nowrap;
+  pointer-events: none;
+}
+
 /* ---------- card ---------- */
 .axi-card {
   position: relative; overflow: hidden;

package/docs/RULES.md

@@ -132,6 +132,15 @@ keeping the control's `translate(-2px, -2px)`.
 Nothing in this language fades, glows or pulses. The movement reads in
 peripheral vision and costs no colour.
 
+The lift being a transform has one structural consequence: a transformed
+element becomes the containing block for any `position: fixed` descendant.
+An overlay positioned in viewport coordinates — `.axi-tooltip` is the one
+this language ships — must therefore live as a child of `<body>`, never
+inside the component it annotates, or the first hover lift re-anchors it.
+The class draws only the box (ink-line ground, hairline rule border, micro
+type); measuring the trigger and setting `left`/`top` is the consumer's
+half, and `gallery.js` is the reference wiring.
+
 Every lift is turned off under `@media (prefers-reduced-motion: reduce)`, in
 `base.css`, once, for every consumer. Resting appearance is untouched: the
 diamond still rotates, because a rotation that never changes is geometry and

package/package.json

@@ -1,15 +1,22 @@
 {
   "name": "@axiapps/axi-design",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "description": "The design language for the axi suite — flat and outlined, dark, drawn in saturated ink.",
   "type": "module",
   "license": "MIT",
   "author": "darkharasho",
-  "repository": { "type": "git", "url": "git+https://github.com/darkharasho/axi-design.git" },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/darkharasho/axi-design.git"
+  },
   "homepage": "https://darkharasho.github.io/axi-design/",
-  "engines": { "node": ">=22" },
+  "engines": {
+    "node": ">=22"
+  },
   "//publishConfig": "A scoped package defaults to a restricted publish, and a restricted design language is no use to the apps that consume it. Pinned here rather than passed as --access public on the command line, so it cannot be forgotten on a later release.",
-  "publishConfig": { "access": "public" },
+  "publishConfig": {
+    "access": "public"
+  },
   "//exports": "Two entry points, and both are stylesheets. Consumers import the path rather than the package root because there is no JavaScript here to be a default export - `import '@axiapps/axi-design/axi.css'` says what it does, and a bare `import '@axiapps/axi-design'` resolving to a stylesheet would not. ./tokens.css is the palette without the components, for an app that already draws its own components through its own variables and wants to point them at ours: it is the whole language for a consumer like that, and copying the token block by hand is the one way those values are guaranteed to drift.",
   "exports": {
     "./axi.css": "./dist/axi.css",
@@ -27,11 +34,14 @@
     "dist",
     "src",
     "docs",
+    "accents.json",
     "README.md"
   ],
   "scripts": {
     "build": "node scripts/build.mjs",
     "test": "vitest run"
   },
-  "devDependencies": { "vitest": "^2.1.0" }
+  "devDependencies": {
+    "vitest": "^2.1.0"
+  }
 }

package/src/shells.css

@@ -120,6 +120,28 @@
 .axi-menu__pop label:hover { background: var(--axi-ground); color: var(--axi-text); }
 .axi-menu__pop input { margin: 3px 0 0; accent-color: var(--axi-accent); }
 
+/* ---------- tooltip ---------- */
+/* One line of ink on the darkest surface in the language, so it reads over
+   anything it lands on. The class draws the box only; coordinates come from
+   the consumer's script (measure the trigger, set left/top — gallery.js is
+   the reference wiring). Two contracts travel with it: the element is
+   appended to <body>, never inside the component it annotates, because
+   position: fixed re-anchors to any transformed ancestor and rule 4 makes
+   every hovered ancestor transformed; and it never carries information that
+   exists nowhere else, because a keyboard or touch user may never see it. */
+.axi-tooltip {
+  position: fixed;
+  z-index: 99999;
+  padding: 5px 8px;
+  background: var(--axi-ink-line);
+  color: var(--axi-text);
+  border: var(--axi-border-hairline) solid var(--axi-rule);
+  border-radius: var(--axi-radius-sm);
+  font: var(--axi-t-micro);
+  white-space: nowrap;
+  pointer-events: none;
+}
+
 /* ---------- card ---------- */
 .axi-card {
   position: relative; overflow: hidden;