@verdify/ui 0.1.0

package/LICENSE

@@ -0,0 +1,12 @@
+Copyright (c) 2026 Verdify.
+
+All rights reserved.
+
+This repository contains confidential and proprietary architecture documentation
+for the Verdify ecosystem (Verdify, Spare, Veraq). It is shared with employees,
+contractors, and authorized partners under the terms of their respective
+agreements. No license — express or implied — is granted to copy, distribute,
+or create derivative works outside those agreements.
+
+Replace this file with the organization's chosen license before any public or
+open-source release of any portion of the ecosystem.

package/README.md

@@ -0,0 +1,117 @@
+# @verdify/ui
+
+Verdify's React component library — accessible, brand-bound primitives that consume
+[`@verdify/tokens`][tokens]. Components ship as class strings over the Tailwind v4 token
+preset; there is no bundled CSS to import.
+
+This is a private GitHub Packages release. See the [BR-8 @verdify/ui design spec][spec] and
+the [BR-7 design-system charter][br7] for source-of-truth design decisions.
+
+[tokens]: https://github.com/mirinsim/verdify-brand/blob/main/packages/tokens/README.md
+[spec]:   https://github.com/mirinsim/verdify-docs/blob/main/specs/2026-05-31-br8-verdify-ui-design.md
+[br7]:    https://github.com/mirinsim/verdify-docs/blob/main/specs/2026-05-31-br7-design-system-charter-design.md
+
+## Scope
+
+Current scope is the 8 form/action **Primitives**: `Button`, `Input`, `Select`,
+`Checkbox`, `Radio`, `Switch`, `Textarea`, `Label`. More families (layout, feedback,
+navigation, data, and the Verdify molecules) are planned but not yet shipped — see the
+build order in the [`build-on-brand` skill](#development).
+
+## Install
+
+Add an `.npmrc` to your consuming repo:
+
+```ini
+@verdify:registry=https://npm.pkg.github.com
+//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}
+```
+
+Then install:
+
+```bash
+pnpm add @verdify/ui
+```
+
+`GITHUB_TOKEN` must have `read:packages` scope.
+
+## Setup
+
+### Peer dependencies
+
+`@verdify/ui` declares these as peers — install them in the consumer:
+
+| Peer | Range |
+|---|---|
+| `react` | `^18 \|\| ^19` |
+| `react-dom` | `^18 \|\| ^19` |
+| `tailwindcss` | `^4` |
+| `@verdify/tokens` | `^0.5.0` |
+
+### Tailwind v4
+
+Components carry no CSS of their own — they emit Tailwind utility class strings that
+resolve against the `@verdify/tokens` preset. Two things are required in the consumer:
+
+1. Import the token preset in your global stylesheet:
+
+   ```css
+   /* app/globals.css */
+   @import "tailwindcss";
+   @import "@verdify/tokens/preset";
+   ```
+
+2. Make Tailwind scan `@verdify/ui` so the utility classes it ships are detected. Add the
+   package to your `@source` (or `content`) so the classes are not tree-shaken away:
+
+   ```css
+   @source "../node_modules/@verdify/ui/dist";
+   ```
+
+Without both steps, components render unstyled (their classes are never generated).
+
+## Usage
+
+```tsx
+import { Button } from "@verdify/ui";
+
+export function SignIn() {
+  return <Button>Verify</Button>;
+}
+```
+
+Every primitive is exported by name from the package root, alongside its props type (for
+example `import { Input, type InputProps } from "@verdify/ui"`).
+
+## Development
+
+This package is developed inside the `verdify-brand` monorepo with **pnpm**. The scripts:
+
+```bash
+pnpm --filter @verdify/ui build       # tsup → ESM + .d.ts (per-file, 'use client' preserved)
+pnpm --filter @verdify/ui test        # vitest run (unit + a11y + gate suites)
+pnpm --filter @verdify/ui verify      # build → lint:gates → test (the full gate)
+pnpm --filter @verdify/ui storybook   # Storybook dev server on :6006
+```
+
+Components are authored via the **`build-on-brand`** skill
+(`.claude/skills/build-on-brand/`), which generates a brand-bound component from its
+8-section brand-book spec, test-first, so it passes the four standing library gates:
+
+| Gate | Enforces |
+|---|---|
+| token-binding | Intent/semantic tier utilities only — no neutral/brand/mist/obsidian, no raw hex, no v3 bare-var brackets |
+| brand ≠ state | A `status` variant key is never bound to an `action-*` utility, and vice versa |
+| motion-theatre | The deliberate-motion reveal is reserved for the verified badge; emphasis easing is forbidden elsewhere |
+| axe + keyboard | Per-component `jest-axe` clean plus the full keyboard model |
+
+## Versioning
+
+Independent semver from `verdify-brand`, published from GitHub Packages under the
+`@verdify` scope.
+
+## License
+
+UNLICENSED (proprietary). All rights reserved.
+</content>
+</invoke>

package/dist/components/accordion/accordion.d.ts

@@ -0,0 +1,66 @@
+import * as React from "react";
+import { Accordion as AccordionPrimitive } from "radix-ui";
+type SingleRootProps = {
+    type: "single";
+    /** In single, the open item can also be closed, leaving none open (spec §3 `collapsible`). */
+    collapsible?: boolean;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+};
+type MultipleRootProps = {
+    type: "multiple";
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+};
+type AccordionBaseProps = {
+    /**
+     * The heading level for every item header, chosen to fit the page outline (spec §7: the
+     * trigger is a `<button>` inside an `<h2>`–`<h6>`). Defaults to 3 (the Radix default).
+     */
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
+    /** Layout orientation; drives the arrow-key navigation axis. Vertical by default. */
+    orientation?: "vertical" | "horizontal";
+    dir?: "ltr" | "rtl";
+    className?: string;
+    children?: React.ReactNode;
+};
+export type AccordionProps = AccordionBaseProps & (SingleRootProps | MultipleRootProps);
+/**
+ * Accordion stacks several sections of content and lets you expand one at a time (or several,
+ * in the `multiple` variant) to read it, keeping the rest collapsed (spec §1). It is a neutral
+ * layout container: an expanded section is shown by the indicator and `aria-expanded`, never by
+ * a Sovereign Violet or Verified Green fill (spec §3/§8). Wraps the Radix Accordion (WAI-ARIA
+ * APG accordion pattern) — a stateful primitive, so this file is `'use client'`.
+ */
+export declare function Accordion({ headingLevel, className, children, ...rootProps }: AccordionProps): import("react/jsx-runtime").JSX.Element;
+export interface AccordionItemProps extends Omit<React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>, "value"> {
+    /** Stable identity for this item; used by the root to track which sections are open. */
+    value: string;
+    /** The item is present but not currently expandable (spec §4 Disabled). */
+    disabled?: boolean;
+}
+/** One collapsible section: a header and its panel (spec §2 `item`). */
+export declare const AccordionItem: React.ForwardRefExoticComponent<AccordionItemProps & React.RefAttributes<HTMLDivElement>>;
+export interface AccordionTriggerProps extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> {
+    /** Hide the default chevron indicator (it is decorative; never the only open-state signal). */
+    hideIndicator?: boolean;
+}
+/**
+ * The focusable `<button>` inside the heading (spec §2 `trigger`, §7): it carries the section
+ * title and the expand/collapse cue, holds the focus ring, and sets `aria-expanded` /
+ * `aria-controls` (both wired by Radix). The heading element wraps it at the page-outline level
+ * chosen on the root.
+ */
+export declare const AccordionTrigger: React.ForwardRefExoticComponent<AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export interface AccordionContentProps extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content> {
+}
+/**
+ * The collapsible region revealed when the item expands (spec §2 `panel`, §7). Radix sets
+ * `role="region"` and `aria-labelledby` back to the trigger, so the panel's accessible name is
+ * the section title. The padding lives on an inner element so the height-collapse stays smooth.
+ */
+export declare const AccordionContent: React.ForwardRefExoticComponent<AccordionContentProps & React.RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=accordion.d.ts.map

package/dist/components/accordion/accordion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/accordion.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,SAAS,IAAI,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAc3D,KAAK,eAAe,GAAG;IACrB,IAAI,EAAE,QAAQ,CAAC;IACf,8FAA8F;IAC9F,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC,CAAC;AAEF,KAAK,iBAAiB,GAAG;IACvB,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAC3C,CAAC;AAEF,KAAK,kBAAkB,GAAG;IACxB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACjC,qFAAqF;IACrF,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC,GAAG,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAAG,CAAC,eAAe,GAAG,iBAAiB,CAAC,CAAC;AAKxF;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAC,EACxB,YAAgB,EAChB,SAAS,EACT,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,cAAc,2CAahB;AAED,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,kBAAkB,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC;IACrF,wFAAwF;IACxF,KAAK,EAAE,MAAM,CAAC;IACd,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wEAAwE;AACxE,eAAO,MAAM,aAAa,2FAUzB,CAAC;AAoBF,MAAM,WAAW,qBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,kBAAkB,CAAC,OAAO,CAAC;IACzE,+FAA+F;IAC/F,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,iGAuB5B,CAAC;AAEF,MAAM,WAAW,qBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,kBAAkB,CAAC,OAAO,CAAC;CAAG;AAE9E;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,8FAY5B,CAAC"}

package/dist/components/accordion/accordion.js

@@ -0,0 +1,97 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Accordion as AccordionPrimitive } from "radix-ui";
+import { cn } from "../../lib/cn";
+import {
+  accordionItemVariants,
+  accordionTriggerVariants,
+  accordionIndicatorVariants,
+  accordionContentVariants,
+  accordionContentInnerClass
+} from "./accordion.variants";
+const AccordionHeadingLevelContext = React.createContext(3);
+function Accordion({
+  headingLevel = 3,
+  className,
+  children,
+  ...rootProps
+}) {
+  return /* @__PURE__ */ jsx(AccordionHeadingLevelContext.Provider, { value: headingLevel, children: /* @__PURE__ */ jsx(
+    AccordionPrimitive.Root,
+    {
+      ...rootProps,
+      className: cn("flex flex-col gap-(--space-2)", className),
+      children
+    }
+  ) });
+}
+const AccordionItem = React.forwardRef(
+  function AccordionItem2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      AccordionPrimitive.Item,
+      {
+        ref,
+        className: cn(accordionItemVariants(), className),
+        ...props
+      }
+    );
+  }
+);
+function ChevronIcon({ "data-testid": testId }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      "data-testid": testId,
+      "aria-hidden": "true",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      className: accordionIndicatorVariants(),
+      children: /* @__PURE__ */ jsx("path", { d: "M4 6l4 4 4-4", strokeLinecap: "round", strokeLinejoin: "round" })
+    }
+  );
+}
+const AccordionTrigger = React.forwardRef(
+  function AccordionTrigger2({ className, children, hideIndicator = false, ...props }, ref) {
+    const level = React.useContext(AccordionHeadingLevelContext);
+    return /* @__PURE__ */ jsx(AccordionPrimitive.Header, { asChild: true, children: React.createElement(
+      `h${level}`,
+      // the heading is a structural wrapper with no styling of its own (the trigger styles)
+      { className: "m-0" },
+      /* @__PURE__ */ jsxs(
+        AccordionPrimitive.Trigger,
+        {
+          ref,
+          className: cn(accordionTriggerVariants(), className),
+          ...props,
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "text-start", children }),
+            hideIndicator ? null : /* @__PURE__ */ jsx(ChevronIcon, { "data-testid": "accordion-indicator" })
+          ]
+        }
+      )
+    ) });
+  }
+);
+const AccordionContent = React.forwardRef(
+  function AccordionContent2({ className, children, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      AccordionPrimitive.Content,
+      {
+        ref,
+        className: cn(accordionContentVariants(), className),
+        ...props,
+        children: /* @__PURE__ */ jsx("div", { className: accordionContentInnerClass, children })
+      }
+    );
+  }
+);
+export {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger
+};
+//# sourceMappingURL=accordion.js.map

