npm - @_linked/primitives - Versions diffs - 1.2.4 → 1.3.1 - Mend

@_linked/primitives 1.2.4 → 1.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (33) hide show

package/CHANGELOG.md +35 -0
package/lib/cjs/components/Badge.d.ts +9 -2
package/lib/cjs/components/Badge.js.map +1 -1
package/lib/cjs/components/Badge.module.css +2 -0
package/lib/cjs/components/Heading.d.ts +16 -2
package/lib/cjs/components/Heading.js +2 -2
package/lib/cjs/components/Heading.js.map +1 -1
package/lib/cjs/components/Heading.module.css +70 -72
package/lib/cjs/components/Text.d.ts +3 -1
package/lib/cjs/components/Text.js.map +1 -1
package/lib/cjs/components/Typography.d.ts +7 -1
package/lib/cjs/components/Typography.js.map +1 -1
package/lib/cjs/components/elements.d.ts +42 -0
package/lib/cjs/components/elements.js +27 -0
package/lib/cjs/components/elements.js.map +1 -0
package/lib/cjs/package.json +1 -1
package/lib/esm/components/Badge.d.ts +9 -2
package/lib/esm/components/Badge.js.map +1 -1
package/lib/esm/components/Badge.module.css +2 -0
package/lib/esm/components/Heading.d.ts +16 -2
package/lib/esm/components/Heading.js +2 -2
package/lib/esm/components/Heading.js.map +1 -1
package/lib/esm/components/Heading.module.css +70 -72
package/lib/esm/components/Text.d.ts +3 -1
package/lib/esm/components/Text.js.map +1 -1
package/lib/esm/components/Typography.d.ts +7 -1
package/lib/esm/components/Typography.js.map +1 -1
package/lib/esm/components/elements.d.ts +42 -0
package/lib/esm/components/elements.js +26 -0
package/lib/esm/components/elements.js.map +1 -0
package/lib/esm/package.json +1 -1
package/package.json +2 -1
package/test/prop-unions-are-styled.test.mjs +53 -0

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,40 @@
 # @\_linked/primitives
+## 1.3.1
+### Patch Changes
+- [#34](https://github.com/linked-fw/primitives/pull/34) [`6514c31`](https://github.com/linked-fw/primitives/commit/6514c31aef96a8b4d087e1edf48aa86abe693b87) Thanks [@flyon](https://github.com/flyon)! - Add a root `types` field so a bare import gets types under node10 resolution.
+  There was no `types`/`typings` field at all, so a `moduleResolution: node10` consumer doing
+  `import … from '@_linked/primitives'` got `TS2307` — `exports` is ignored under node10. The value
+  `index.d.ts` is redirected by the existing `typesVersions` to `lib/esm/index.d.ts`, matching the
+  sibling packages.
+## 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

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

@@ -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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

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

package/lib/cjs/package.json CHANGED Viewed

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

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

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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;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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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;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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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;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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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;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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

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

package/lib/esm/package.json CHANGED Viewed

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

package/package.json CHANGED Viewed

@@ -10,10 +10,11 @@
     "type": "git",
     "url": "git+https://github.com/linked-fw/primitives.git"
   },
-  "version": "1.2.4",
+  "version": "1.3.1",
   "packageManager": "npm@11.19.1",
   "linkedPackage": true,
   "main": "lib/cjs/index.js",
+  "types": "index.d.ts",
   "license": "ISC",
   "scripts": {
     "start": "npm exec linked dev",

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

@@ -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`
+    );
+  }
+});