impact-nova 2.1.0-alpha.2 → 2.1.0-alpha.4

package/dist/components/layout/header/header.js

@@ -4,55 +4,55 @@ import { cn as n } from "../../../lib/utils.js";
 import { Button as p } from "../../primitives/button/button.js";
 import { Badge as u } from "../../data-display/badge/badge.js";
 import { Separator as x } from "../../data-display/separator/separator.js";
-import { Alan as b, Bell as h } from "impact-nova-icons";
+import { Alan as h, Bell as g } from "impact-nova-icons";
 import { useImpactNovaI18n as m } from "../../../i18n/use-impact-nova-i18n.js";
-const g = i.forwardRef(
-  ({ className: t, children: e, ...a }, r) => /* @__PURE__ */ o(
+const b = i.forwardRef(
+  ({ className: a, children: e, ...t }, r) => /* @__PURE__ */ o(
     "header",
     {
       ref: r,
       "data-component": "header",
       className: n(
         "sticky top-0 z-40 flex h-14 w-full items-center justify-between bg-canvas-elevated px-6 shadow-elevation-header",
-        t
+        a
       ),
-      ...a,
+      ...t,
       children: e
     }
   )
 );
-g.displayName = "Header";
-const N = i.forwardRef(({ className: t, children: e, ...a }, r) => /* @__PURE__ */ o(
+b.displayName = "Header";
+const N = i.forwardRef(({ className: a, children: e, ...t }, r) => /* @__PURE__ */ o(
   "div",
   {
     ref: r,
-    className: n("flex flex-row items-center justify-start", t),
-    ...a,
+    className: n("flex flex-row items-center justify-start", a),
+    ...t,
     children: e
   }
 ));
 N.displayName = "HeaderLeft";
-const v = i.forwardRef(({ className: t, children: e, ...a }, r) => /* @__PURE__ */ o(
+const v = i.forwardRef(({ className: a, children: e, ...t }, r) => /* @__PURE__ */ o(
   "div",
   {
     ref: r,
-    className: n("flex flex-row items-center justify-start gap-5", t),
-    ...a,
+    className: n("flex flex-row items-center justify-start gap-5", a),
+    ...t,
     children: e
   }
 ));
 v.displayName = "HeaderRight";
-const y = i.forwardRef(({ className: t, children: e, href: a = "/", "aria-label": r, ...s }, d) => {
+const y = i.forwardRef(({ className: a, children: e, href: t = "/", "aria-label": r, ...s }, d) => {
   const { t: l } = m();
   return /* @__PURE__ */ o(
     "a",
     {
-      href: a,
+      href: t,
       ref: d,
       "aria-label": r ?? l("aria.home"),
       className: n(
         "h-9 flex items-center justify-center cursor-pointer",
-        t
+        a
       ),
       ...s,
       children: e
@@ -60,38 +60,38 @@ const y = i.forwardRef(({ className: t, children: e, href: a = "/", "aria-label"
   );
 });
 y.displayName = "HeaderLogo";
-const w = i.forwardRef(({ className: t, ...e }, a) => /* @__PURE__ */ o(
+const w = i.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ o(
   x,
   {
-    ref: a,
+    ref: t,
     orientation: "vertical",
-    className: n("h-6 mx-3", t),
+    className: n("h-6 mx-3", a),
     ...e
   }
 ));
 w.displayName = "HeaderSeparator";
-const H = i.forwardRef(({ className: t, children: e, ...a }, r) => /* @__PURE__ */ o(
+const H = i.forwardRef(({ className: a, children: e, ...t }, r) => /* @__PURE__ */ o(
   "h1",
   {
     ref: r,
-    className: n("text-base font-extrabold leading-6 text-content", t),
-    ...a,
+    className: n("text-base font-extrabold leading-6 text-content", a),
+    ...t,
     children: e
   }
-)), R = ({ className: t, children: e, style: a, ...r }) => /* @__PURE__ */ o(
+)), R = ({ className: a, children: e, style: t, ...r }) => /* @__PURE__ */ o(
   u,
   {
     size: "sm",
     shape: "circle",
-    className: n("border-none bg-gradient-to-l from-brand-variant to-brand text-white", t),
-    style: a,
+    className: n("border-none header-badge-gradient text-white", a),
+    style: t,
     ...r,
     children: e
   }
 );
 R.displayName = "HeaderBadge";
 H.displayName = "HeaderTitle";
-const T = i.forwardRef(({ className: t, children: e, ...a }, r) => /* @__PURE__ */ o(
+const T = i.forwardRef(({ className: a, children: e, ...t }, r) => /* @__PURE__ */ o(
   "button",
   {
     ref: r,
@@ -100,19 +100,19 @@ const T = i.forwardRef(({ className: t, children: e, ...a }, r) => /* @__PURE__
       "relative flex items-center justify-center w-[106px] h-[34px] gap-[7px] px-[11px] py-0 rounded-lg cursor-pointer border-0 outline-none",
       "header-bot-button-gradient",
       "animate-header-bot-gradient hover:animate-header-bot-gradient-fast motion-reduce:animate-none",
-      t
+      a
     ),
-    ...a,
+    ...t,
     children: e || /* @__PURE__ */ c(f, { children: [
-      /* @__PURE__ */ o(b, { size: 20, className: "text-brand-foreground" }),
+      /* @__PURE__ */ o(h, { size: 20, className: "text-brand-foreground" }),
       /* @__PURE__ */ o("span", { className: "text-sm font-semibold leading-[20px] text-brand-foreground whitespace-nowrap", children: "Ask Alan" })
     ] })
   }
 )), z = i.forwardRef(
   ({
-    className: t,
+    className: a,
     showIndicator: e,
-    tooltipSide: a = "top",
+    tooltipSide: t = "top",
     tooltipKeybinding: r,
     ...s
   }, d) => {
@@ -124,16 +124,16 @@ const T = i.forwardRef(({ className: t, children: e, ...a }, r) => /* @__PURE__
         size: "icon",
         ref: d,
         "aria-label": l("notificationPanel.title"),
-        tooltipSide: a,
+        tooltipSide: t,
         tooltipKeybinding: r,
         "data-indicator": e ? "" : void 0,
         className: n(
           "relative text-content-header-notification [&_svg]:size-6 hover:text-content",
-          t
+          a
         ),
         ...s,
         children: [
-          /* @__PURE__ */ o(h, { size: 24 }),
+          /* @__PURE__ */ o(g, { size: 24 }),
           e && /* @__PURE__ */ c("div", { className: "absolute top-1.5 right-1.5 size-2.5 pointer-events-none z-10", children: [
             /* @__PURE__ */ o("div", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-2.5 rounded-full bg-feedback-error-surface animate-notification-waves motion-reduce:animate-none" }),
             /* @__PURE__ */ o("div", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-2 rounded-full bg-destructive" })
@@ -145,7 +145,7 @@ const T = i.forwardRef(({ className: t, children: e, ...a }, r) => /* @__PURE__
 );
 z.displayName = "NotificationIconButton";
 export {
-  g as Header,
+  b as Header,
   R as HeaderBadge,
   T as HeaderBotButton,
   N as HeaderLeft,

package/dist/components/primitives/tag/tag.variants.js

@@ -7,8 +7,8 @@ const r = e(
         default: "bg-brand text-brand-foreground hover:bg-brand/90",
         secondary: "bg-accent text-content hover:bg-brand-tint-hover",
         outline: "border border-stroke-accent bg-canvas-elevated text-content-tertiary hover:bg-canvas-muted",
-        tertiary: "bg-secondary text-content hover:bg-muted",
-        ghost: "bg-transparent text-content-tertiary hover:bg-muted",
+        tertiary: "bg-secondary text-content hover:bg-canvas-muted",
+        ghost: "bg-transparent text-content-tertiary hover:bg-canvas-muted",
         destructive: "bg-destructive text-destructive-foreground hover:bg-destructive-hover",
         success: "bg-feedback-success-surface text-success hover:bg-success/15 border border-success-border",
         warning: "bg-feedback-warning-surface text-content hover:bg-warning/15 border border-warning-border",

package/dist/impact-nova-components.css

@@ -134,6 +134,11 @@
 .header-bot-button-gradient:hover {
   background-image: linear-gradient(-45deg, var(--color-header-bot-gradient-teal-hover), var(--color-header-bot-gradient-indigo-hover), var(--color-header-bot-gradient-orange-hover));
 }
+
+/* Header title badge — violet → primary (Figma Violet/500 → Primary) */
+.header-badge-gradient {
+  background-image: linear-gradient(270deg, var(--color-header-badge-gradient-from) 0%, var(--color-header-badge-gradient-to) 100%);
+}
 /* Custom AG Grid Styles — plain CSS (no SCSS nesting). */
 
 .ag-pinned-left-cols-container,

package/dist/impact-nova-tokens.scss

@@ -31,6 +31,7 @@
     --color-primary-soft-hover: #d5dafb;
     --color-primary-variant: #4459e4;
     --color-primary-variant-hover: #3347c7;
+    /* Not Figma Violet — use --color-header-badge-gradient-from for header Beta badge */
 
     --color-secondary: #f5f6fa;
     --color-secondary-foreground: #60697d;
@@ -61,6 +62,11 @@
     --color-header-bot-gradient-teal-hover: #2ac2ee;
     --color-header-bot-gradient-indigo-hover: #6962ef;
     --color-header-bot-gradient-orange-hover: #f26921;
+
+    /* Header title badge — Figma Violet/500 → Primary (Item Smart “Beta” pill) */
+    --color-header-badge-gradient-from: #be77ee;
+    --color-header-badge-gradient-to: var(--color-primary);
+
     // --color-secondary: #31416E;
 
     --color-neutral-charcoal: #41536c;
@@ -170,6 +176,10 @@
 
     --radius: 0.5rem;
 
+    /* Overlay stacking — shell (sheet/dialog) at 50; floating menus above at 100 */
+    --z-overlay-shell: 50;
+    --z-overlay-floating: 100;
+
     /* —— Alert elevation (emphasis) —— */
     --shadow-alert-elevated: 0 0 16px 5px rgb(0 0 0 / 0.12);
   }
@@ -223,6 +233,9 @@
     --color-foreground-icon: #9aa3b5;
     --color-header-notification-icon: #b4bac7;
 
+    --color-header-badge-gradient-from: #be77ee;
+    --color-header-badge-gradient-to: var(--color-primary);
+
     --color-neutral-charcoal: #b4bac7;
     --color-neutral-badge: #9aa3b5;