package/dist/components/accordion/accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/accordion/accordion.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { Accordion as AccordionPrimitive } from \"radix-ui\";\nimport { cn } from \"../../lib/cn\";\nimport {\n  accordionItemVariants,\n  accordionTriggerVariants,\n  accordionIndicatorVariants,\n  accordionContentVariants,\n  accordionContentInnerClass,\n} from \"./accordion.variants\";\n\n// The single-vs-multiple open behavior is a DISCRIMINATED axis on `type` (spec §3): the\n// `collapsible` option (the open item may also close, leaving none open) is only meaningful\n// in `single`. Modelling it as a union — instead of a free `collapsible` boolean — makes the\n// invalid `multiple` + `collapsible` combination unrepresentable at the type level.\ntype SingleRootProps = {\n  type: \"single\";\n  /** In single, the open item can also be closed, leaving none open (spec §3 `collapsible`). */\n  collapsible?: boolean;\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n};\n\ntype MultipleRootProps = {\n  type: \"multiple\";\n  value?: string[];\n  defaultValue?: string[];\n  onValueChange?: (value: string[]) => void;\n};\n\ntype AccordionBaseProps = {\n  /**\n   * The heading level for every item header, chosen to fit the page outline (spec §7: the\n   * trigger is a `<button>` inside an `<h2>`–`<h6>`). Defaults to 3 (the Radix default).\n   */\n  headingLevel?: 2 | 3 | 4 | 5 | 6;\n  /** Layout orientation; drives the arrow-key navigation axis. Vertical by default. */\n  orientation?: \"vertical\" | \"horizontal\";\n  dir?: \"ltr\" | \"rtl\";\n  className?: string;\n  children?: React.ReactNode;\n};\n\nexport type AccordionProps = AccordionBaseProps & (SingleRootProps | MultipleRootProps);\n\n// The heading level travels from the root to each header via context so callers set it once.\nconst AccordionHeadingLevelContext = React.createContext<2 | 3 | 4 | 5 | 6>(3);\n\n/**\n * Accordion stacks several sections of content and lets you expand one at a time (or several,\n * in the `multiple` variant) to read it, keeping the rest collapsed (spec §1). It is a neutral\n * layout container: an expanded section is shown by the indicator and `aria-expanded`, never by\n * a Sovereign Violet or Verified Green fill (spec §3/§8). Wraps the Radix Accordion (WAI-ARIA\n * APG accordion pattern) — a stateful primitive, so this file is `'use client'`.\n */\nexport function Accordion({\n  headingLevel = 3,\n  className,\n  children,\n  ...rootProps\n}: AccordionProps) {\n  return (\n    <AccordionHeadingLevelContext.Provider value={headingLevel}>\n      <AccordionPrimitive.Root\n        // `type` + the matching value/onValueChange shape flow through; the union above keeps\n        // single/multiple props mutually exclusive at the type level.\n        {...(rootProps as React.ComponentProps<typeof AccordionPrimitive.Root>)}\n        className={cn(\"flex flex-col gap-(--space-2)\", className)}\n      >\n        {children}\n      </AccordionPrimitive.Root>\n    </AccordionHeadingLevelContext.Provider>\n  );\n}\n\nexport interface AccordionItemProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>, \"value\"> {\n  /** Stable identity for this item; used by the root to track which sections are open. */\n  value: string;\n  /** The item is present but not currently expandable (spec §4 Disabled). */\n  disabled?: boolean;\n}\n\n/** One collapsible section: a header and its panel (spec §2 `item`). */\nexport const AccordionItem = React.forwardRef<HTMLDivElement, AccordionItemProps>(\n  function AccordionItem({ className, ...props }, ref) {\n    return (\n      <AccordionPrimitive.Item\n        ref={ref}\n        className={cn(accordionItemVariants(), className)}\n        {...props}\n      />\n    );\n  },\n);\n\n// The chevron indicator — inline SVG (no icon dep), --size-icon-md, rotates on open. Decorative:\n// aria-hidden; aria-expanded carries the open state, not the glyph (spec §2 indicator, §7).\nfunction ChevronIcon({ \"data-testid\": testId }: { \"data-testid\"?: string }) {\n  return (\n    <svg\n      data-testid={testId}\n      aria-hidden=\"true\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      className={accordionIndicatorVariants()}\n    >\n      <path d=\"M4 6l4 4 4-4\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  );\n}\n\nexport interface AccordionTriggerProps\n  extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> {\n  /** Hide the default chevron indicator (it is decorative; never the only open-state signal). */\n  hideIndicator?: boolean;\n}\n\n/**\n * The focusable `<button>` inside the heading (spec §2 `trigger`, §7): it carries the section\n * title and the expand/collapse cue, holds the focus ring, and sets `aria-expanded` /\n * `aria-controls` (both wired by Radix). The heading element wraps it at the page-outline level\n * chosen on the root.\n */\nexport const AccordionTrigger = React.forwardRef<HTMLButtonElement, AccordionTriggerProps>(\n  function AccordionTrigger({ className, children, hideIndicator = false, ...props }, ref) {\n    const level = React.useContext(AccordionHeadingLevelContext);\n    // The Radix Header renders the heading element (h2–h6 via the `level`-derived tag); the\n    // trigger is the button inside it. The heading provides structure, the button the control.\n    return (\n      <AccordionPrimitive.Header asChild>\n        {React.createElement(\n          `h${level}`,\n          // the heading is a structural wrapper with no styling of its own (the trigger styles)\n          { className: \"m-0\" },\n          <AccordionPrimitive.Trigger\n            ref={ref}\n            className={cn(accordionTriggerVariants(), className)}\n            {...props}\n          >\n            <span className=\"text-start\">{children}</span>\n            {hideIndicator ? null : <ChevronIcon data-testid=\"accordion-indicator\" />}\n          </AccordionPrimitive.Trigger>,\n        )}\n      </AccordionPrimitive.Header>\n    );\n  },\n);\n\nexport interface AccordionContentProps\n  extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content> {}\n\n/**\n * The collapsible region revealed when the item expands (spec §2 `panel`, §7). Radix sets\n * `role=\"region\"` and `aria-labelledby` back to the trigger, so the panel's accessible name is\n * the section title. The padding lives on an inner element so the height-collapse stays smooth.\n */\nexport const AccordionContent = React.forwardRef<HTMLDivElement, AccordionContentProps>(\n  function AccordionContent({ className, children, ...props }, ref) {\n    return (\n      <AccordionPrimitive.Content\n        ref={ref}\n        className={cn(accordionContentVariants(), className)}\n        {...props}\n      >\n        <div className={accordionContentInnerClass}>{children}</div>\n      </AccordionPrimitive.Content>\n    );\n  },\n);\n"],"mappings":";AAkEM,cA0EI,YA1EJ;AAhEN,YAAY,WAAW;AACvB,SAAS,aAAa,0BAA0B;AAChD,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAsCP,MAAM,+BAA+B,MAAM,cAAiC,CAAC;AAStE,SAAS,UAAU;AAAA,EACxB,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAmB;AACjB,SACE,oBAAC,6BAA6B,UAA7B,EAAsC,OAAO,cAC5C;AAAA,IAAC,mBAAmB;AAAA,IAAnB;AAAA,MAGE,GAAI;AAAA,MACL,WAAW,GAAG,iCAAiC,SAAS;AAAA,MAEvD;AAAA;AAAA,EACH,GACF;AAEJ;AAWO,MAAM,gBAAgB,MAAM;AAAA,EACjC,SAASA,eAAc,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AACnD,WACE;AAAA,MAAC,mBAAmB;AAAA,MAAnB;AAAA,QACC;AAAA,QACA,WAAW,GAAG,sBAAsB,GAAG,SAAS;AAAA,QAC/C,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAIA,SAAS,YAAY,EAAE,eAAe,OAAO,GAA+B;AAC1E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa;AAAA,MACb,eAAY;AAAA,MACZ,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,QAAO;AAAA,MACP,aAAY;AAAA,MACZ,WAAW,2BAA2B;AAAA,MAEtC,8BAAC,UAAK,GAAE,gBAAe,eAAc,SAAQ,gBAAe,SAAQ;AAAA;AAAA,EACtE;AAEJ;AAcO,MAAM,mBAAmB,MAAM;AAAA,EACpC,SAASC,kBAAiB,EAAE,WAAW,UAAU,gBAAgB,OAAO,GAAG,MAAM,GAAG,KAAK;AACvF,UAAM,QAAQ,MAAM,WAAW,4BAA4B;AAG3D,WACE,oBAAC,mBAAmB,QAAnB,EAA0B,SAAO,MAC/B,gBAAM;AAAA,MACL,IAAI,KAAK;AAAA;AAAA,MAET,EAAE,WAAW,MAAM;AAAA,MACnB;AAAA,QAAC,mBAAmB;AAAA,QAAnB;AAAA,UACC;AAAA,UACA,WAAW,GAAG,yBAAyB,GAAG,SAAS;AAAA,UAClD,GAAG;AAAA,UAEJ;AAAA,gCAAC,UAAK,WAAU,cAAc,UAAS;AAAA,YACtC,gBAAgB,OAAO,oBAAC,eAAY,eAAY,uBAAsB;AAAA;AAAA;AAAA,MACzE;AAAA,IACF,GACF;AAAA,EAEJ;AACF;AAUO,MAAM,mBAAmB,MAAM;AAAA,EACpC,SAASC,kBAAiB,EAAE,WAAW,UAAU,GAAG,MAAM,GAAG,KAAK;AAChE,WACE;AAAA,MAAC,mBAAmB;AAAA,MAAnB;AAAA,QACC;AAAA,QACA,WAAW,GAAG,yBAAyB,GAAG,SAAS;AAAA,QAClD,GAAG;AAAA,QAEJ,8BAAC,SAAI,WAAW,4BAA6B,UAAS;AAAA;AAAA,IACxD;AAAA,EAEJ;AACF;","names":["AccordionItem","AccordionTrigger","AccordionContent"]}

