@_linked/primitives 1.2.3 → 1.3.0

package/CHANGELOG.md

@@ -1,5 +1,44 @@
 # @\_linked/primitives
 
+## 1.3.0
+
+### Minor Changes
+
+- [#32](https://github.com/linked-fw/primitives/pull/32) [`ec82d1a`](https://github.com/linked-fw/primitives/commit/ec82d1abf39af62f8954f0cc4057dcd4ec7cabff) Thanks [@flyon](https://github.com/flyon)! - Widen the `as` and `color` prop unions so they describe what the components
+  actually render.
+
+  `Typography`, `Text` and `Heading` spread `as` straight into JSX, so every
+  intrinsic tag has always worked at runtime, but the types named four or six
+  tags each — `as="strong"`, `as="code"`, `as="small"` were type errors for
+  behaviour that works. They now take a shared, curated element union
+  (`TextElement` / `HeadingAsElement`, exported from `components/elements.js`)
+  covering phrasing and text-block elements. Void, interactive and SVG tags are
+  deliberately excluded: these components require `children` and type their props
+  as `HtmlHTMLAttributes<HTMLElement>`, so those tags could not be rendered
+  correctly anyway.
+
+  `Heading` gains an optional `level` prop. Its stylesheet keys off the tag
+  (`h1.Root`), so `<Heading as="p">` renders with no heading typography; `level`
+  applies a level's tokens to any tag. Omitting it changes nothing.
+
+  `Badge` gains `accent` and `secondary` colours, each with a real rule in
+  `Badge.module.css`, and the union is now the exported `BadgeColor` type.
+
+## 1.2.4
+
+### Patch Changes
+
+- [#30](https://github.com/linked-fw/primitives/pull/30) [`05edb14`](https://github.com/linked-fw/primitives/commit/05edb14ea7b7816883cd573751d0ba5398ab19c6) Thanks [@flyon](https://github.com/flyon)! - The ontology no longer registers by importing itself.
+
+  It carried `import * as _this from './<prefix>.js'` and passed that namespace to
+  `linkedOntology()`. Under `tsc` the self-reference survives; under a bundler it does
+  not — Rollup treats it as a circular import and elides it, so the binding is
+  `undefined` and a consuming app dies at boot with `_this is not defined`.
+
+  Registration now lives in a `<prefix>.register.ts` sibling, imported from the package
+  entry. Nothing changes for consumers: importing this package still registers the
+  ontology.
+
 ## 1.2.3
 
 ### Patch Changes

package/lib/cjs/components/Badge.d.ts

@@ -6,7 +6,8 @@ import * as React from 'react';
  * swap variation without new components —
  *
  *   variant  solid | soft | outline | ghost      fill strength
- *   color    neutral | primary | success | warning | danger | info
+ *   color    neutral | primary | accent | secondary |
+ *            success | warning | danger | info
  *   size     small | medium | large
  *   shape    pill | rounded
  *   dot      leading status dot in the badge color
@@ -17,10 +18,16 @@ import * as React from 'react';
  * variables with working fallbacks, so it renders sensibly out of the box and
  * apps re-skin it from their theme without touching the component.
  */
+/**
+ * Every colour here has a `--_badge-color` rule in Badge.module.css — the union
+ * and the stylesheet are one list, so a colour can never type-check its way to
+ * an unstyled badge.
+ */
+export type BadgeColor = 'neutral' | 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'danger' | 'info';
 export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
     asChild?: boolean;
     variant?: 'solid' | 'soft' | 'outline' | 'ghost';
-    color?: 'neutral' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
+    color?: BadgeColor;
     size?: 'small' | 'medium' | 'large';
     shape?: 'pill' | 'rounded';
     /** Leading status dot in the badge color. */

package/lib/cjs/components/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../src/components/Badge.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAE/B,0EAAuC;AACvC,gEAAqD;AACrD,qDAA4C;AA8B5C,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAC5B,CACE,EAUC,EACD,GAAG,EACH,EAAE;QAZF,EACE,SAAS,EACT,OAAO,GAAG,MAAM,EAChB,KAAK,GAAG,SAAS,EACjB,IAAI,GAAG,QAAQ,EACf,KAAK,GAAG,MAAM,EACd,GAAG,GAAG,KAAK,EACX,OAAO,GAAG,KAAK,EACf,QAAQ,OAET,EADI,KAAK,cATV,gFAUC,CADS;IAIV,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,iBAAI,CAAC,CAAC,CAAC,MAAM,CAAC;IAErC,OAAO,CACL,oBAAC,IAAI,kBACH,SAAS,EAAE,IAAA,eAAE,EACX,0BAAK,CAAC,IAAI,EACV,0BAAK,CAAC,OAAO,CAAC,EACd,0BAAK,CAAC,KAAK,CAAC,EACZ,0BAAK,CAAC,IAAI,CAAC,EACX,0BAAK,CAAC,KAAK,CAAC,EACZ,SAAS,CACV,EACD,GAAG,EAAE,GAAG,IACJ,KAAK,GAER,OAAO,CAAC,CAAC,CAAC,CACT,QAAQ,CACT,CAAC,CAAC,CAAC,CACF;QACG,GAAG,IAAI,8BAAM,SAAS,EAAE,0BAAK,CAAC,GAAG,wBAAgB;QACjD,QAAQ,CACR,CACJ,CACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAGO,sBAAK;AAFd,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC"}
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../src/components/Badge.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAE/B,0EAAuC;AACvC,gEAAqD;AACrD,qDAA4C;AA8C5C,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAC5B,CACE,EAUC,EACD,GAAG,EACH,EAAE;QAZF,EACE,SAAS,EACT,OAAO,GAAG,MAAM,EAChB,KAAK,GAAG,SAAS,EACjB,IAAI,GAAG,QAAQ,EACf,KAAK,GAAG,MAAM,EACd,GAAG,GAAG,KAAK,EACX,OAAO,GAAG,KAAK,EACf,QAAQ,OAET,EADI,KAAK,cATV,gFAUC,CADS;IAIV,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,iBAAI,CAAC,CAAC,CAAC,MAAM,CAAC;IAErC,OAAO,CACL,oBAAC,IAAI,kBACH,SAAS,EAAE,IAAA,eAAE,EACX,0BAAK,CAAC,IAAI,EACV,0BAAK,CAAC,OAAO,CAAC,EACd,0BAAK,CAAC,KAAK,CAAC,EACZ,0BAAK,CAAC,IAAI,CAAC,EACX,0BAAK,CAAC,KAAK,CAAC,EACZ,SAAS,CACV,EACD,GAAG,EAAE,GAAG,IACJ,KAAK,GAER,OAAO,CAAC,CAAC,CAAC,CACT,QAAQ,CACT,CAAC,CAAC,CAAC,CACF;QACG,GAAG,IAAI,8BAAM,SAAS,EAAE,0BAAK,CAAC,GAAG,wBAAgB;QACjD,QAAQ,CACR,CACJ,CACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAGO,sBAAK;AAFd,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC"}

package/lib/cjs/components/Badge.module.css

@@ -21,6 +21,8 @@
 /* ── color ─────────────────────────────────────────────────────────────── */
 .neutral { --_badge-color: var(--badge-color-neutral, #64748b); }
 .primary { --_badge-color: var(--badge-color-primary, var(--primary, #4f46e5)); }
+.secondary { --_badge-color: var(--badge-color-secondary, var(--secondary, #475569)); }
+.accent  { --_badge-color: var(--badge-color-accent, var(--control-accent, var(--primary, #4f46e5))); }
 .success { --_badge-color: var(--badge-color-success, #15803d); }
 .warning { --_badge-color: var(--badge-color-warning, #b45309); }
 .danger  { --_badge-color: var(--badge-color-danger, #b91c1c); }

package/lib/cjs/components/Heading.d.ts

@@ -1,7 +1,21 @@
 import * as React from 'react';
+import type { HeadingAsElement } from './elements.js';
 interface HeadingProps extends React.HtmlHTMLAttributes<HTMLElement> {
-    as: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    /**
+     * The tag to render. `h1`–`h6` pick up that level's heading tokens from the
+     * tag itself; any other container renders with no heading typography unless
+     * you also pass {@link HeadingProps.level}.
+     */
+    as: HeadingAsElement;
+    /**
+     * Visual heading level, independent of the tag. Use it when the heading is
+     * visual rather than semantic — a stat card's big number is a `p`, not an
+     * `h2`. Omitted, nothing is added: `as="h3"` styles as an h3 and `as="p"`
+     * stays unstyled, exactly as before.
+     */
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
     children: React.ReactNode;
 }
-declare const Heading: ({ as: Component, className, children, ...props }: HeadingProps) => React.JSX.Element;
+declare const Heading: ({ as: Component, level, className, children, ...props }: HeadingProps) => React.JSX.Element;
 export { Heading };
+export type { HeadingProps };

package/lib/cjs/components/Heading.js

@@ -52,8 +52,8 @@ const React = __importStar(require("react"));
 const Heading_module_css_1 = __importDefault(require("./Heading.module.css"));
 const ClassNames_1 = require("@_linked/react/utils/ClassNames");
 const Heading = (_a) => {
-    var { as: Component, className, children } = _a, props = __rest(_a, ["as", "className", "children"]);
-    const combinedClassName = (0, ClassNames_1.cl)(Heading_module_css_1.default.Root, className);
+    var { as: Component, level, className, children } = _a, props = __rest(_a, ["as", "level", "className", "children"]);
+    const combinedClassName = (0, ClassNames_1.cl)(Heading_module_css_1.default.Root, level ? Heading_module_css_1.default[`level${level}`] : undefined, className);
     return (React.createElement(Component, Object.assign({ className: combinedClassName }, props), children));
 };
 exports.Heading = Heading;

package/lib/cjs/components/Heading.js.map

@@ -1 +1 @@
-{"version":3,"file":"Heading.js","sourceRoot":"","sources":["../../../src/components/Heading.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAE/B,8EAAyC;AACzC,gEAAqD;AAMrD,MAAM,OAAO,GAAG,CAAC,EAKF,EAAE,EAAE;QALF,EACf,EAAE,EAAE,SAAS,EACb,SAAS,EACT,QAAQ,OAEK,EADV,KAAK,cAJO,+BAKhB,CADS;IAER,MAAM,iBAAiB,GAAG,IAAA,eAAE,EAAC,4BAAK,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IAEpD,OAAO,CACL,oBAAC,SAAS,kBAAC,SAAS,EAAE,iBAAiB,IAAM,KAAK,GAC/C,QAAQ,CACC,CACb,CAAC;AACJ,CAAC,CAAC;AAEO,0BAAO"}
+{"version":3,"file":"Heading.js","sourceRoot":"","sources":["../../../src/components/Heading.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAE/B,8EAAyC;AACzC,gEAAqD;AAmBrD,MAAM,OAAO,GAAG,CAAC,EAMF,EAAE,EAAE;QANF,EACf,EAAE,EAAE,SAAS,EACb,KAAK,EACL,SAAS,EACT,QAAQ,OAEK,EADV,KAAK,cALO,wCAMhB,CADS;IAER,MAAM,iBAAiB,GAAG,IAAA,eAAE,EAC1B,4BAAK,CAAC,IAAI,EACV,KAAK,CAAC,CAAC,CAAC,4BAAK,CAAC,QAAQ,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS,EAC1C,SAAS,CACV,CAAC;IAEF,OAAO,CACL,oBAAC,SAAS,kBAAC,SAAS,EAAE,iBAAiB,IAAM,KAAK,GAC/C,QAAQ,CACC,CACb,CAAC;AACJ,CAAC,CAAC;AAEO,0BAAO"}

package/lib/cjs/components/Heading.module.css

@@ -1,83 +1,81 @@
-h1 {
-  &.Root {
-    font-size: var(--heading-1-font-size);
-    font-family: var(--heading-1-font-family);
-    font-weight: var(--heading-1-font-weight);
-    line-height: var(--heading-1-line-height);
-    letter-spacing: var(--heading-1-letter-spacing);
-    color: var(--heading-1-color);
-    font-style: var(--heading-1-font-style);
-    margin-top: var(--heading-1-margin-top);
-    margin-bottom: var(--heading-1-margin-bottom);
-  }
+/* Two selectors per level: the tag itself (an `h2` is an h2, no extra props
+   needed) and an explicit `level` class for a heading that is visual rather
+   than semantic — `<Heading as="p" level={2}>` on a stat card. */
+
+h1.Root,
+.Root.level1 {
+  font-size: var(--heading-1-font-size);
+  font-family: var(--heading-1-font-family);
+  font-weight: var(--heading-1-font-weight);
+  line-height: var(--heading-1-line-height);
+  letter-spacing: var(--heading-1-letter-spacing);
+  color: var(--heading-1-color);
+  font-style: var(--heading-1-font-style);
+  margin-top: var(--heading-1-margin-top);
+  margin-bottom: var(--heading-1-margin-bottom);
 }
 
-h2 {
-  &.Root {
-    font-size: var(--heading-2-font-size);
-    font-family: var(--heading-2-font-family);
-    font-weight: var(--heading-2-font-weight);
-    line-height: var(--heading-2-line-height);
-    letter-spacing: var(--heading-2-letter-spacing);
-    color: var(--heading-2-color);
-    font-style: var(--heading-2-font-style);
-    margin-top: var(--heading-2-margin-top);
-    margin-bottom: var(--heading-2-margin-bottom);
-  }
+h2.Root,
+.Root.level2 {
+  font-size: var(--heading-2-font-size);
+  font-family: var(--heading-2-font-family);
+  font-weight: var(--heading-2-font-weight);
+  line-height: var(--heading-2-line-height);
+  letter-spacing: var(--heading-2-letter-spacing);
+  color: var(--heading-2-color);
+  font-style: var(--heading-2-font-style);
+  margin-top: var(--heading-2-margin-top);
+  margin-bottom: var(--heading-2-margin-bottom);
 }
 
-h3 {
-  &.Root {
-    font-size: var(--heading-3-font-size);
-    font-family: var(--heading-3-font-family);
-    font-weight: var(--heading-3-font-weight);
-    line-height: var(--heading-3-line-height);
-    letter-spacing: var(--heading-3-letter-spacing);
-    color: var(--heading-3-color);
-    font-style: var(--heading-3-font-style);
-    margin-top: var(--heading-3-margin-top);
-    margin-bottom: var(--heading-3-margin-bottom);
-  }
+h3.Root,
+.Root.level3 {
+  font-size: var(--heading-3-font-size);
+  font-family: var(--heading-3-font-family);
+  font-weight: var(--heading-3-font-weight);
+  line-height: var(--heading-3-line-height);
+  letter-spacing: var(--heading-3-letter-spacing);
+  color: var(--heading-3-color);
+  font-style: var(--heading-3-font-style);
+  margin-top: var(--heading-3-margin-top);
+  margin-bottom: var(--heading-3-margin-bottom);
 }
 
-h4 {
-  &.Root {
-    font-size: var(--heading-4-font-size);
-    font-family: var(--heading-4-font-family);
-    font-weight: var(--heading-4-font-weight);
-    line-height: var(--heading-4-line-height);
-    letter-spacing: var(--heading-4-letter-spacing);
-    color: var(--heading-4-color);
-    font-style: var(--heading-4-font-style);
-    margin-top: var(--heading-4-margin-top);
-    margin-bottom: var(--heading-4-margin-bottom);
-  }
+h4.Root,
+.Root.level4 {
+  font-size: var(--heading-4-font-size);
+  font-family: var(--heading-4-font-family);
+  font-weight: var(--heading-4-font-weight);
+  line-height: var(--heading-4-line-height);
+  letter-spacing: var(--heading-4-letter-spacing);
+  color: var(--heading-4-color);
+  font-style: var(--heading-4-font-style);
+  margin-top: var(--heading-4-margin-top);
+  margin-bottom: var(--heading-4-margin-bottom);
 }
 
-h5 {
-  &.Root {
-    font-size: var(--heading-5-font-size);
-    font-family: var(--heading-5-font-family);
-    font-weight: var(--heading-5-font-weight);
-    line-height: var(--heading-5-line-height);
-    letter-spacing: var(--heading-5-letter-spacing);
-    color: var(--heading-5-color);
-    font-style: var(--heading-5-font-style);
-    margin-top: var(--heading-5-margin-top);
-    margin-bottom: var(--heading-5-margin-bottom);
-  }
+h5.Root,
+.Root.level5 {
+  font-size: var(--heading-5-font-size);
+  font-family: var(--heading-5-font-family);
+  font-weight: var(--heading-5-font-weight);
+  line-height: var(--heading-5-line-height);
+  letter-spacing: var(--heading-5-letter-spacing);
+  color: var(--heading-5-color);
+  font-style: var(--heading-5-font-style);
+  margin-top: var(--heading-5-margin-top);
+  margin-bottom: var(--heading-5-margin-bottom);
 }
 
-h6 {
-  &.Root {
-    font-size: var(--heading-6-font-size);
-    font-family: var(--heading-6-font-family);
-    font-weight: var(--heading-6-font-weight);
-    line-height: var(--heading-6-line-height);
-    letter-spacing: var(--heading-6-letter-spacing);
-    color: var(--heading-6-color);
-    font-style: var(--heading-6-font-style);
-    margin-top: var(--heading-6-margin-top);
-    margin-bottom: var(--heading-6-margin-bottom);
-  }
+h6.Root,
+.Root.level6 {
+  font-size: var(--heading-6-font-size);
+  font-family: var(--heading-6-font-family);
+  font-weight: var(--heading-6-font-weight);
+  line-height: var(--heading-6-line-height);
+  letter-spacing: var(--heading-6-letter-spacing);
+  color: var(--heading-6-color);
+  font-style: var(--heading-6-font-style);
+  margin-top: var(--heading-6-margin-top);
+  margin-bottom: var(--heading-6-margin-bottom);
 }

package/lib/cjs/components/Text.d.ts

@@ -1,6 +1,8 @@
 import * as React from 'react';
+import type { TextElement } from './elements.js';
 interface TextProps extends React.HtmlHTMLAttributes<HTMLElement> {
-    as?: 'span' | 'label' | 'p' | 'div';
+    /** The tag to render — see {@link TextElement}. */
+    as?: TextElement;
     size?: 'small' | 'medium' | 'large' | 'default';
     children: React.ReactNode;
 }

package/lib/cjs/components/Text.js.map

@@ -1 +1 @@
-{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../../src/components/Text.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAE/B,wEAAsC;AACtC,gEAAqD;AAOrD,MAAM,IAAI,GAAG,CAAC,EAKF,EAAE,EAAE;QALF,EACZ,EAAE,EAAE,SAAS,GAAG,GAAG,EACnB,IAAI,GAAG,SAAS,EAChB,QAAQ,OAEE,EADP,KAAK,cAJI,0BAKb,CADS;IAER,OAAO,CACL,oBAAC,SAAS,kBAAC,SAAS,EAAE,IAAA,eAAE,EAAC,yBAAK,CAAC,IAAI,EAAE,yBAAK,CAAC,IAAI,CAAC,CAAC,IAAM,KAAK,GACzD,QAAQ,CACC,CACb,CAAC;AACJ,CAAC,CAAC;AAEO,oBAAI"}
+{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../../src/components/Text.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAE/B,wEAAsC;AACtC,gEAAqD;AASrD,MAAM,IAAI,GAAG,CAAC,EAKF,EAAE,EAAE;QALF,EACZ,EAAE,EAAE,SAAS,GAAG,GAAG,EACnB,IAAI,GAAG,SAAS,EAChB,QAAQ,OAEE,EADP,KAAK,cAJI,0BAKb,CADS;IAER,OAAO,CACL,oBAAC,SAAS,kBAAC,SAAS,EAAE,IAAA,eAAE,EAAC,yBAAK,CAAC,IAAI,EAAE,yBAAK,CAAC,IAAI,CAAC,CAAC,IAAM,KAAK,GACzD,QAAQ,CACC,CACb,CAAC;AACJ,CAAC,CAAC;AAEO,oBAAI"}

package/lib/cjs/components/Typography.d.ts

@@ -1,6 +1,12 @@
 import * as React from 'react';
+import type { TextElement } from './elements.js';
 interface TypographyProps extends React.HtmlHTMLAttributes<HTMLElement> {
-    as?: 'span' | 'label' | 'p' | 'div';
+    /**
+     * The tag to render. Spread straight into JSX and styled tag-agnostically, so
+     * every element in {@link TextElement} renders correctly — see `elements.ts`
+     * for why this is a curated list and not every intrinsic element.
+     */
+    as?: TextElement;
     size?: 'small' | 'medium' | 'large' | 'default';
     children: React.ReactNode;
 }

package/lib/cjs/components/Typography.js.map

@@ -1 +1 @@
-{"version":3,"file":"Typography.js","sourceRoot":"","sources":["../../../src/components/Typography.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAE/B,oFAA4C;AAC5C,gEAAqD;AAOrD,MAAM,UAAU,GAAG,CAAC,EAMF,EAAE,EAAE;QANF,EAClB,EAAE,EAAE,SAAS,GAAG,GAAG,EACnB,IAAI,GAAG,SAAS,EAChB,SAAS,EACT,QAAQ,OAEQ,EADb,KAAK,cALU,uCAMnB,CADS;IAER,MAAM,iBAAiB,GAAG,IAAA,eAAE,EAAC,+BAAK,CAAC,IAAI,EAAE,+BAAK,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC,CAAC;IAEjE,OAAO,CACL,oBAAC,SAAS,kBAAC,SAAS,EAAE,iBAAiB,IAAM,KAAK,GAC/C,QAAQ,CACC,CACb,CAAC;AACJ,CAAC,CAAC;AAEO,gCAAU"}
+{"version":3,"file":"Typography.js","sourceRoot":"","sources":["../../../src/components/Typography.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAE/B,oFAA4C;AAC5C,gEAAqD;AAarD,MAAM,UAAU,GAAG,CAAC,EAMF,EAAE,EAAE;QANF,EAClB,EAAE,EAAE,SAAS,GAAG,GAAG,EACnB,IAAI,GAAG,SAAS,EAChB,SAAS,EACT,QAAQ,OAEQ,EADb,KAAK,cALU,uCAMnB,CADS;IAER,MAAM,iBAAiB,GAAG,IAAA,eAAE,EAAC,+BAAK,CAAC,IAAI,EAAE,+BAAK,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC,CAAC;IAEjE,OAAO,CACL,oBAAC,SAAS,kBAAC,SAAS,EAAE,iBAAiB,IAAM,KAAK,GAC/C,QAAQ,CACC,CACb,CAAC;AACJ,CAAC,CAAC;AAEO,gCAAU"}

package/lib/cjs/components/elements.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Element unions for the `as` prop of the typographic primitives.
+ *
+ * These components spread `as` straight into JSX, so at runtime *any* intrinsic
+ * tag works. The types used to name a handful of tags each, which made ordinary
+ * usage (`as="strong"`, `as="code"`, `as="small"`) a type error for behaviour
+ * that has always worked.
+ *
+ * We deliberately do NOT use `keyof React.JSX.IntrinsicElements`:
+ *
+ *  - these components take required `children`, and React throws at runtime for
+ *    a void element with children (`<input>`, `<img>`, `<br>`, `<hr>`…), so the
+ *    full key set would type-check code that crashes;
+ *  - their props are `React.HtmlHTMLAttributes<HTMLElement>`, which cannot carry
+ *    element-specific attributes (`href`, `type`, `value`), so interactive and
+ *    form tags would be offered without the attributes that make them useful;
+ *  - `svg`/`math` and the SVG child tags take a different attribute namespace
+ *    entirely.
+ *
+ * What is left — every HTML element that holds phrasing or flow content and is
+ * styled purely by the component's own class — is exactly the set below. It is
+ * wide enough that drift is unlikely, and honest about what the component can
+ * actually render.
+ */
+/** Inline (phrasing) elements: text-level semantics. */
+export type PhrasingElement = 'span' | 'label' | 'strong' | 'em' | 'b' | 'i' | 'u' | 's' | 'small' | 'mark' | 'code' | 'kbd' | 'samp' | 'var' | 'sub' | 'sup' | 'abbr' | 'cite' | 'dfn' | 'q' | 'time' | 'data' | 'del' | 'ins' | 'bdi' | 'bdo' | 'output' | 'ruby' | 'rt' | 'rp';
+/** Block-level containers that hold text. */
+export type TextBlockElement = 'p' | 'div' | 'pre' | 'blockquote' | 'address' | 'figcaption' | 'caption' | 'legend' | 'summary' | 'li' | 'dt' | 'dd' | 'td' | 'th';
+/** The six HTML heading levels. */
+export type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+/**
+ * Anything `Typography` / `Text` can render: inline text, a text block, or a
+ * heading tag (a caption-styled heading is a normal thing to want).
+ */
+export type TextElement = PhrasingElement | TextBlockElement | HeadingElement;
+/**
+ * Anything `Heading` can render. A heading is often visual rather than
+ * semantic — a stat card's big number is a `p`, not an `h2` — so the non-heading
+ * containers are allowed too. See `Heading`'s `level` prop for the styling that
+ * goes with them.
+ */
+export type HeadingAsElement = HeadingElement | TextBlockElement | PhrasingElement;

package/lib/cjs/components/elements.js

@@ -0,0 +1,27 @@
+"use strict";
+/**
+ * Element unions for the `as` prop of the typographic primitives.
+ *
+ * These components spread `as` straight into JSX, so at runtime *any* intrinsic
+ * tag works. The types used to name a handful of tags each, which made ordinary
+ * usage (`as="strong"`, `as="code"`, `as="small"`) a type error for behaviour
+ * that has always worked.
+ *
+ * We deliberately do NOT use `keyof React.JSX.IntrinsicElements`:
+ *
+ *  - these components take required `children`, and React throws at runtime for
+ *    a void element with children (`<input>`, `<img>`, `<br>`, `<hr>`…), so the
+ *    full key set would type-check code that crashes;
+ *  - their props are `React.HtmlHTMLAttributes<HTMLElement>`, which cannot carry
+ *    element-specific attributes (`href`, `type`, `value`), so interactive and
+ *    form tags would be offered without the attributes that make them useful;
+ *  - `svg`/`math` and the SVG child tags take a different attribute namespace
+ *    entirely.
+ *
+ * What is left — every HTML element that holds phrasing or flow content and is
+ * styled purely by the component's own class — is exactly the set below. It is
+ * wide enough that drift is unlikely, and honest about what the component can
+ * actually render.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=elements.js.map

package/lib/cjs/components/elements.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"elements.js","sourceRoot":"","sources":["../../../src/components/elements.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG"}

package/lib/cjs/index.d.ts

@@ -1,6 +1,6 @@
 import './theme.css';
 import './types.js';
-import './ontologies/primitives.js';
+import './ontologies/primitives.register.js';
 import './components/Badge.js';
 import './components/Button.js';
 import './components/Input.js';

package/lib/cjs/index.js

@@ -16,7 +16,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 require("./theme.css");
 require("./types.js");
-require("./ontologies/primitives.js");
+require("./ontologies/primitives.register.js");
 //SHAPES FIRST
 // import './shapes/YourShape.js';
 //THEN COMPONENTS

package/lib/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,uBAAqB;AACrB,sBAAoB;AACpB,sCAAoC;AAEpC,cAAc;AACd,kCAAkC;AAElC,iBAAiB;AACjB,iCAA+B;AAC/B,kCAAgC;AAChC,iCAA+B;AAC/B,gCAA8B;AAC9B,kCAAgC;AAChC,oCAAkC;AAClC,sCAAoC;AACpC,kCAAgC;AAChC,iCAA+B;AAC/B,qCAAmC;AACnC,kCAAgC;AAChC,uCAAqC;AACrC,oCAAkC;AAClC,qCAAmC;AACnC,qCAAmC;AACnC,uCAAqC;AACrC,sCAAoC;AACpC,gCAA8B;AAC9B,mCAAiC;AACjC,uCAAqC;AACrC,kCAAgC;AAChC,sCAAoC;AACpC,mCAAiC;AACjC,mCAAiC;AACjC,kCAAgC;AAChC,uCAAqC;AACrC,kCAAgC;AAChC,iCAA+B;AAC/B,mCAAiC;AACjC,oCAAkC;AAClC,0CAAwC;AACxC,mCAAiC;AACjC,uCAAqC;AACrC,mCAAiC;AACjC,yCAAuC;AACvC,0CAAwC;AACxC,sCAAoC;AACpC,yCAAuC;AACvC,sCAAoC;AACpC,kCAAgC;AAChC,sCAAoC;AACpC,wCAAsC;AACtC,uCAAqC;AACrC,gCAA8B;AAC9B,mCAAiC;AACjC,0CAAwC;AAExC,gCAA8B;AAE9B,uFAAuF;AACvF,qEAAqE;AACrE,8CAA4B"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,uBAAqB;AACrB,sBAAoB;AACpB,+CAA6C;AAE7C,cAAc;AACd,kCAAkC;AAElC,iBAAiB;AACjB,iCAA+B;AAC/B,kCAAgC;AAChC,iCAA+B;AAC/B,gCAA8B;AAC9B,kCAAgC;AAChC,oCAAkC;AAClC,sCAAoC;AACpC,kCAAgC;AAChC,iCAA+B;AAC/B,qCAAmC;AACnC,kCAAgC;AAChC,uCAAqC;AACrC,oCAAkC;AAClC,qCAAmC;AACnC,qCAAmC;AACnC,uCAAqC;AACrC,sCAAoC;AACpC,gCAA8B;AAC9B,mCAAiC;AACjC,uCAAqC;AACrC,kCAAgC;AAChC,sCAAoC;AACpC,mCAAiC;AACjC,mCAAiC;AACjC,kCAAgC;AAChC,uCAAqC;AACrC,kCAAgC;AAChC,iCAA+B;AAC/B,mCAAiC;AACjC,oCAAkC;AAClC,0CAAwC;AACxC,mCAAiC;AACjC,uCAAqC;AACrC,mCAAiC;AACjC,yCAAuC;AACvC,0CAAwC;AACxC,sCAAoC;AACpC,yCAAuC;AACvC,sCAAoC;AACpC,kCAAgC;AAChC,sCAAoC;AACpC,wCAAsC;AACtC,uCAAqC;AACrC,gCAA8B;AAC9B,mCAAiC;AACjC,0CAAwC;AAExC,gCAA8B;AAE9B,uFAAuF;AACvF,qEAAqE;AACrE,8CAA4B"}

package/lib/cjs/ontologies/primitives.d.ts

@@ -8,8 +8,8 @@ export declare const loadData: () => Promise<{
     };
     "@graph": any[];
 }>;
-export declare const ns: (term: string) => import("@_linked/core/utils/NodeReference.js").NodeReferenceValue;
-export declare const _self: import("@_linked/core/utils/NodeReference.js").NodeReferenceValue;
+export declare const ns: (term: string) => import("@_linked/core/utils/NodeReference").NodeReferenceValue;
+export declare const _self: import("@_linked/core/utils/NodeReference").NodeReferenceValue;
 export declare const radix: {
-    _self: import("@_linked/core/utils/NodeReference.js").NodeReferenceValue;
+    _self: import("@_linked/core/utils/NodeReference").NodeReferenceValue;
 };

package/lib/cjs/ontologies/primitives.js

@@ -36,8 +36,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.radix = exports._self = exports.ns = exports.loadData = void 0;
 const Prefix_1 = require("@_linked/core/utils/Prefix");
 const NameSpace_1 = require("@_linked/core/utils/NameSpace");
-const package_js_1 = require("../package.js");
-const _this = __importStar(require("./primitives.js"));
 const dataFile = '../data/primitives.json';
 const base = 'http://lincd.org/ont/radix/';
 Prefix_1.Prefix.add('radix', base);
@@ -51,5 +49,4 @@ exports._self = (0, exports.ns)('');
 exports.radix = {
     _self: exports._self,
 };
-(0, package_js_1.linkedOntology)(_this, exports.ns, 'radix', exports.loadData, dataFile);
 //# sourceMappingURL=primitives.js.map

package/lib/cjs/ontologies/primitives.js.map

@@ -1 +1 @@
-{"version":3,"file":"primitives.js","sourceRoot":"","sources":["../../../src/ontologies/primitives.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,uDAAoD;AACpD,6DAAgE;AAChE,8CAA+C;AAC/C,uDAAyC;AAEzC,MAAM,QAAQ,GAAG,yBAAyB,CAAC;AAC3C,MAAM,IAAI,GAAG,6BAA6B,CAAC;AAE3C,eAAM,CAAC,GAAG,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;AAEnB,MAAM,QAAQ,GAAG,GAAG,EAAE;IAC3B,YAAY;IACZ,OAAO,kDAAO,yBAAyB,IAEpC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;AAClC,CAAC,CAAC;AALW,QAAA,QAAQ,YAKnB;AAEW,QAAA,EAAE,GAAG,IAAA,2BAAe,EAAC,IAAI,CAAC,CAAC;AAC3B,QAAA,KAAK,GAAG,IAAA,UAAE,EAAC,EAAE,CAAC,CAAC;AAEf,QAAA,KAAK,GAAG;IACnB,KAAK,EAAL,aAAK;CACN,CAAC;AAEF,IAAA,2BAAc,EAAC,KAAK,EAAE,UAAE,EAAE,OAAO,EAAE,gBAAQ,EAAE,QAAQ,CAAC,CAAC"}
+{"version":3,"file":"primitives.js","sourceRoot":"","sources":["../../../src/ontologies/primitives.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,uDAAoD;AACpD,6DAAgE;AAEhE,MAAM,QAAQ,GAAG,yBAAyB,CAAC;AAC3C,MAAM,IAAI,GAAG,6BAA6B,CAAC;AAE3C,eAAM,CAAC,GAAG,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;AAEnB,MAAM,QAAQ,GAAG,GAAG,EAAE;IAC3B,YAAY;IACZ,OAAO,kDAAO,yBAAyB,IAEpC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;AAClC,CAAC,CAAC;AALW,QAAA,QAAQ,YAKnB;AAEW,QAAA,EAAE,GAAG,IAAA,2BAAe,EAAC,IAAI,CAAC,CAAC;AAC3B,QAAA,KAAK,GAAG,IAAA,UAAE,EAAC,EAAE,CAAC,CAAC;AAEf,QAAA,KAAK,GAAG;IACnB,KAAK,EAAL,aAAK;CACN,CAAC"}

package/lib/cjs/ontologies/primitives.register.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/cjs/ontologies/primitives.register.js

@@ -0,0 +1,52 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Registers this ontology.
+ *
+ * Kept out of `primitives.ts` because registration needs that module's whole export
+ * namespace, and a module cannot import itself once a bundler is involved: Rollup
+ * treats a static self-reference as a circular import and elides it, so the binding is
+ * undefined at runtime and the consuming app dies at boot with `_this is not
+ * defined`. `tsc` preserves it, which is why the pattern survived for as long as
+ * packages were built with `tsc` alone.
+ *
+ * From a sibling module the same import is ordinary and survives.
+ */
+const terms = __importStar(require("./primitives.js"));
+const primitives_js_1 = require("./primitives.js");
+const package_js_1 = require("../package.js");
+(0, package_js_1.linkedOntology)(terms, primitives_js_1.ns, 'radix', primitives_js_1.loadData, '../data/primitives.json');
+//# sourceMappingURL=primitives.register.js.map

package/lib/cjs/ontologies/primitives.register.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"primitives.register.js","sourceRoot":"","sources":["../../../src/ontologies/primitives.register.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;GAWG;AACH,uDAAyC;AACzC,mDAA6C;AAC7C,8CAA6C;AAE7C,IAAA,2BAAc,EAAC,KAAK,EAAE,kBAAE,EAAE,OAAO,EAAE,wBAAQ,EAAE,yBAAyB,CAAC,CAAC"}

package/lib/cjs/package.json

@@ -10,7 +10,7 @@
     "type": "git",
     "url": "git+https://github.com/linked-fw/primitives.git"
   },
-  "version": "1.2.3",
+  "version": "1.3.0",
   "packageManager": "npm@11.19.1",
   "linkedPackage": true,
   "license": "ISC",

package/lib/esm/components/Badge.d.ts

@@ -6,7 +6,8 @@ import * as React from 'react';
  * swap variation without new components —
  *
  *   variant  solid | soft | outline | ghost      fill strength
- *   color    neutral | primary | success | warning | danger | info
+ *   color    neutral | primary | accent | secondary |
+ *            success | warning | danger | info
  *   size     small | medium | large
  *   shape    pill | rounded
  *   dot      leading status dot in the badge color
@@ -17,10 +18,16 @@ import * as React from 'react';
  * variables with working fallbacks, so it renders sensibly out of the box and
  * apps re-skin it from their theme without touching the component.
  */
+/**
+ * Every colour here has a `--_badge-color` rule in Badge.module.css — the union
+ * and the stylesheet are one list, so a colour can never type-check its way to
+ * an unstyled badge.
+ */
+export type BadgeColor = 'neutral' | 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'danger' | 'info';
 export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
     asChild?: boolean;
     variant?: 'solid' | 'soft' | 'outline' | 'ghost';
-    color?: 'neutral' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
+    color?: BadgeColor;
     size?: 'small' | 'medium' | 'large';
     shape?: 'pill' | 'rounded';
     /** Leading status dot in the badge color. */

package/lib/esm/components/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../src/components/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,MAAM,oBAAoB,CAAC;AACvC,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AA8B5C,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAC5B,CACE,EACE,SAAS,EACT,OAAO,GAAG,MAAM,EAChB,KAAK,GAAG,SAAS,EACjB,IAAI,GAAG,QAAQ,EACf,KAAK,GAAG,MAAM,EACd,GAAG,GAAG,KAAK,EACX,OAAO,GAAG,KAAK,EACf,QAAQ,EACR,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC;IAErC,OAAO,CACL,oBAAC,IAAI,IACH,SAAS,EAAE,EAAE,CACX,KAAK,CAAC,IAAI,EACV,KAAK,CAAC,OAAO,CAAC,EACd,KAAK,CAAC,KAAK,CAAC,EACZ,KAAK,CAAC,IAAI,CAAC,EACX,KAAK,CAAC,KAAK,CAAC,EACZ,SAAS,CACV,EACD,GAAG,EAAE,GAAG,KACJ,KAAK,IAER,OAAO,CAAC,CAAC,CAAC,CACT,QAAQ,CACT,CAAC,CAAC,CAAC,CACF;QACG,GAAG,IAAI,8BAAM,SAAS,EAAE,KAAK,CAAC,GAAG,wBAAgB;QACjD,QAAQ,CACR,CACJ,CACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AACF,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC;AAE5B,OAAO,EAAE,KAAK,EAAE,CAAC"}
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../src/components/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,MAAM,oBAAoB,CAAC;AACvC,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AA8C5C,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAC5B,CACE,EACE,SAAS,EACT,OAAO,GAAG,MAAM,EAChB,KAAK,GAAG,SAAS,EACjB,IAAI,GAAG,QAAQ,EACf,KAAK,GAAG,MAAM,EACd,GAAG,GAAG,KAAK,EACX,OAAO,GAAG,KAAK,EACf,QAAQ,EACR,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC;IAErC,OAAO,CACL,oBAAC,IAAI,IACH,SAAS,EAAE,EAAE,CACX,KAAK,CAAC,IAAI,EACV,KAAK,CAAC,OAAO,CAAC,EACd,KAAK,CAAC,KAAK,CAAC,EACZ,KAAK,CAAC,IAAI,CAAC,EACX,KAAK,CAAC,KAAK,CAAC,EACZ,SAAS,CACV,EACD,GAAG,EAAE,GAAG,KACJ,KAAK,IAER,OAAO,CAAC,CAAC,CAAC,CACT,QAAQ,CACT,CAAC,CAAC,CAAC,CACF;QACG,GAAG,IAAI,8BAAM,SAAS,EAAE,KAAK,CAAC,GAAG,wBAAgB;QACjD,QAAQ,CACR,CACJ,CACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AACF,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC;AAE5B,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/lib/esm/components/Badge.module.css

@@ -21,6 +21,8 @@
 /* ── color ─────────────────────────────────────────────────────────────── */
 .neutral { --_badge-color: var(--badge-color-neutral, #64748b); }
 .primary { --_badge-color: var(--badge-color-primary, var(--primary, #4f46e5)); }
+.secondary { --_badge-color: var(--badge-color-secondary, var(--secondary, #475569)); }
+.accent  { --_badge-color: var(--badge-color-accent, var(--control-accent, var(--primary, #4f46e5))); }
 .success { --_badge-color: var(--badge-color-success, #15803d); }
 .warning { --_badge-color: var(--badge-color-warning, #b45309); }
 .danger  { --_badge-color: var(--badge-color-danger, #b91c1c); }

package/lib/esm/components/Heading.d.ts

@@ -1,7 +1,21 @@
 import * as React from 'react';
+import type { HeadingAsElement } from './elements.js';
 interface HeadingProps extends React.HtmlHTMLAttributes<HTMLElement> {
-    as: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    /**
+     * The tag to render. `h1`–`h6` pick up that level's heading tokens from the
+     * tag itself; any other container renders with no heading typography unless
+     * you also pass {@link HeadingProps.level}.
+     */
+    as: HeadingAsElement;
+    /**
+     * Visual heading level, independent of the tag. Use it when the heading is
+     * visual rather than semantic — a stat card's big number is a `p`, not an
+     * `h2`. Omitted, nothing is added: `as="h3"` styles as an h3 and `as="p"`
+     * stays unstyled, exactly as before.
+     */
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
     children: React.ReactNode;
 }
-declare const Heading: ({ as: Component, className, children, ...props }: HeadingProps) => React.JSX.Element;
+declare const Heading: ({ as: Component, level, className, children, ...props }: HeadingProps) => React.JSX.Element;
 export { Heading };
+export type { HeadingProps };

package/lib/esm/components/Heading.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import style from './Heading.module.css';
 import { cl } from '@_linked/react/utils/ClassNames';
-const Heading = ({ as: Component, className, children, ...props }) => {
-    const combinedClassName = cl(style.Root, className);
+const Heading = ({ as: Component, level, className, children, ...props }) => {
+    const combinedClassName = cl(style.Root, level ? style[`level${level}`] : undefined, className);
     return (React.createElement(Component, { className: combinedClassName, ...props }, children));
 };
 export { Heading };

package/lib/esm/components/Heading.js.map

@@ -1 +1 @@
-{"version":3,"file":"Heading.js","sourceRoot":"","sources":["../../../src/components/Heading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,MAAM,sBAAsB,CAAC;AACzC,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AAMrD,MAAM,OAAO,GAAG,CAAC,EACf,EAAE,EAAE,SAAS,EACb,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACK,EAAE,EAAE;IACjB,MAAM,iBAAiB,GAAG,EAAE,CAAC,KAAK,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IAEpD,OAAO,CACL,oBAAC,SAAS,IAAC,SAAS,EAAE,iBAAiB,KAAM,KAAK,IAC/C,QAAQ,CACC,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,CAAC"}
+{"version":3,"file":"Heading.js","sourceRoot":"","sources":["../../../src/components/Heading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,MAAM,sBAAsB,CAAC;AACzC,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AAmBrD,MAAM,OAAO,GAAG,CAAC,EACf,EAAE,EAAE,SAAS,EACb,KAAK,EACL,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACK,EAAE,EAAE;IACjB,MAAM,iBAAiB,GAAG,EAAE,CAC1B,KAAK,CAAC,IAAI,EACV,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS,EAC1C,SAAS,CACV,CAAC;IAEF,OAAO,CACL,oBAAC,SAAS,IAAC,SAAS,EAAE,iBAAiB,KAAM,KAAK,IAC/C,QAAQ,CACC,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/lib/esm/components/Heading.module.css

@@ -1,83 +1,81 @@
-h1 {
-  &.Root {
-    font-size: var(--heading-1-font-size);
-    font-family: var(--heading-1-font-family);
-    font-weight: var(--heading-1-font-weight);
-    line-height: var(--heading-1-line-height);
-    letter-spacing: var(--heading-1-letter-spacing);
-    color: var(--heading-1-color);
-    font-style: var(--heading-1-font-style);
-    margin-top: var(--heading-1-margin-top);
-    margin-bottom: var(--heading-1-margin-bottom);
-  }
+/* Two selectors per level: the tag itself (an `h2` is an h2, no extra props
+   needed) and an explicit `level` class for a heading that is visual rather
+   than semantic — `<Heading as="p" level={2}>` on a stat card. */
+
+h1.Root,
+.Root.level1 {
+  font-size: var(--heading-1-font-size);
+  font-family: var(--heading-1-font-family);
+  font-weight: var(--heading-1-font-weight);
+  line-height: var(--heading-1-line-height);
+  letter-spacing: var(--heading-1-letter-spacing);
+  color: var(--heading-1-color);
+  font-style: var(--heading-1-font-style);
+  margin-top: var(--heading-1-margin-top);
+  margin-bottom: var(--heading-1-margin-bottom);
 }
 
-h2 {
-  &.Root {
-    font-size: var(--heading-2-font-size);
-    font-family: var(--heading-2-font-family);
-    font-weight: var(--heading-2-font-weight);
-    line-height: var(--heading-2-line-height);
-    letter-spacing: var(--heading-2-letter-spacing);
-    color: var(--heading-2-color);
-    font-style: var(--heading-2-font-style);
-    margin-top: var(--heading-2-margin-top);
-    margin-bottom: var(--heading-2-margin-bottom);
-  }
+h2.Root,
+.Root.level2 {
+  font-size: var(--heading-2-font-size);
+  font-family: var(--heading-2-font-family);
+  font-weight: var(--heading-2-font-weight);
+  line-height: var(--heading-2-line-height);
+  letter-spacing: var(--heading-2-letter-spacing);
+  color: var(--heading-2-color);
+  font-style: var(--heading-2-font-style);
+  margin-top: var(--heading-2-margin-top);
+  margin-bottom: var(--heading-2-margin-bottom);
 }
 
-h3 {
-  &.Root {
-    font-size: var(--heading-3-font-size);
-    font-family: var(--heading-3-font-family);
-    font-weight: var(--heading-3-font-weight);
-    line-height: var(--heading-3-line-height);
-    letter-spacing: var(--heading-3-letter-spacing);
-    color: var(--heading-3-color);
-    font-style: var(--heading-3-font-style);
-    margin-top: var(--heading-3-margin-top);
-    margin-bottom: var(--heading-3-margin-bottom);
-  }
+h3.Root,
+.Root.level3 {
+  font-size: var(--heading-3-font-size);
+  font-family: var(--heading-3-font-family);
+  font-weight: var(--heading-3-font-weight);
+  line-height: var(--heading-3-line-height);
+  letter-spacing: var(--heading-3-letter-spacing);
+  color: var(--heading-3-color);
+  font-style: var(--heading-3-font-style);
+  margin-top: var(--heading-3-margin-top);
+  margin-bottom: var(--heading-3-margin-bottom);
 }
 
-h4 {
-  &.Root {
-    font-size: var(--heading-4-font-size);
-    font-family: var(--heading-4-font-family);
-    font-weight: var(--heading-4-font-weight);
-    line-height: var(--heading-4-line-height);
-    letter-spacing: var(--heading-4-letter-spacing);
-    color: var(--heading-4-color);
-    font-style: var(--heading-4-font-style);
-    margin-top: var(--heading-4-margin-top);
-    margin-bottom: var(--heading-4-margin-bottom);
-  }
+h4.Root,
+.Root.level4 {
+  font-size: var(--heading-4-font-size);
+  font-family: var(--heading-4-font-family);
+  font-weight: var(--heading-4-font-weight);
+  line-height: var(--heading-4-line-height);
+  letter-spacing: var(--heading-4-letter-spacing);
+  color: var(--heading-4-color);
+  font-style: var(--heading-4-font-style);
+  margin-top: var(--heading-4-margin-top);
+  margin-bottom: var(--heading-4-margin-bottom);
 }
 
-h5 {
-  &.Root {
-    font-size: var(--heading-5-font-size);
-    font-family: var(--heading-5-font-family);
-    font-weight: var(--heading-5-font-weight);
-    line-height: var(--heading-5-line-height);
-    letter-spacing: var(--heading-5-letter-spacing);
-    color: var(--heading-5-color);
-    font-style: var(--heading-5-font-style);
-    margin-top: var(--heading-5-margin-top);
-    margin-bottom: var(--heading-5-margin-bottom);
-  }
+h5.Root,
+.Root.level5 {
+  font-size: var(--heading-5-font-size);
+  font-family: var(--heading-5-font-family);
+  font-weight: var(--heading-5-font-weight);
+  line-height: var(--heading-5-line-height);
+  letter-spacing: var(--heading-5-letter-spacing);
+  color: var(--heading-5-color);
+  font-style: var(--heading-5-font-style);
+  margin-top: var(--heading-5-margin-top);
+  margin-bottom: var(--heading-5-margin-bottom);
 }
 
-h6 {
-  &.Root {
-    font-size: var(--heading-6-font-size);
-    font-family: var(--heading-6-font-family);
-    font-weight: var(--heading-6-font-weight);
-    line-height: var(--heading-6-line-height);
-    letter-spacing: var(--heading-6-letter-spacing);
-    color: var(--heading-6-color);
-    font-style: var(--heading-6-font-style);
-    margin-top: var(--heading-6-margin-top);
-    margin-bottom: var(--heading-6-margin-bottom);
-  }
+h6.Root,
+.Root.level6 {
+  font-size: var(--heading-6-font-size);
+  font-family: var(--heading-6-font-family);
+  font-weight: var(--heading-6-font-weight);
+  line-height: var(--heading-6-line-height);
+  letter-spacing: var(--heading-6-letter-spacing);
+  color: var(--heading-6-color);
+  font-style: var(--heading-6-font-style);
+  margin-top: var(--heading-6-margin-top);
+  margin-bottom: var(--heading-6-margin-bottom);
 }

package/lib/esm/components/Text.d.ts

@@ -1,6 +1,8 @@
 import * as React from 'react';
+import type { TextElement } from './elements.js';
 interface TextProps extends React.HtmlHTMLAttributes<HTMLElement> {
-    as?: 'span' | 'label' | 'p' | 'div';
+    /** The tag to render — see {@link TextElement}. */
+    as?: TextElement;
     size?: 'small' | 'medium' | 'large' | 'default';
     children: React.ReactNode;
 }

package/lib/esm/components/Text.js.map

@@ -1 +1 @@
-{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../../src/components/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,MAAM,mBAAmB,CAAC;AACtC,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AAOrD,MAAM,IAAI,GAAG,CAAC,EACZ,EAAE,EAAE,SAAS,GAAG,GAAG,EACnB,IAAI,GAAG,SAAS,EAChB,QAAQ,EACR,GAAG,KAAK,EACE,EAAE,EAAE;IACd,OAAO,CACL,oBAAC,SAAS,IAAC,SAAS,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,KAAM,KAAK,IACzD,QAAQ,CACC,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,CAAC"}
+{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../../src/components/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,MAAM,mBAAmB,CAAC;AACtC,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AASrD,MAAM,IAAI,GAAG,CAAC,EACZ,EAAE,EAAE,SAAS,GAAG,GAAG,EACnB,IAAI,GAAG,SAAS,EAChB,QAAQ,EACR,GAAG,KAAK,EACE,EAAE,EAAE;IACd,OAAO,CACL,oBAAC,SAAS,IAAC,SAAS,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,KAAM,KAAK,IACzD,QAAQ,CACC,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/lib/esm/components/Typography.d.ts

@@ -1,6 +1,12 @@
 import * as React from 'react';
+import type { TextElement } from './elements.js';
 interface TypographyProps extends React.HtmlHTMLAttributes<HTMLElement> {
-    as?: 'span' | 'label' | 'p' | 'div';
+    /**
+     * The tag to render. Spread straight into JSX and styled tag-agnostically, so
+     * every element in {@link TextElement} renders correctly — see `elements.ts`
+     * for why this is a curated list and not every intrinsic element.
+     */
+    as?: TextElement;
     size?: 'small' | 'medium' | 'large' | 'default';
     children: React.ReactNode;
 }

package/lib/esm/components/Typography.js.map

@@ -1 +1 @@
-{"version":3,"file":"Typography.js","sourceRoot":"","sources":["../../../src/components/Typography.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,MAAM,yBAAyB,CAAC;AAC5C,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AAOrD,MAAM,UAAU,GAAG,CAAC,EAClB,EAAE,EAAE,SAAS,GAAG,GAAG,EACnB,IAAI,GAAG,SAAS,EAChB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACQ,EAAE,EAAE;IACpB,MAAM,iBAAiB,GAAG,EAAE,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC,CAAC;IAEjE,OAAO,CACL,oBAAC,SAAS,IAAC,SAAS,EAAE,iBAAiB,KAAM,KAAK,IAC/C,QAAQ,CACC,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,OAAO,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"Typography.js","sourceRoot":"","sources":["../../../src/components/Typography.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,MAAM,yBAAyB,CAAC;AAC5C,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AAarD,MAAM,UAAU,GAAG,CAAC,EAClB,EAAE,EAAE,SAAS,GAAG,GAAG,EACnB,IAAI,GAAG,SAAS,EAChB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACQ,EAAE,EAAE;IACpB,MAAM,iBAAiB,GAAG,EAAE,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC,CAAC;IAEjE,OAAO,CACL,oBAAC,SAAS,IAAC,SAAS,EAAE,iBAAiB,KAAM,KAAK,IAC/C,QAAQ,CACC,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/lib/esm/components/elements.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Element unions for the `as` prop of the typographic primitives.
+ *
+ * These components spread `as` straight into JSX, so at runtime *any* intrinsic
+ * tag works. The types used to name a handful of tags each, which made ordinary
+ * usage (`as="strong"`, `as="code"`, `as="small"`) a type error for behaviour
+ * that has always worked.
+ *
+ * We deliberately do NOT use `keyof React.JSX.IntrinsicElements`:
+ *
+ *  - these components take required `children`, and React throws at runtime for
+ *    a void element with children (`<input>`, `<img>`, `<br>`, `<hr>`…), so the
+ *    full key set would type-check code that crashes;
+ *  - their props are `React.HtmlHTMLAttributes<HTMLElement>`, which cannot carry
+ *    element-specific attributes (`href`, `type`, `value`), so interactive and
+ *    form tags would be offered without the attributes that make them useful;
+ *  - `svg`/`math` and the SVG child tags take a different attribute namespace
+ *    entirely.
+ *
+ * What is left — every HTML element that holds phrasing or flow content and is
+ * styled purely by the component's own class — is exactly the set below. It is
+ * wide enough that drift is unlikely, and honest about what the component can
+ * actually render.
+ */
+/** Inline (phrasing) elements: text-level semantics. */
+export type PhrasingElement = 'span' | 'label' | 'strong' | 'em' | 'b' | 'i' | 'u' | 's' | 'small' | 'mark' | 'code' | 'kbd' | 'samp' | 'var' | 'sub' | 'sup' | 'abbr' | 'cite' | 'dfn' | 'q' | 'time' | 'data' | 'del' | 'ins' | 'bdi' | 'bdo' | 'output' | 'ruby' | 'rt' | 'rp';
+/** Block-level containers that hold text. */
+export type TextBlockElement = 'p' | 'div' | 'pre' | 'blockquote' | 'address' | 'figcaption' | 'caption' | 'legend' | 'summary' | 'li' | 'dt' | 'dd' | 'td' | 'th';
+/** The six HTML heading levels. */
+export type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+/**
+ * Anything `Typography` / `Text` can render: inline text, a text block, or a
+ * heading tag (a caption-styled heading is a normal thing to want).
+ */
+export type TextElement = PhrasingElement | TextBlockElement | HeadingElement;
+/**
+ * Anything `Heading` can render. A heading is often visual rather than
+ * semantic — a stat card's big number is a `p`, not an `h2` — so the non-heading
+ * containers are allowed too. See `Heading`'s `level` prop for the styling that
+ * goes with them.
+ */
+export type HeadingAsElement = HeadingElement | TextBlockElement | PhrasingElement;

package/lib/esm/components/elements.js

@@ -0,0 +1,26 @@
+/**
+ * Element unions for the `as` prop of the typographic primitives.
+ *
+ * These components spread `as` straight into JSX, so at runtime *any* intrinsic
+ * tag works. The types used to name a handful of tags each, which made ordinary
+ * usage (`as="strong"`, `as="code"`, `as="small"`) a type error for behaviour
+ * that has always worked.
+ *
+ * We deliberately do NOT use `keyof React.JSX.IntrinsicElements`:
+ *
+ *  - these components take required `children`, and React throws at runtime for
+ *    a void element with children (`<input>`, `<img>`, `<br>`, `<hr>`…), so the
+ *    full key set would type-check code that crashes;
+ *  - their props are `React.HtmlHTMLAttributes<HTMLElement>`, which cannot carry
+ *    element-specific attributes (`href`, `type`, `value`), so interactive and
+ *    form tags would be offered without the attributes that make them useful;
+ *  - `svg`/`math` and the SVG child tags take a different attribute namespace
+ *    entirely.
+ *
+ * What is left — every HTML element that holds phrasing or flow content and is
+ * styled purely by the component's own class — is exactly the set below. It is
+ * wide enough that drift is unlikely, and honest about what the component can
+ * actually render.
+ */
+export {};
+//# sourceMappingURL=elements.js.map

package/lib/esm/components/elements.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"elements.js","sourceRoot":"","sources":["../../../src/components/elements.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG"}

package/lib/esm/index.d.ts

@@ -1,6 +1,6 @@
 import './theme.css';
 import './types.js';
-import './ontologies/primitives.js';
+import './ontologies/primitives.register.js';
 import './components/Badge.js';
 import './components/Button.js';
 import './components/Input.js';

package/lib/esm/index.js

@@ -1,6 +1,6 @@
 import './theme.css';
 import './types.js';
-import './ontologies/primitives.js';
+import './ontologies/primitives.register.js';
 //SHAPES FIRST
 // import './shapes/YourShape.js';
 //THEN COMPONENTS

package/lib/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AACrB,OAAO,YAAY,CAAC;AACpB,OAAO,4BAA4B,CAAC;AAEpC,cAAc;AACd,kCAAkC;AAElC,iBAAiB;AACjB,OAAO,uBAAuB,CAAC;AAC/B,OAAO,wBAAwB,CAAC;AAChC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,sBAAsB,CAAC;AAC9B,OAAO,wBAAwB,CAAC;AAChC,OAAO,0BAA0B,CAAC;AAClC,OAAO,4BAA4B,CAAC;AACpC,OAAO,wBAAwB,CAAC;AAChC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,2BAA2B,CAAC;AACnC,OAAO,wBAAwB,CAAC;AAChC,OAAO,6BAA6B,CAAC;AACrC,OAAO,0BAA0B,CAAC;AAClC,OAAO,2BAA2B,CAAC;AACnC,OAAO,2BAA2B,CAAC;AACnC,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,yBAAyB,CAAC;AACjC,OAAO,6BAA6B,CAAC;AACrC,OAAO,wBAAwB,CAAC;AAChC,OAAO,4BAA4B,CAAC;AACpC,OAAO,yBAAyB,CAAC;AACjC,OAAO,yBAAyB,CAAC;AACjC,OAAO,wBAAwB,CAAC;AAChC,OAAO,6BAA6B,CAAC;AACrC,OAAO,wBAAwB,CAAC;AAChC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,yBAAyB,CAAC;AACjC,OAAO,0BAA0B,CAAC;AAClC,OAAO,gCAAgC,CAAC;AACxC,OAAO,yBAAyB,CAAC;AACjC,OAAO,6BAA6B,CAAC;AACrC,OAAO,yBAAyB,CAAC;AACjC,OAAO,+BAA+B,CAAC;AACvC,OAAO,gCAAgC,CAAC;AACxC,OAAO,4BAA4B,CAAC;AACpC,OAAO,+BAA+B,CAAC;AACvC,OAAO,4BAA4B,CAAC;AACpC,OAAO,wBAAwB,CAAC;AAChC,OAAO,4BAA4B,CAAC;AACpC,OAAO,8BAA8B,CAAC;AACtC,OAAO,6BAA6B,CAAC;AACrC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,yBAAyB,CAAC;AACjC,OAAO,gCAAgC,CAAC;AAExC,OAAO,sBAAsB,CAAC;AAE9B,uFAAuF;AACvF,qEAAqE;AACrE,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AACrB,OAAO,YAAY,CAAC;AACpB,OAAO,qCAAqC,CAAC;AAE7C,cAAc;AACd,kCAAkC;AAElC,iBAAiB;AACjB,OAAO,uBAAuB,CAAC;AAC/B,OAAO,wBAAwB,CAAC;AAChC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,sBAAsB,CAAC;AAC9B,OAAO,wBAAwB,CAAC;AAChC,OAAO,0BAA0B,CAAC;AAClC,OAAO,4BAA4B,CAAC;AACpC,OAAO,wBAAwB,CAAC;AAChC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,2BAA2B,CAAC;AACnC,OAAO,wBAAwB,CAAC;AAChC,OAAO,6BAA6B,CAAC;AACrC,OAAO,0BAA0B,CAAC;AAClC,OAAO,2BAA2B,CAAC;AACnC,OAAO,2BAA2B,CAAC;AACnC,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,yBAAyB,CAAC;AACjC,OAAO,6BAA6B,CAAC;AACrC,OAAO,wBAAwB,CAAC;AAChC,OAAO,4BAA4B,CAAC;AACpC,OAAO,yBAAyB,CAAC;AACjC,OAAO,yBAAyB,CAAC;AACjC,OAAO,wBAAwB,CAAC;AAChC,OAAO,6BAA6B,CAAC;AACrC,OAAO,wBAAwB,CAAC;AAChC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,yBAAyB,CAAC;AACjC,OAAO,0BAA0B,CAAC;AAClC,OAAO,gCAAgC,CAAC;AACxC,OAAO,yBAAyB,CAAC;AACjC,OAAO,6BAA6B,CAAC;AACrC,OAAO,yBAAyB,CAAC;AACjC,OAAO,+BAA+B,CAAC;AACvC,OAAO,gCAAgC,CAAC;AACxC,OAAO,4BAA4B,CAAC;AACpC,OAAO,+BAA+B,CAAC;AACvC,OAAO,4BAA4B,CAAC;AACpC,OAAO,wBAAwB,CAAC;AAChC,OAAO,4BAA4B,CAAC;AACpC,OAAO,8BAA8B,CAAC;AACtC,OAAO,6BAA6B,CAAC;AACrC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,yBAAyB,CAAC;AACjC,OAAO,gCAAgC,CAAC;AAExC,OAAO,sBAAsB,CAAC;AAE9B,uFAAuF;AACvF,qEAAqE;AACrE,cAAc,aAAa,CAAC"}

package/lib/esm/ontologies/primitives.d.ts

@@ -8,8 +8,8 @@ export declare const loadData: () => Promise<{
     };
     "@graph": any[];
 }>;
-export declare const ns: (term: string) => import("@_linked/core/utils/NodeReference.js").NodeReferenceValue;
-export declare const _self: import("@_linked/core/utils/NodeReference.js").NodeReferenceValue;
+export declare const ns: (term: string) => import("@_linked/core/utils/NodeReference").NodeReferenceValue;
+export declare const _self: import("@_linked/core/utils/NodeReference").NodeReferenceValue;
 export declare const radix: {
-    _self: import("@_linked/core/utils/NodeReference.js").NodeReferenceValue;
+    _self: import("@_linked/core/utils/NodeReference").NodeReferenceValue;
 };

package/lib/esm/ontologies/primitives.js

@@ -1,7 +1,5 @@
 import { Prefix } from '@_linked/core/utils/Prefix';
 import { createNameSpace } from '@_linked/core/utils/NameSpace';
-import { linkedOntology } from '../package.js';
-import * as _this from './primitives.js';
 const dataFile = '../data/primitives.json';
 const base = 'http://lincd.org/ont/radix/';
 Prefix.add('radix', base);
@@ -16,5 +14,4 @@ export const _self = ns('');
 export const radix = {
     _self,
 };
-linkedOntology(_this, ns, 'radix', loadData, dataFile);
 //# sourceMappingURL=primitives.js.map

package/lib/esm/ontologies/primitives.js.map

@@ -1 +1 @@
-{"version":3,"file":"primitives.js","sourceRoot":"","sources":["../../../src/ontologies/primitives.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,KAAK,KAAK,MAAM,iBAAiB,CAAC;AAEzC,MAAM,QAAQ,GAAG,yBAAyB,CAAC;AAC3C,MAAM,IAAI,GAAG,6BAA6B,CAAC;AAE3C,MAAM,CAAC,GAAG,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;AAE1B,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,EAAE;IAC3B,YAAY;IACZ,OAAO,MAAM,CAAC,yBAAyB,EAAE;QACvC,IAAI,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;KACvB,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;AAClC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,EAAE,GAAG,eAAe,CAAC,IAAI,CAAC,CAAC;AACxC,MAAM,CAAC,MAAM,KAAK,GAAG,EAAE,CAAC,EAAE,CAAC,CAAC;AAE5B,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,KAAK;CACN,CAAC;AAEF,cAAc,CAAC,KAAK,EAAE,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC"}
+{"version":3,"file":"primitives.js","sourceRoot":"","sources":["../../../src/ontologies/primitives.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAEhE,MAAM,QAAQ,GAAG,yBAAyB,CAAC;AAC3C,MAAM,IAAI,GAAG,6BAA6B,CAAC;AAE3C,MAAM,CAAC,GAAG,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;AAE1B,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,EAAE;IAC3B,YAAY;IACZ,OAAO,MAAM,CAAC,yBAAyB,EAAE;QACvC,IAAI,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;KACvB,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;AAClC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,EAAE,GAAG,eAAe,CAAC,IAAI,CAAC,CAAC;AACxC,MAAM,CAAC,MAAM,KAAK,GAAG,EAAE,CAAC,EAAE,CAAC,CAAC;AAE5B,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,KAAK;CACN,CAAC"}

package/lib/esm/ontologies/primitives.register.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/esm/ontologies/primitives.register.js

@@ -0,0 +1,17 @@
+/**
+ * Registers this ontology.
+ *
+ * Kept out of `primitives.ts` because registration needs that module's whole export
+ * namespace, and a module cannot import itself once a bundler is involved: Rollup
+ * treats a static self-reference as a circular import and elides it, so the binding is
+ * undefined at runtime and the consuming app dies at boot with `_this is not
+ * defined`. `tsc` preserves it, which is why the pattern survived for as long as
+ * packages were built with `tsc` alone.
+ *
+ * From a sibling module the same import is ordinary and survives.
+ */
+import * as terms from './primitives.js';
+import { loadData, ns } from './primitives.js';
+import { linkedOntology } from '../package.js';
+linkedOntology(terms, ns, 'radix', loadData, '../data/primitives.json');
+//# sourceMappingURL=primitives.register.js.map

package/lib/esm/ontologies/primitives.register.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"primitives.register.js","sourceRoot":"","sources":["../../../src/ontologies/primitives.register.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,OAAO,KAAK,KAAK,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAC,QAAQ,EAAE,EAAE,EAAC,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAC,cAAc,EAAC,MAAM,eAAe,CAAC;AAE7C,cAAc,CAAC,KAAK,EAAE,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,yBAAyB,CAAC,CAAC"}

package/lib/esm/package.json

@@ -10,7 +10,7 @@
     "type": "git",
     "url": "git+https://github.com/linked-fw/primitives.git"
   },
-  "version": "1.2.3",
+  "version": "1.3.0",
   "packageManager": "npm@11.19.1",
   "linkedPackage": true,
   "license": "ISC",

package/package.json

@@ -10,7 +10,7 @@
     "type": "git",
     "url": "git+https://github.com/linked-fw/primitives.git"
   },
-  "version": "1.2.3",
+  "version": "1.3.0",
   "packageManager": "npm@11.19.1",
   "linkedPackage": true,
   "main": "lib/cjs/index.js",

package/test/prop-unions-are-styled.test.mjs

@@ -0,0 +1,53 @@
+import assert from 'node:assert/strict';
+import { readFileSync } from 'node:fs';
+import test from 'node:test';
+
+const read = (name) =>
+  readFileSync(new URL(`../src/components/${name}`, import.meta.url), 'utf8');
+
+/**
+ * A widened union is only an improvement if every value it now admits is
+ * actually styled — a `color` the stylesheet has never heard of is a worse
+ * outcome than the type error it replaced. These tests keep the unions and the
+ * stylesheets in step.
+ */
+
+test('every BadgeColor has a --_badge-color rule', () => {
+  const source = read('Badge.tsx');
+  const stylesheet = read('Badge.module.css');
+
+  const union = source.match(/export type BadgeColor =([^;]+);/);
+  assert.ok(union, 'BadgeColor union not found in Badge.tsx');
+
+  const colors = [...union[1].matchAll(/'([a-z-]+)'/g)].map((m) => m[1]);
+  assert.ok(colors.length >= 6, `expected the full colour set, got ${colors}`);
+
+  for (const color of colors) {
+    assert.match(
+      stylesheet,
+      new RegExp(`\\.${color}\\s*\\{[^}]*--_badge-color:`),
+      `Badge color "${color}" is in the type union but has no rule in Badge.module.css`
+    );
+  }
+});
+
+test('every Heading level has a .Root.levelN rule, and h1-h6 stay tag-styled', () => {
+  const source = read('Heading.tsx');
+  const stylesheet = read('Heading.module.css');
+
+  const levels = source.match(/level\?:([^;]+);/);
+  assert.ok(levels, 'level prop not found in Heading.tsx');
+
+  for (const level of [...levels[1].matchAll(/\d/g)].map((m) => m[0])) {
+    assert.match(
+      stylesheet,
+      new RegExp(`\\.Root\\.level${level}\\s*[,{]`),
+      `Heading level ${level} is accepted but has no .Root.level${level} rule`
+    );
+    assert.match(
+      stylesheet,
+      new RegExp(`h${level}\\.Root\\s*[,{]`),
+      `<h${level}> no longer picks up its heading tokens from the tag alone`
+    );
+  }
+});