@enigmax/primitives 0.14.0 → 0.14.1

package/dist/{chunk-YFM2FWHQ.js → chunk-QFJ5NT6Z.js}

@@ -680,6 +680,11 @@ function RelativeTime({
   ...rest
 }) {
   useEffect(loadElement, []);
+  const applyPrefix = useCallback((node) => {
+    if (!node) return;
+    if (prefix === void 0 || prefix === "") node.removeAttribute("prefix");
+    else node.setAttribute("prefix", prefix);
+  }, [prefix]);
   const options = {
     format,
     tense,
@@ -712,7 +717,8 @@ function RelativeTime({
   if (view.absoluteOnly) {
     return createElement("time", { dateTime: view.iso, title: noTitle ? void 0 : view.exact, ...marks, ...rest }, view.label);
   }
-  return createElement("relative-time", { ...relativeTimeAttributes(view, options), ...marks, ...rest }, view.label);
+  const { prefix: prefixAttribute, ...attributes } = relativeTimeAttributes(view, options);
+  return createElement("relative-time", { ...attributes, ...marks, ...rest, ref: applyPrefix }, view.label);
 }
 
 export { Button, Input, PasswordStrength, RelativeTime, Toaster, createNotificationQueue, defaultQueue, getLinkComponent, setLinkComponent, useButton, useInput, useMarquee, useNetworkState, useNotifications, useSearch };

package/dist/next/index.js

@@ -1,6 +1,6 @@
 "use client";
-import { Button } from '../chunk-YFM2FWHQ.js';
-export { Input, PasswordStrength, RelativeTime, Toaster, createNotificationQueue, defaultQueue, getLinkComponent, setLinkComponent, useButton, useInput, useMarquee, useNetworkState, useNotifications, useSearch } from '../chunk-YFM2FWHQ.js';
+import { Button } from '../chunk-QFJ5NT6Z.js';
+export { Input, PasswordStrength, RelativeTime, Toaster, createNotificationQueue, defaultQueue, getLinkComponent, setLinkComponent, useButton, useInput, useMarquee, useNetworkState, useNotifications, useSearch } from '../chunk-QFJ5NT6Z.js';
 export { estimatePasswordStrength, generatePassword } from '../chunk-DD2X5B2J.js';
 import '../chunk-UZFEEFMF.js';
 import Link from 'next/link';

package/dist/react/index.js

@@ -1,4 +1,4 @@
 "use client";
-export { Button, Input, PasswordStrength, RelativeTime, Toaster, createNotificationQueue, defaultQueue, getLinkComponent, setLinkComponent, useButton, useInput, useMarquee, useNetworkState, useNotifications, useSearch } from '../chunk-YFM2FWHQ.js';
+export { Button, Input, PasswordStrength, RelativeTime, Toaster, createNotificationQueue, defaultQueue, getLinkComponent, setLinkComponent, useButton, useInput, useMarquee, useNetworkState, useNotifications, useSearch } from '../chunk-QFJ5NT6Z.js';
 export { estimatePasswordStrength, generatePassword } from '../chunk-DD2X5B2J.js';
 import '../chunk-UZFEEFMF.js';

package/dist/react-router/index.js

@@ -1,6 +1,6 @@
 "use client";
-import { Button } from '../chunk-YFM2FWHQ.js';
-export { Input, PasswordStrength, RelativeTime, Toaster, createNotificationQueue, defaultQueue, getLinkComponent, setLinkComponent, useButton, useInput, useMarquee, useNetworkState, useNotifications, useSearch } from '../chunk-YFM2FWHQ.js';
+import { Button } from '../chunk-QFJ5NT6Z.js';
+export { Input, PasswordStrength, RelativeTime, Toaster, createNotificationQueue, defaultQueue, getLinkComponent, setLinkComponent, useButton, useInput, useMarquee, useNetworkState, useNotifications, useSearch } from '../chunk-QFJ5NT6Z.js';
 export { estimatePasswordStrength, generatePassword } from '../chunk-DD2X5B2J.js';
 import '../chunk-UZFEEFMF.js';
 import { Link } from 'react-router';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enigmax/primitives",
-  "version": "0.14.0",
+  "version": "0.14.1",
   "description": "Headless components: the behaviour, the timing and the accessibility, with no styles of their own. Framework-agnostic core plus thin adapters.",
   "type": "module",
   "main": "./dist/index.js",

package/recipes/relative-time/styles.css

@@ -3,22 +3,29 @@
  *
  *     import "@enigmax/utils/relative-time.css";
  *
+ * The element renders its output into a SHADOW ROOT, which is why these work the way they
+ * do: `text-transform` is an inherited property, so it crosses the boundary from the host
+ * and reaches text no outer selector could ever match. A descendant selector cannot - the
+ * light-DOM children are the fallback, not what you are looking at.
+ *
  * Both are opt-in per timestamp - the attributes only appear when you ask for them - and
- * both are marked !important on purpose: the element writes its own text content, so a
- * `text-transform` from a reset or a typography plugin lands on the same node and would
- * otherwise win on cascade order alone.
+ * both are !important on purpose: the transform lands on the host, where a reset or a
+ * typography plugin would otherwise win on cascade order alone.
  */
 
 /* Title Case Every Word. Reads oddly on "2 Days Ago"; usually you want the rule below. */
-[data-relative-time-capitalize="true"],
-[data-relative-time-capitalize="true"] * {
+[data-relative-time-capitalize="true"] {
     text-transform: capitalize !important;
 }
 
-/* Just the first letter, so a standalone "yesterday" starts a line properly. The nested
-   selectors cover the element wrapping its text in a child, which it does for some formats. */
-[data-relative-time-capitalize-first-letter="true"]::first-letter,
-[data-relative-time-capitalize-first-letter="true"] *::first-letter,
-[data-relative-time-capitalize-first-letter="true"] * *::first-letter {
+/* Just the first letter, so a standalone "yesterday" starts a line properly.
+   `::first-letter` only applies to a BLOCK container and the element is inline, so the
+   host is made inline-block for it - scoped to the hook, so a timestamp that did not ask
+   for this keeps its inline layout. */
+[data-relative-time-capitalize-first-letter="true"] {
+    display: inline-block;
+}
+
+[data-relative-time-capitalize-first-letter="true"]::first-letter {
     text-transform: uppercase !important;
 }

package/src/react/relative-time.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { createElement, useEffect, type HTMLAttributes, type ReactNode } from "react";
+import { createElement, useCallback, useEffect, type HTMLAttributes, type ReactNode } from "react";
 import { relativeTimeView, relativeTimeAttributes, type RelativeTimeOptions } from "@/core/relative-time";
 
 /**
@@ -75,6 +75,22 @@ export function RelativeTime({
 }: RelativeTimeProps): ReactNode {
     useEffect(loadElement, []);
 
+    /**
+     * `prefix` is set through the DOM, never as a React prop.
+     *
+     * `Element.prototype.prefix` is a read-only accessor (the XML namespace prefix), and
+     * React sets a KNOWN property rather than an attribute - so passing it through throws
+     * "Cannot set property prefix of #<Element> which has only a getter" and takes the
+     * whole tree down with it. It is the only attribute here that collides; the rest are
+     * either kebab-cased or writable. Applied on the ref, which runs before the custom
+     * element upgrades, so the element still reads it.
+     */
+    const applyPrefix = useCallback((node: HTMLElement | null) => {
+        if (!node) return;
+        if (prefix === undefined || prefix === "") node.removeAttribute("prefix");
+        else node.setAttribute("prefix", prefix);
+    }, [prefix]);
+
     const options: RelativeTimeOptions = {
         format, tense, precision, threshold, prefix, formatStyle, locale, timeZone,
         second, minute, hour, weekday, day, month, year, timeZoneName, noTitle, numericBeyondThreshold
@@ -99,5 +115,6 @@ export function RelativeTime({
     // createElement rather than JSX: `<relative-time>` is not a known intrinsic element, and
     // declaring it means augmenting React's JSX namespace from inside a published package -
     // which collides with any consumer that declared it too, differently.
-    return createElement("relative-time", { ...relativeTimeAttributes(view, options), ...marks, ...rest }, view.label);
+    const { prefix: prefixAttribute, ...attributes } = relativeTimeAttributes(view, options);
+    return createElement("relative-time", { ...attributes, ...marks, ...rest, ref: applyPrefix }, view.label);
 }