package/dist/components/accordion/accordion.variants.d.ts

@@ -0,0 +1,9 @@
+import { type VariantProps } from "class-variance-authority";
+export declare const accordionItemVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const accordionTriggerVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const accordionIndicatorVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const accordionContentVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const accordionContentInnerClass = "px-(--space-4) py-(--space-4)";
+export type AccordionItemVariantProps = VariantProps<typeof accordionItemVariants>;
+export type AccordionTriggerVariantProps = VariantProps<typeof accordionTriggerVariants>;
+//# sourceMappingURL=accordion.variants.d.ts.map

package/dist/components/accordion/accordion.variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.variants.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/accordion.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAUlE,eAAO,MAAM,qBAAqB,oFAIhC,CAAC;AAOH,eAAO,MAAM,wBAAwB,oFA0BnC,CAAC;AAiBH,eAAO,MAAM,0BAA0B,oFAOrC,CAAC;AAOH,eAAO,MAAM,wBAAwB,oFAGnC,CAAC;AAIH,eAAO,MAAM,0BAA0B,kCAAkC,CAAC;AAE1E,MAAM,MAAM,yBAAyB,GAAG,YAAY,CAAC,OAAO,qBAAqB,CAAC,CAAC;AACnF,MAAM,MAAM,4BAA4B,GAAG,YAAY,CAAC,OAAO,wBAAwB,CAAC,CAAC"}

package/dist/components/accordion/accordion.variants.js

@@ -0,0 +1,54 @@
+import { cva } from "class-variance-authority";
+const accordionItemVariants = cva([
+  // overflow-hidden so the panel reveal clips to the item radius; logical text start (G-U6)
+  "overflow-hidden rounded-(--radius-md) border border-border-default",
+  "text-start"
+]);
+const accordionTriggerVariants = cva([
+  // layout: full-width header row, title on the inline-start, indicator on the inline-end.
+  // `group` anchors the trigger so the child indicator can react to its data-disabled state
+  // (Radix sets data-disabled + native disabled on this button) without prop plumbing.
+  "group flex w-full items-center justify-between gap-(--space-2) px-(--space-4)",
+  // rest surface: control-* tier (neutral), with the at-rest control border
+  "bg-control-bg text-control-fg border-control-border",
+  // trigger title type role + medium weight; cursor affordance
+  "text-label font-medium cursor-pointer select-none",
+  // hover AND pressed lift to the neutral secondary hover fill (spec §4) — never a brand fill
+  "hover:bg-action-secondary-bg-hover active:bg-action-secondary-bg-hover",
+  // expand/collapse is a PLAIN reveal — base duration + verdify easing, instant under reduced
+  // motion. Never the 350ms VerifiedBadge-only theatre duration (G-U3 motion-theatre gate).
+  "transition-colors duration-(--motion-duration-base) ease-(--motion-easing-verdify)",
+  "motion-reduce:duration-(--motion-duration-instant)",
+  // target-size floor: 44px touch / 40px pointer (§7 2.5.8), padding density above it; the
+  // resting height EMERGES from the floor + py, never a fixed height below the a11y floor (DEC-B)
+  "min-h-(--size-target-mobile) sm:min-h-(--size-target-desktop) py-(--space-2)",
+  // visible 2px signal-blue ring at 2px offset; persists whether the item is open or closed
+  "outline-none",
+  "focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2",
+  // focused: the trigger border emphasises to the focus color (spec §5 --color-border-focus)
+  "focus-visible:border-border-focus",
+  // disabled — DEC-C: out of the tab order (native disabled), reduced emphasis via the disabled
+  // TOKEN on the title AND the indicator (below), never a blanket opacity on the control
+  "disabled:pointer-events-none disabled:text-text-disabled"
+]);
+const accordionIndicatorVariants = cva([
+  "h-(--size-icon-md) w-(--size-icon-md) shrink-0 text-action-ghost-fg",
+  "group-data-[disabled]:text-text-disabled",
+  "transition-transform duration-(--motion-duration-base) ease-(--motion-easing-verdify)",
+  "motion-reduce:duration-(--motion-duration-instant)",
+  // rotate the chevron when the parent trigger is open (Radix sets data-state on the trigger)
+  "data-[state=open]:rotate-180"
+]);
+const accordionContentVariants = cva([
+  "overflow-hidden bg-surface-canvas text-text-primary text-body",
+  "border-t border-border-default"
+]);
+const accordionContentInnerClass = "px-(--space-4) py-(--space-4)";
+export {
+  accordionContentInnerClass,
+  accordionContentVariants,
+  accordionIndicatorVariants,
+  accordionItemVariants,
+  accordionTriggerVariants
+};
+//# sourceMappingURL=accordion.variants.js.map

package/dist/components/accordion/accordion.variants.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/accordion/accordion.variants.ts"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\n\n// Accordion is a NEUTRAL layout container (spec §1/§3/§8): brand violet and Verified Green\n// are accents, neutrals carry the surface, so NOTHING here binds a --color-action-primary-*\n// or --color-status-* fill. An expanded section is not \"selected\" or \"verified\" — the open\n// item is shown by the indicator + aria-expanded, never by a brand/status fill. The only\n// token-binding site is this file (skill §5 hard rule).\n\n// The item: one collapsible section. A neutral hairline divider (border-border-default) and\n// the item radius bound the header + its panel. The root stacks items; the item draws the box.\nexport const accordionItemVariants = cva([\n  // overflow-hidden so the panel reveal clips to the item radius; logical text start (G-U6)\n  \"overflow-hidden rounded-(--radius-md) border border-border-default\",\n  \"text-start\",\n]);\n\n// The trigger: the focusable <button> inside the heading. A control-* tier surface at rest;\n// the neutral secondary hover fill on hover AND on press (pressed is acknowledged without\n// theatre — restraint over volume, spec §4 Pressed); the trigger title in the label type\n// role; the persistent focus ring; the target-size floor; base reveal motion (NEVER the\n// deliberate verified-check theatre); DEC-C disabled via the disabled TOKEN, never opacity.\nexport const accordionTriggerVariants = cva([\n  // layout: full-width header row, title on the inline-start, indicator on the inline-end.\n  // `group` anchors the trigger so the child indicator can react to its data-disabled state\n  // (Radix sets data-disabled + native disabled on this button) without prop plumbing.\n  \"group flex w-full items-center justify-between gap-(--space-2) px-(--space-4)\",\n  // rest surface: control-* tier (neutral), with the at-rest control border\n  \"bg-control-bg text-control-fg border-control-border\",\n  // trigger title type role + medium weight; cursor affordance\n  \"text-label font-medium cursor-pointer select-none\",\n  // hover AND pressed lift to the neutral secondary hover fill (spec §4) — never a brand fill\n  \"hover:bg-action-secondary-bg-hover active:bg-action-secondary-bg-hover\",\n  // expand/collapse is a PLAIN reveal — base duration + verdify easing, instant under reduced\n  // motion. Never the 350ms VerifiedBadge-only theatre duration (G-U3 motion-theatre gate).\n  \"transition-colors duration-(--motion-duration-base) ease-(--motion-easing-verdify)\",\n  \"motion-reduce:duration-(--motion-duration-instant)\",\n  // target-size floor: 44px touch / 40px pointer (§7 2.5.8), padding density above it; the\n  // resting height EMERGES from the floor + py, never a fixed height below the a11y floor (DEC-B)\n  \"min-h-(--size-target-mobile) sm:min-h-(--size-target-desktop) py-(--space-2)\",\n  // visible 2px signal-blue ring at 2px offset; persists whether the item is open or closed\n  \"outline-none\",\n  \"focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2\",\n  // focused: the trigger border emphasises to the focus color (spec §5 --color-border-focus)\n  \"focus-visible:border-border-focus\",\n  // disabled — DEC-C: out of the tab order (native disabled), reduced emphasis via the disabled\n  // TOKEN on the title AND the indicator (below), never a blanket opacity on the control\n  \"disabled:pointer-events-none disabled:text-text-disabled\",\n]);\n\n// The indicator glyph: a neutral chevron (ghost fg), --size-icon-md, rotating to mirror the\n// expanded state. Decorative (aria-hidden); aria-expanded carries the open state, not the glyph.\n// It rotates 180deg when the item is open (data-state=open on the trigger), with the same base\n// reveal motion.\n//\n// DEC-C / spec §4·§5: the glyph is drawn with stroke=\"currentColor\", so its color is whatever\n// `text-*` resolves to on the SVG. At rest that is the distinct indicator color\n// --color-action-ghost-fg (spec §5 assigns ghost-fg to the indicator, NOT the trigger title's\n// control-fg). When the item is disabled it must flip to --color-text-disabled — the SAME token\n// the title dims to (spec §4 \"reduced emphasis\", §5 \"Disabled item's title AND indicator\"). We\n// flip the glyph color via the trigger's live data-disabled state (Radix mirrors the item's\n// disabled onto the trigger button as data-disabled + native disabled). This realizes the\n// Checkbox color-flip principle (text-action-ghost-fg -> text-text-disabled) using Select's\n// data-[disabled] mechanism (select.variants.ts) — appropriate here because the disabled state\n// is Radix-context-driven, not a prop on AccordionTrigger, so a prop-fed cva boolean can't see it.\nexport const accordionIndicatorVariants = cva([\n  \"h-(--size-icon-md) w-(--size-icon-md) shrink-0 text-action-ghost-fg\",\n  \"group-data-[disabled]:text-text-disabled\",\n  \"transition-transform duration-(--motion-duration-base) ease-(--motion-easing-verdify)\",\n  \"motion-reduce:duration-(--motion-duration-instant)\",\n  // rotate the chevron when the parent trigger is open (Radix sets data-state on the trigger)\n  \"data-[state=open]:rotate-180\",\n]);\n\n// The panel: the collapsible region. The canvas surface, the primary body text at the body\n// type role, panel insets from --space-4. A divider above it (border-t) continues the neutral\n// hairline from the item. The reveal animates the Radix content-height var (a STRUCTURAL keyword\n// arbitrary property, not a raw value), base duration, collapsed to its endpoints under reduced\n// motion.\nexport const accordionContentVariants = cva([\n  \"overflow-hidden bg-surface-canvas text-text-primary text-body\",\n  \"border-t border-border-default\",\n]);\n\n// The panel inner padding wrapper — the actual content insets (Radix Content clips height, so\n// the padding lives on an inner element to avoid jumpy collapse).\nexport const accordionContentInnerClass = \"px-(--space-4) py-(--space-4)\";\n\nexport type AccordionItemVariantProps = VariantProps<typeof accordionItemVariants>;\nexport type AccordionTriggerVariantProps = VariantProps<typeof accordionTriggerVariants>;\n"],"mappings":"AAAA,SAAS,WAA8B;AAUhC,MAAM,wBAAwB,IAAI;AAAA;AAAA,EAEvC;AAAA,EACA;AACF,CAAC;AAOM,MAAM,2BAA2B,IAAI;AAAA;AAAA;AAAA;AAAA,EAI1C;AAAA;AAAA,EAEA;AAAA;AAAA,EAEA;AAAA;AAAA,EAEA;AAAA;AAAA;AAAA,EAGA;AAAA,EACA;AAAA;AAAA;AAAA,EAGA;AAAA;AAAA,EAEA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA;AAAA;AAAA,EAGA;AACF,CAAC;AAiBM,MAAM,6BAA6B,IAAI;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAEA;AACF,CAAC;AAOM,MAAM,2BAA2B,IAAI;AAAA,EAC1C;AAAA,EACA;AACF,CAAC;AAIM,MAAM,6BAA6B;","names":[]}

package/dist/components/accordion/index.d.ts

@@ -0,0 +1,3 @@
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent, type AccordionProps, type AccordionItemProps, type AccordionTriggerProps, type AccordionContentProps, } from "./accordion";
+export { accordionItemVariants, accordionTriggerVariants, accordionIndicatorVariants, accordionContentVariants, accordionContentInnerClass, type AccordionItemVariantProps, type AccordionTriggerVariantProps, } from "./accordion.variants";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/accordion/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,aAAa,EACb,gBAAgB,EAChB,gBAAgB,EAChB,KAAK,cAAc,EACnB,KAAK,kBAAkB,EACvB,KAAK,qBAAqB,EAC1B,KAAK,qBAAqB,GAC3B,MAAM,aAAa,CAAC;AACrB,OAAO,EACL,qBAAqB,EACrB,wBAAwB,EACxB,0BAA0B,EAC1B,wBAAwB,EACxB,0BAA0B,EAC1B,KAAK,yBAAyB,EAC9B,KAAK,4BAA4B,GAClC,MAAM,sBAAsB,CAAC"}

package/dist/components/accordion/index.js

@@ -0,0 +1,25 @@
+import {
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent
+} from "./accordion";
+import {
+  accordionItemVariants,
+  accordionTriggerVariants,
+  accordionIndicatorVariants,
+  accordionContentVariants,
+  accordionContentInnerClass
+} from "./accordion.variants";
+export {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  accordionContentInnerClass,
+  accordionContentVariants,
+  accordionIndicatorVariants,
+  accordionItemVariants,
+  accordionTriggerVariants
+};
+//# sourceMappingURL=index.js.map

package/dist/components/accordion/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/accordion/index.ts"],"sourcesContent":["export {\n  Accordion,\n  AccordionItem,\n  AccordionTrigger,\n  AccordionContent,\n  type AccordionProps,\n  type AccordionItemProps,\n  type AccordionTriggerProps,\n  type AccordionContentProps,\n} from \"./accordion\";\nexport {\n  accordionItemVariants,\n  accordionTriggerVariants,\n  accordionIndicatorVariants,\n  accordionContentVariants,\n  accordionContentInnerClass,\n  type AccordionItemVariantProps,\n  type AccordionTriggerVariantProps,\n} from \"./accordion.variants\";\n"],"mappings":"AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAKK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;","names":[]}

package/dist/components/agent-badge/agent-badge.d.ts

@@ -0,0 +1,56 @@
+import * as React from "react";
+import { type AgentBadgeVariantProps } from "./agent-badge.variants";
+/**
+ * The state OF THE AGENT an AgentBadge reports (spec §3). Omit for the default
+ * `neutral` marker — the common case anywhere an AI agent is the actor. A status
+ * color is spent only when the agent itself needs attention (`caution`) or has
+ * failed (`critical`); it never means "agents are risky". The brand color and the
+ * verified-status green are never AgentBadge variants — the brand is not a status,
+ * and a verified result is the VerifiedBadge molecule placed beside it.
+ */
+export type AgentBadgeStatus = Exclude<NonNullable<AgentBadgeVariantProps["variant"]>, "neutral">;
+export interface AgentBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /**
+     * The state of the agent the badge reports (spec §3). Omit for the default
+     * `neutral` marker. `caution` only when the agent itself needs attention — for
+     * example its authority is expiring or its grant is pending review. `critical`
+     * only when the agent itself is in a failed or revoked state. The status color is
+     * always paired with label text that names the state, so the meaning never rests
+     * on color alone (spec §3/§7).
+     */
+    status?: AgentBadgeStatus;
+    /**
+     * One small leading glyph that reinforces the label (spec §2). Restraint, not
+     * theatre: a quiet, flat mark that reads as "agent", never a robot caricature or a
+     * spinning/pulsing animation. Decorative and `aria-hidden` — the label still
+     * carries the meaning if the icon is dropped, so the human/agent distinction never
+     * rests on color or shape alone (spec §2/§7).
+     */
+    icon?: React.ReactNode;
+}
+/**
+ * An AgentBadge marks that the actor in view is an AI agent, not a human (spec §1).
+ * Its one job is to make the kind of actor explicit wherever an action, a record, or
+ * a presence could otherwise be read as a person's — so a human and an AI agent are
+ * never confused. It encodes the platform invariant that human and AI-agent actors
+ * are both first-class: an agent is a real, supported actor shown plainly, and it is
+ * never allowed to read as the human it acts for.
+ *
+ * It LABELS the kind of actor; it does not stand in for the agent's authority or its
+ * verification (spec §1/§7). What the agent is allowed to do — its scoped
+ * permissions, who it acts for, how it is revoked — lives in the surrounding context
+ * the badge is placed in, not in the badge itself. An agent identity is still an
+ * identity, not a credential: the AgentBadge says "this is an agent", never "this
+ * agent is trusted". A verified result, if there is one, is the VerifiedBadge
+ * molecule placed BESIDE the AgentBadge, with its own meaning and accessible name —
+ * so the AgentBadge binds nothing from the action (brand) tier and never the
+ * verified-status green (brand != state, spec §3/§5/§8).
+ *
+ * It is non-interactive (spec §4/§6): it takes no focus, binds no keys, is never a
+ * tab stop, and renders no focus ring or target-size floor. An AgentBadge that must
+ * be clickable — to open the agent's identity, scope, or revocation control — is not
+ * a new variant: wrap it in a Button or link that owns the interaction, its keyboard
+ * model, and its focus ring, and let the badge stay a passive marker (spec §3/§6).
+ */
+export declare const AgentBadge: React.ForwardRefExoticComponent<AgentBadgeProps & React.RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=agent-badge.d.ts.map

package/dist/components/agent-badge/agent-badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"agent-badge.d.ts","sourceRoot":"","sources":["../../../src/components/agent-badge/agent-badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAGL,KAAK,sBAAsB,EAC5B,MAAM,wBAAwB,CAAC;AAEhC;;;;;;;GAOG;AACH,MAAM,MAAM,gBAAgB,GAAG,OAAO,CAAC,WAAW,CAAC,sBAAsB,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC;AAElG,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IAC5E;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,UAAU,yFA+BtB,CAAC"}

package/dist/components/agent-badge/agent-badge.js

@@ -0,0 +1,35 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/cn";
+import {
+  agentBadgeVariants,
+  agentBadgeIconClass
+} from "./agent-badge.variants";
+const AgentBadge = React.forwardRef(
+  function AgentBadge2({ className, status, icon, children, "aria-label": ariaLabel, ...props }, ref) {
+    const variant = status ?? "neutral";
+    const iconOnly = children == null && ariaLabel != null;
+    return (
+      // native <span>: inline text in a styled container. No tabIndex, no focus ring —
+      // an AgentBadge is a marker, not a control (spec §6/§7).
+      /* @__PURE__ */ jsxs(
+        "span",
+        {
+          ref,
+          className: cn(agentBadgeVariants({ variant }), className),
+          role: iconOnly ? "img" : void 0,
+          "aria-label": ariaLabel,
+          ...props,
+          children: [
+            icon ? /* @__PURE__ */ jsx("span", { "data-testid": "agent-badge-icon", className: agentBadgeIconClass, "aria-hidden": "true", children: icon }) : null,
+            children
+          ]
+        }
+      )
+    );
+  }
+);
+export {
+  AgentBadge
+};
+//# sourceMappingURL=agent-badge.js.map

package/dist/components/agent-badge/agent-badge.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/agent-badge/agent-badge.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport {\n  agentBadgeVariants,\n  agentBadgeIconClass,\n  type AgentBadgeVariantProps,\n} from \"./agent-badge.variants\";\n\n/**\n * The state OF THE AGENT an AgentBadge reports (spec §3). Omit for the default\n * `neutral` marker — the common case anywhere an AI agent is the actor. A status\n * color is spent only when the agent itself needs attention (`caution`) or has\n * failed (`critical`); it never means \"agents are risky\". The brand color and the\n * verified-status green are never AgentBadge variants — the brand is not a status,\n * and a verified result is the VerifiedBadge molecule placed beside it.\n */\nexport type AgentBadgeStatus = Exclude<NonNullable<AgentBadgeVariantProps[\"variant\"]>, \"neutral\">;\n\nexport interface AgentBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /**\n   * The state of the agent the badge reports (spec §3). Omit for the default\n   * `neutral` marker. `caution` only when the agent itself needs attention — for\n   * example its authority is expiring or its grant is pending review. `critical`\n   * only when the agent itself is in a failed or revoked state. The status color is\n   * always paired with label text that names the state, so the meaning never rests\n   * on color alone (spec §3/§7).\n   */\n  status?: AgentBadgeStatus;\n  /**\n   * One small leading glyph that reinforces the label (spec §2). Restraint, not\n   * theatre: a quiet, flat mark that reads as \"agent\", never a robot caricature or a\n   * spinning/pulsing animation. Decorative and `aria-hidden` — the label still\n   * carries the meaning if the icon is dropped, so the human/agent distinction never\n   * rests on color or shape alone (spec §2/§7).\n   */\n  icon?: React.ReactNode;\n}\n\n/**\n * An AgentBadge marks that the actor in view is an AI agent, not a human (spec §1).\n * Its one job is to make the kind of actor explicit wherever an action, a record, or\n * a presence could otherwise be read as a person's — so a human and an AI agent are\n * never confused. It encodes the platform invariant that human and AI-agent actors\n * are both first-class: an agent is a real, supported actor shown plainly, and it is\n * never allowed to read as the human it acts for.\n *\n * It LABELS the kind of actor; it does not stand in for the agent's authority or its\n * verification (spec §1/§7). What the agent is allowed to do — its scoped\n * permissions, who it acts for, how it is revoked — lives in the surrounding context\n * the badge is placed in, not in the badge itself. An agent identity is still an\n * identity, not a credential: the AgentBadge says \"this is an agent\", never \"this\n * agent is trusted\". A verified result, if there is one, is the VerifiedBadge\n * molecule placed BESIDE the AgentBadge, with its own meaning and accessible name —\n * so the AgentBadge binds nothing from the action (brand) tier and never the\n * verified-status green (brand != state, spec §3/§5/§8).\n *\n * It is non-interactive (spec §4/§6): it takes no focus, binds no keys, is never a\n * tab stop, and renders no focus ring or target-size floor. An AgentBadge that must\n * be clickable — to open the agent's identity, scope, or revocation control — is not\n * a new variant: wrap it in a Button or link that owns the interaction, its keyboard\n * model, and its focus ring, and let the badge stay a passive marker (spec §3/§6).\n */\nexport const AgentBadge = React.forwardRef<HTMLSpanElement, AgentBadgeProps>(\n  function AgentBadge({ className, status, icon, children, \"aria-label\": ariaLabel, ...props }, ref) {\n    const variant = status ?? \"neutral\";\n    // The actor-kind text MUST reach the accessibility tree (spec §7): when there is a\n    // visible word, that text is the accessible name and no role is needed (the spec\n    // default). When the marker is shown icon-and-color only — no visible word — the\n    // distinction can only be carried by the caller's aria-label, but `aria-label` on a\n    // roleless <span> is prohibited by ARIA (aria-prohibited-attr) and would be silently\n    // dropped, which would conflate human and agent — the one failure this molecule\n    // forbids. So give the icon-only marker role=\"img\" (a graphical element with a text\n    // alternative, the same pattern Avatar uses) to make the name valid and announced.\n    const iconOnly = children == null && ariaLabel != null;\n    return (\n      // native <span>: inline text in a styled container. No tabIndex, no focus ring —\n      // an AgentBadge is a marker, not a control (spec §6/§7).\n      <span\n        ref={ref}\n        className={cn(agentBadgeVariants({ variant }), className)}\n        role={iconOnly ? \"img\" : undefined}\n        aria-label={ariaLabel}\n        {...props}\n      >\n        {icon ? (\n          <span data-testid=\"agent-badge-icon\" className={agentBadgeIconClass} aria-hidden=\"true\">\n            {icon}\n          </span>\n        ) : null}\n        {children}\n      </span>\n    );\n  },\n);\n"],"mappings":"AA6EM,SAQI,KARJ;AA7EN,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AAwDA,MAAM,aAAa,MAAM;AAAA,EAC9B,SAASA,YAAW,EAAE,WAAW,QAAQ,MAAM,UAAU,cAAc,WAAW,GAAG,MAAM,GAAG,KAAK;AACjG,UAAM,UAAU,UAAU;AAS1B,UAAM,WAAW,YAAY,QAAQ,aAAa;AAClD;AAAA;AAAA;AAAA,MAGE;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,WAAW,GAAG,mBAAmB,EAAE,QAAQ,CAAC,GAAG,SAAS;AAAA,UACxD,MAAM,WAAW,QAAQ;AAAA,UACzB,cAAY;AAAA,UACX,GAAG;AAAA,UAEH;AAAA,mBACC,oBAAC,UAAK,eAAY,oBAAmB,WAAW,qBAAqB,eAAY,QAC9E,gBACH,IACE;AAAA,YACH;AAAA;AAAA;AAAA,MACH;AAAA;AAAA,EAEJ;AACF;","names":["AgentBadge"]}

package/dist/components/agent-badge/agent-badge.variants.d.ts

@@ -0,0 +1,7 @@
+import { type VariantProps } from "class-variance-authority";
+export declare const agentBadgeVariants: (props?: ({
+    variant?: "neutral" | "caution" | "critical" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const agentBadgeIconClass = "inline-flex h-(--size-icon-sm) w-(--size-icon-sm) shrink-0";
+export type AgentBadgeVariantProps = VariantProps<typeof agentBadgeVariants>;
+//# sourceMappingURL=agent-badge.variants.d.ts.map

package/dist/components/agent-badge/agent-badge.variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"agent-badge.variants.d.ts","sourceRoot":"","sources":["../../../src/components/agent-badge/agent-badge.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AA+ClE,eAAO,MAAM,kBAAkB;;8EA2B9B,CAAC;AAMF,eAAO,MAAM,mBAAmB,+DAA+D,CAAC;AAEhG,MAAM,MAAM,sBAAsB,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAC"}

package/dist/components/agent-badge/agent-badge.variants.js

@@ -0,0 +1,35 @@
+import { cva } from "class-variance-authority";
+const agentBadgeVariants = cva(
+  [
+    // shape / layout: a pill holding the optional icon + label at the small gap
+    "inline-flex items-center gap-(--space-1) rounded-(--radius-full) border px-(--space-1)",
+    // type ROLE — caption (spec §5); the label always reads on its own, so the
+    // human/agent distinction never rests on color or shape alone
+    "text-caption font-medium",
+    // global-first: never wrap (the marker stays a single self-contained chip)
+    "whitespace-nowrap"
+  ],
+  {
+    variants: {
+      // STRUCTURAL axis = spec §3 (the state of the agent the badge reports)
+      variant: {
+        // neutral (default): the standard agent marker — neutral surface, text, and
+        // border roles, no status color (spec §3)
+        neutral: "bg-surface-raised border-surface-border-muted text-text-secondary",
+        // caution: the agent itself needs attention (authority expiring, grant pending)
+        // — the matching status trio; bg is the neutral surface (spec §3)
+        caution: "bg-status-caution-bg border-status-caution-border text-status-caution-fg",
+        // critical: the agent itself failed or was revoked (access revoked, invalid
+        // credentials) — the matching status trio; bg is the neutral surface (spec §3)
+        critical: "bg-status-critical-bg border-status-critical-border text-status-critical-fg"
+      }
+    },
+    defaultVariants: { variant: "neutral" }
+  }
+);
+const agentBadgeIconClass = "inline-flex h-(--size-icon-sm) w-(--size-icon-sm) shrink-0";
+export {
+  agentBadgeIconClass,
+  agentBadgeVariants
+};
+//# sourceMappingURL=agent-badge.variants.js.map

package/dist/components/agent-badge/agent-badge.variants.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/agent-badge/agent-badge.variants.ts"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\n\n// An AgentBadge is a small, NON-INTERACTIVE marker that the actor in view is an AI\n// agent, not a human (spec §1). It is a pill that holds a label and an optional\n// decorative icon — NOT a control: no focus ring, no target-size floor, no state\n// transition (spec §4/§5/§6).\n//\n// `variant` is the state the badge reports (spec §3). `neutral` is the default and\n// the common case: an AgentBadge has ONE meaning — \"this actor is an AI agent\" — so\n// neutrals carry the surface. It is a quiet, persistent marker, not an alarm. A\n// status color is spent ONLY when the agent ITSELF is in a state that needs\n// attention (authority expiring) or has failed (access revoked) — never to draw\n// attention to \"agent-ness\".\n//\n// The brand color (Sovereign Violet) is NEVER an AgentBadge fill — the brand is not\n// a status and not an actor-kind marker, so the family binds nothing from the action\n// tier. The verified-status green is reserved for the VerifiedBadge placed beside it,\n// never painted here, and \"agent\" is not the verified or signal status — so the only\n// status trios this badge ever reaches for are caution and critical (spec §3/§5/§8,\n// brand != state).\n//\n// Container fill: neutral AND each status paint the SAME one raised surface. The\n// status trio's `-bg` resolves to that same surface, so the agent's state is carried\n// by the fg (label + icon) and the border, never a saturated fill (spec §3/§5/§C).\n//\n// INHERITED TOKEN-TIER CONTRAST DEFECT — flag, do NOT mirror as AA-compliant.\n// The caution/critical bindings below are the spec §5 token table verbatim and an\n// exact mirror of the committed Badge template — they are CORRECT for this component\n// to bind, and the fix does NOT belong here. But on the one raised surface (where\n// every --color-status-*-bg resolves, identical to --color-surface-raised) the\n// saturated status fg/border colors, tuned for a stronger fill, fall below WCAG 2.2 AA\n// (measured against --color-surface-raised):\n//   caution  --color-status-caution-fg  / -border  -> 1.71:1\n//   critical --color-status-critical-fg / -border  -> 2.76:1\n// both far under the 4.5:1 text floor (1.4.3) for the 12px caption label and under\n// the 3:1 non-text bar (1.4.11) for the border. (--color-surface-border-muted on the\n// neutral variant is likewise ~2.55:1, under 3:1, but neutral is not status-bearing.)\n// This CONTRADICTS the frozen spec §7 claim that the label \"meets the AA text-contrast\n// floor and its border meets the 3:1 non-text bar\"; that claim is false for the status\n// variants and must not be treated as true. It is a SYSTEMIC token-tier problem\n// affecting every status-bearing Badge AND AgentBadge — the @verdify/tokens saturated\n// status fg/border values were designed for a stronger fill, not this near-white\n// surface — so the fix is at the token tier, not in this component. Neither lint:gates\n// nor the jest-axe sweep catches it (gates do not check contrast; jsdom resolves no\n// computed colors), so the measured ratios are pinned as a tripwire in\n// agent-badge.test.tsx. (Hex values are intentionally omitted here: the token-binding\n// gate's raw-hex matcher scans this comment.)\nexport const agentBadgeVariants = cva(\n  [\n    // shape / layout: a pill holding the optional icon + label at the small gap\n    \"inline-flex items-center gap-(--space-1) rounded-(--radius-full) border px-(--space-1)\",\n    // type ROLE — caption (spec §5); the label always reads on its own, so the\n    // human/agent distinction never rests on color or shape alone\n    \"text-caption font-medium\",\n    // global-first: never wrap (the marker stays a single self-contained chip)\n    \"whitespace-nowrap\",\n  ],\n  {\n    variants: {\n      // STRUCTURAL axis = spec §3 (the state of the agent the badge reports)\n      variant: {\n        // neutral (default): the standard agent marker — neutral surface, text, and\n        // border roles, no status color (spec §3)\n        neutral: \"bg-surface-raised border-surface-border-muted text-text-secondary\",\n        // caution: the agent itself needs attention (authority expiring, grant pending)\n        // — the matching status trio; bg is the neutral surface (spec §3)\n        caution: \"bg-status-caution-bg border-status-caution-border text-status-caution-fg\",\n        // critical: the agent itself failed or was revoked (access revoked, invalid\n        // credentials) — the matching status trio; bg is the neutral surface (spec §3)\n        critical: \"bg-status-critical-bg border-status-critical-border text-status-critical-fg\",\n      },\n    },\n    defaultVariants: { variant: \"neutral\" },\n  },\n);\n\n// The optional leading icon (spec §2): one small decorative glyph at the sm icon\n// role that reinforces the label. It inherits the variant fg via `currentColor`; the\n// label still carries the meaning if the icon is dropped, so meaning never rests on\n// color OR icon alone.\nexport const agentBadgeIconClass = \"inline-flex h-(--size-icon-sm) w-(--size-icon-sm) shrink-0\";\n\nexport type AgentBadgeVariantProps = VariantProps<typeof agentBadgeVariants>;\n"],"mappings":"AAAA,SAAS,WAA8B;AA+ChC,MAAM,qBAAqB;AAAA,EAChC;AAAA;AAAA,IAEE;AAAA;AAAA;AAAA,IAGA;AAAA;AAAA,IAEA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA;AAAA,MAER,SAAS;AAAA;AAAA;AAAA,QAGP,SAAS;AAAA;AAAA;AAAA,QAGT,SAAS;AAAA;AAAA;AAAA,QAGT,UAAU;AAAA,MACZ;AAAA,IACF;AAAA,IACA,iBAAiB,EAAE,SAAS,UAAU;AAAA,EACxC;AACF;AAMO,MAAM,sBAAsB;","names":[]}

package/dist/components/agent-badge/index.d.ts

@@ -0,0 +1,3 @@
+export { AgentBadge, type AgentBadgeProps, type AgentBadgeStatus } from "./agent-badge";
+export { agentBadgeVariants, agentBadgeIconClass, type AgentBadgeVariantProps, } from "./agent-badge.variants";
+//# sourceMappingURL=index.d.ts.map