@-reddacted-/react-ui 0.3.0 → 0.4.0

package/dist/popup/PopupProvider.js

@@ -4,18 +4,63 @@ import { createErrorRules, createGraphqlErrorRules } from "./errorRules.js";
 import { createInterceptedFetch } from "./fetchInterceptor.js";
 import { PopupHost } from "./PopupHost.js";
 import { PopupContext } from "./usePopup.js";
-const addMessage = (message) => (current) => current.includes(message) ? current : [...current, message];
-export function PopupProvider({ children, closeLabel, interceptFetch = false, onReport, ...ruleOptions }) {
-    const [fetchMessages, setFetchMessages] = useState([]);
-    const [pushedMessages, setPushedMessages] = useState([]);
+// Anonymous group used by push() without `group` and by fetch without `fetchGroup`.
+const DEFAULT_GROUP = "";
+let nextItemId = 0;
+function addItem(groups, name, item) {
+    const group = groups.find(g => g.name === name);
+    if (!group)
+        return [...groups, { name, items: [item] }];
+    if (item.dedupKey !== null && group.items.some(i => i.dedupKey === item.dedupKey))
+        return groups;
+    return groups.map(g => (g === group ? { name, items: [...g.items, item] } : g));
+}
+function removeFetchItems(groups) {
+    if (!groups.some(g => g.items.some(i => i.fromFetch)))
+        return groups;
+    return groups
+        .map(g => ({ name: g.name, items: g.items.filter(i => !i.fromFetch) }))
+        .filter(g => g.items.length > 0);
+}
+export function PopupProvider({ children, closeLabel, groups: groupConfigs, color = "--color-primary", interceptFetch = false, fetchGroup = DEFAULT_GROUP, onReport, className, style, ...ruleOptions }) {
+    const [groups, setGroups] = useState([]);
     // L'interception ne s'installe qu'une fois : le callback, lui, peut changer d'un rendu à
     // l'autre sans avoir à la réinstaller.
     const reportRef = useRef(onReport);
     reportRef.current = onReport;
-    // Options arrive as literals: reading them through a ref keeps the interceptor from being
-    // reinstalled on every parent render.
+    // Options arrive as literals: reading them through refs keeps the interceptor from being
+    // reinstalled, and push() stable, on every parent render.
     const ruleOptionsRef = useRef(ruleOptions);
     ruleOptionsRef.current = ruleOptions;
+    const groupConfigsRef = useRef(groupConfigs);
+    groupConfigsRef.current = groupConfigs;
+    const fetchGroupRef = useRef(fetchGroup);
+    fetchGroupRef.current = fetchGroup;
+    const timers = useRef(new Map());
+    const dismiss = useCallback((group) => {
+        if (group === undefined) {
+            timers.current.forEach(clearTimeout);
+            timers.current.clear();
+            setGroups([]);
+            return;
+        }
+        clearTimeout(timers.current.get(group));
+        timers.current.delete(group);
+        setGroups(current => (current.some(g => g.name === group) ? current.filter(g => g.name !== group) : current));
+    }, []);
+    const add = useCallback((group, content, dedupKey, fromFetch) => {
+        setGroups(current => addItem(current, group, { id: nextItemId++, dedupKey, content, fromFetch }));
+        // The group's timer restarts with every message.
+        const duration = groupConfigsRef.current?.[group]?.duration;
+        if (duration) {
+            clearTimeout(timers.current.get(group));
+            timers.current.set(group, setTimeout(() => dismiss(group), duration));
+        }
+    }, [dismiss]);
+    useEffect(() => {
+        const pending = timers.current;
+        return () => pending.forEach(clearTimeout);
+    }, []);
     useEffect(() => {
         if (!interceptFetch)
             return;
@@ -26,8 +71,8 @@ export function PopupProvider({ children, closeLabel, interceptFetch = false, on
             ? createGraphqlErrorRules(ruleOptionsRef.current)
             : createErrorRules(ruleOptionsRef.current);
         const intercepted = createInterceptedFetch(original, {
-            onRequestStart: () => setFetchMessages(current => (current.length === 0 ? current : [])),
-            onError: message => setFetchMessages(addMessage(message)),
+            onRequestStart: () => setGroups(removeFetchItems),
+            onError: message => add(fetchGroupRef.current, message, message, true),
             onReport: report => reportRef.current?.(report),
         }, rules);
         intercepted.__popupIntercepted = true;
@@ -35,13 +80,20 @@ export function PopupProvider({ children, closeLabel, interceptFetch = false, on
         return () => {
             window.fetch = original;
         };
-    }, [interceptFetch]);
-    const pushError = useCallback((message) => setPushedMessages(addMessage(message)), []);
-    const dismiss = useCallback(() => {
-        setFetchMessages([]);
-        setPushedMessages([]);
-    }, []);
-    const api = useMemo(() => ({ pushError, dismiss }), [pushError, dismiss]);
-    const messages = useMemo(() => [...new Set([...pushedMessages, ...fetchMessages])], [pushedMessages, fetchMessages]);
-    return (_jsxs(PopupContext.Provider, { value: api, children: [children, _jsx(PopupHost, { messages: messages, onDismiss: dismiss, closeLabel: closeLabel })] }));
+    }, [interceptFetch, add]);
+    const push = useCallback((content, options) => {
+        const dedupKey = options?.id ?? (typeof content === "string" ? content : null);
+        add(options?.group ?? DEFAULT_GROUP, content, dedupKey, false);
+    }, [add]);
+    const api = useMemo(() => ({ push, dismiss }), [push, dismiss]);
+    const boxes = groups.map(group => {
+        const config = groupConfigs?.[group.name];
+        return {
+            group: group.name,
+            color: config?.color ?? color,
+            className: config?.className,
+            items: group.items.map(item => ({ id: item.id, content: item.content })),
+        };
+    });
+    return (_jsxs(PopupContext.Provider, { value: api, children: [children, _jsx(PopupHost, { boxes: boxes, onDismiss: dismiss, closeLabel: closeLabel, className: className, style: style })] }));
 }

package/dist/popup/usePopup.d.ts

@@ -1,8 +1,15 @@
+import type { ReactNode } from "react";
+export type PushOptions = {
+    /** Group whose box shows the message. Omitted: the anonymous default group. */
+    group?: string;
+    /** Dedup key within the group. Strings dedup by value; other content only through `id`. */
+    id?: string;
+};
 export type PopupApi = {
-    /** Shows a message until the user closes the popup. Identical messages are shown once. */
-    pushError: (message: string) => void;
-    /** Closes the popup and forgets every message. */
-    dismiss: () => void;
+    /** Shows `content` in its group's box until closed (× or the group's `duration`). */
+    push: (content: ReactNode, options?: PushOptions) => void;
+    /** Closes one group's box, or every box when called without a group. */
+    dismiss: (group?: string) => void;
 };
 export declare const PopupContext: import("react").Context<PopupApi | null>;
 export declare function usePopup(): PopupApi;

package/dist/popup/usePopup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePopup.d.ts","sourceRoot":"","sources":["../../src/popup/usePopup.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,QAAQ,GAAG;IACrB,0FAA0F;IAC1F,SAAS,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,kDAAkD;IAClD,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB,CAAA;AAED,eAAO,MAAM,YAAY,0CAAuC,CAAA;AAEhE,wBAAgB,QAAQ,IAAI,QAAQ,CAInC"}
+{"version":3,"file":"usePopup.d.ts","sourceRoot":"","sources":["../../src/popup/usePopup.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,MAAM,MAAM,WAAW,GAAG;IACxB,+EAA+E;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,2FAA2F;IAC3F,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ,CAAA;AAED,MAAM,MAAM,QAAQ,GAAG;IACrB,qFAAqF;IACrF,IAAI,EAAE,CAAC,OAAO,EAAE,SAAS,EAAE,OAAO,CAAC,EAAE,WAAW,KAAK,IAAI,CAAA;IACzD,wEAAwE;IACxE,OAAO,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CAClC,CAAA;AAED,eAAO,MAAM,YAAY,0CAAuC,CAAA;AAEhE,wBAAgB,QAAQ,IAAI,QAAQ,CAInC"}

package/dist/style/accordionCss.d.ts

@@ -0,0 +1,2 @@
+export declare const accordionCss = "\n:where(.rui-accordion:not([data-variant=\"separated\"])) {\n  border: 1px solid var(--rui-accordion-border, var(--color-border));\n  border-radius: 12px;\n  background-color: var(--rui-accordion-bg, var(--color-surface));\n  overflow: hidden;\n}\n:where(.rui-accordion:not([data-variant=\"separated\"])) > :where(details + details) {\n  border-top: 1px solid var(--rui-accordion-border, var(--color-border));\n}\n:where(.rui-accordion[data-variant=\"separated\"]) {\n  display: flex;\n  flex-direction: column;\n  gap: var(--rui-accordion-gap, 0.5rem);\n}\n:where(.rui-accordion[data-variant=\"separated\"]) > :where(details) {\n  border: 1px solid var(--rui-accordion-border, var(--color-border));\n  border-radius: 12px;\n  background-color: var(--rui-accordion-bg, var(--color-surface));\n  overflow: hidden;\n}\n\n:where(.rui-accordion) :where(summary) {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  padding: var(--rui-accordion-padding, 0.875rem 1rem);\n  color: var(--color-text);\n  font-weight: 500;\n  list-style: none;\n  cursor: pointer;\n}\n:where(.rui-accordion) :where(summary)::-webkit-details-marker {\n  display: none;\n}\n:where(.rui-accordion) :where(summary:hover) {\n  background-color: color-mix(in srgb, var(--color-text) 4%, transparent);\n}\n:where(.rui-accordion) :where(summary:focus-visible) {\n  outline: 2px solid var(--color-primary);\n  outline-offset: -2px;\n}\n:where(.rui-accordion) :where(details) > :where(:not(summary)) {\n  padding: var(--rui-accordion-padding, 0.875rem 1rem);\n  color: var(--color-text);\n}\n\n:where(.rui-accordion:not([data-chevron=\"start\"], [data-chevron=\"none\"])) :where(summary)::after {\n  \n  content: \"\";\n  flex-shrink: 0;\n  width: 0.45em;\n  height: 0.45em;\n  border-right: 2px solid var(--color-text-muted);\n  border-bottom: 2px solid var(--color-text-muted);\n  transform: translateY(-25%) rotate(45deg);\n  transition: transform 150ms ease-out;\n\n  margin-left: auto;\n}\n:where(.rui-accordion:not([data-chevron=\"start\"], [data-chevron=\"none\"])) :where(details[open] > summary)::after {\n  transform: translateY(25%) rotate(-135deg);\n}\n:where(.rui-accordion[data-chevron=\"start\"]) :where(summary)::before {\n  \n  content: \"\";\n  flex-shrink: 0;\n  width: 0.45em;\n  height: 0.45em;\n  border-right: 2px solid var(--color-text-muted);\n  border-bottom: 2px solid var(--color-text-muted);\n  transform: translateY(-25%) rotate(45deg);\n  transition: transform 150ms ease-out;\n\n}\n:where(.rui-accordion[data-chevron=\"start\"]) :where(details[open] > summary)::before {\n  transform: translateY(25%) rotate(-135deg);\n}\n\n/* Progressive enhancement: animated where the browser can transition to height: auto. */\n@supports (interpolate-size: allow-keywords) {\n  :where(.rui-accordion) {\n    interpolate-size: allow-keywords;\n  }\n  :where(.rui-accordion details)::details-content {\n    height: 0;\n    overflow: hidden;\n    transition: height 200ms ease-out, content-visibility 200ms allow-discrete;\n  }\n  :where(.rui-accordion details[open])::details-content {\n    height: auto;\n  }\n}\n@media (prefers-reduced-motion: reduce) {\n  :where(.rui-accordion) :where(summary)::before,\n  :where(.rui-accordion) :where(summary)::after,\n  :where(.rui-accordion details)::details-content {\n    transition: none;\n  }\n}\n";
+//# sourceMappingURL=accordionCss.d.ts.map

package/dist/style/accordionCss.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordionCss.d.ts","sourceRoot":"","sources":["../../src/style/accordionCss.ts"],"names":[],"mappings":"AAmBA,eAAO,MAAM,YAAY,6wGAkFxB,CAAA"}

package/dist/style/accordionCss.js

@@ -0,0 +1,101 @@
+// Accordion on native <details> / <summary>: `rui-accordion` on the container,
+// `data-variant="separated|joined"` (default joined), `data-chevron="start|end|none"` (default end).
+// Every selector is wrapped in :where() so it has zero specificity:
+// any class or style set by the consuming project wins without !important.
+const border = "1px solid var(--rui-accordion-border, var(--color-border))";
+const bg = "var(--rui-accordion-bg, var(--color-surface))";
+const padding = "var(--rui-accordion-padding, 0.875rem 1rem)";
+const chevron = `
+  content: "";
+  flex-shrink: 0;
+  width: 0.45em;
+  height: 0.45em;
+  border-right: 2px solid var(--color-text-muted);
+  border-bottom: 2px solid var(--color-text-muted);
+  transform: translateY(-25%) rotate(45deg);
+  transition: transform 150ms ease-out;
+`;
+const chevronOpen = "transform: translateY(25%) rotate(-135deg);";
+export const accordionCss = `
+:where(.rui-accordion:not([data-variant="separated"])) {
+  border: ${border};
+  border-radius: 12px;
+  background-color: ${bg};
+  overflow: hidden;
+}
+:where(.rui-accordion:not([data-variant="separated"])) > :where(details + details) {
+  border-top: ${border};
+}
+:where(.rui-accordion[data-variant="separated"]) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--rui-accordion-gap, 0.5rem);
+}
+:where(.rui-accordion[data-variant="separated"]) > :where(details) {
+  border: ${border};
+  border-radius: 12px;
+  background-color: ${bg};
+  overflow: hidden;
+}
+
+:where(.rui-accordion) :where(summary) {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: ${padding};
+  color: var(--color-text);
+  font-weight: 500;
+  list-style: none;
+  cursor: pointer;
+}
+:where(.rui-accordion) :where(summary)::-webkit-details-marker {
+  display: none;
+}
+:where(.rui-accordion) :where(summary:hover) {
+  background-color: color-mix(in srgb, var(--color-text) 4%, transparent);
+}
+:where(.rui-accordion) :where(summary:focus-visible) {
+  outline: 2px solid var(--color-primary);
+  outline-offset: -2px;
+}
+:where(.rui-accordion) :where(details) > :where(:not(summary)) {
+  padding: ${padding};
+  color: var(--color-text);
+}
+
+:where(.rui-accordion:not([data-chevron="start"], [data-chevron="none"])) :where(summary)::after {
+  ${chevron}
+  margin-left: auto;
+}
+:where(.rui-accordion:not([data-chevron="start"], [data-chevron="none"])) :where(details[open] > summary)::after {
+  ${chevronOpen}
+}
+:where(.rui-accordion[data-chevron="start"]) :where(summary)::before {
+  ${chevron}
+}
+:where(.rui-accordion[data-chevron="start"]) :where(details[open] > summary)::before {
+  ${chevronOpen}
+}
+
+/* Progressive enhancement: animated where the browser can transition to height: auto. */
+@supports (interpolate-size: allow-keywords) {
+  :where(.rui-accordion) {
+    interpolate-size: allow-keywords;
+  }
+  :where(.rui-accordion details)::details-content {
+    height: 0;
+    overflow: hidden;
+    transition: height 200ms ease-out, content-visibility 200ms allow-discrete;
+  }
+  :where(.rui-accordion details[open])::details-content {
+    height: auto;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  :where(.rui-accordion) :where(summary)::before,
+  :where(.rui-accordion) :where(summary)::after,
+  :where(.rui-accordion details)::details-content {
+    transition: none;
+  }
+}
+`;

package/dist/style/badgeCss.d.ts

@@ -0,0 +1,5 @@
+import type { CSSProperties } from "react";
+/** CSS variables shared by Badge and Tag. */
+export declare function badgeVars(color: string, size: string | number | undefined): CSSProperties;
+export declare const badgeCss = "\n:where(.rui-badge, .rui-tag) {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35em;\n  box-sizing: border-box;\n  padding: 0.2em 0.6em;\n  border: 1px solid var(--rui-badge-color, var(--color-primary));\n  border-radius: 999px;\n  background-color: var(--rui-badge-color, var(--color-primary));\n  color: var(--rui-badge-on, var(--color-bg));\n  font-size: var(--rui-badge-size, 0.75em);\n  font-weight: 500;\n  line-height: 1.2;\n  white-space: nowrap;\n  vertical-align: middle;\n}\n:where(.rui-badge[data-variant=\"outline\"], .rui-tag[data-variant=\"outline\"]) {\n  background-color: transparent;\n  color: var(--rui-badge-color, var(--color-primary));\n}\n:where(.rui-badge[data-variant=\"soft\"], .rui-tag[data-variant=\"soft\"]) {\n  border-color: transparent;\n  background-color: color-mix(in srgb, var(--rui-badge-color, var(--color-primary)) 15%, transparent);\n  color: var(--rui-badge-color, var(--color-primary));\n}\n:where(.rui-tag-remove) {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.2em;\n  height: 1.2em;\n  margin-right: -0.3em;\n  padding: 0;\n  border: none;\n  border-radius: 50%;\n  background: none;\n  color: inherit;\n  font: inherit;\n  line-height: 1;\n  cursor: pointer;\n  opacity: 0.75;\n}\n:where(.rui-tag-remove:hover) {\n  opacity: 1;\n  background-color: color-mix(in srgb, currentColor 20%, transparent);\n}\n:where(.rui-tag-remove:focus-visible) {\n  opacity: 1;\n  outline: 2px solid currentColor;\n  outline-offset: 1px;\n}\n";
+//# sourceMappingURL=badgeCss.d.ts.map

package/dist/style/badgeCss.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"badgeCss.d.ts","sourceRoot":"","sources":["../../src/style/badgeCss.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAI1C,6CAA6C;AAC7C,wBAAgB,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,aAAa,CAMzF;AAOD,eAAO,MAAM,QAAQ,2/CAoDpB,CAAA"}

package/dist/style/badgeCss.js

@@ -0,0 +1,68 @@
+import { resolveColor, resolveOnColor } from "./resolveColor.js";
+import { toLength } from "./toLength.js";
+/** CSS variables shared by Badge and Tag. */
+export function badgeVars(color, size) {
+    return {
+        "--rui-badge-color": resolveColor(color),
+        "--rui-badge-on": resolveOnColor(color),
+        "--rui-badge-size": toLength(size),
+    };
+}
+// Badge and Tag labels, usable as bare classes (`rui-badge`, `rui-tag` + `rui-tag-remove`)
+// or through the Badge / Tag components. Variant through `data-variant="outline|soft"`.
+// Every selector is wrapped in :where() so it has zero specificity:
+// any class or style set by the consuming project wins without !important.
+// Sizes are in em: padding and radius follow the font size.
+export const badgeCss = `
+:where(.rui-badge, .rui-tag) {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35em;
+  box-sizing: border-box;
+  padding: 0.2em 0.6em;
+  border: 1px solid var(--rui-badge-color, var(--color-primary));
+  border-radius: 999px;
+  background-color: var(--rui-badge-color, var(--color-primary));
+  color: var(--rui-badge-on, var(--color-bg));
+  font-size: var(--rui-badge-size, 0.75em);
+  font-weight: 500;
+  line-height: 1.2;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+:where(.rui-badge[data-variant="outline"], .rui-tag[data-variant="outline"]) {
+  background-color: transparent;
+  color: var(--rui-badge-color, var(--color-primary));
+}
+:where(.rui-badge[data-variant="soft"], .rui-tag[data-variant="soft"]) {
+  border-color: transparent;
+  background-color: color-mix(in srgb, var(--rui-badge-color, var(--color-primary)) 15%, transparent);
+  color: var(--rui-badge-color, var(--color-primary));
+}
+:where(.rui-tag-remove) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.2em;
+  height: 1.2em;
+  margin-right: -0.3em;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: none;
+  color: inherit;
+  font: inherit;
+  line-height: 1;
+  cursor: pointer;
+  opacity: 0.75;
+}
+:where(.rui-tag-remove:hover) {
+  opacity: 1;
+  background-color: color-mix(in srgb, currentColor 20%, transparent);
+}
+:where(.rui-tag-remove:focus-visible) {
+  opacity: 1;
+  outline: 2px solid currentColor;
+  outline-offset: 1px;
+}
+`;

package/dist/style/breadcrumbCss.d.ts

@@ -0,0 +1,2 @@
+export declare const breadcrumbCss = "\n:where(.rui-breadcrumb) :where(ol) {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--rui-breadcrumb-gap, 0.5rem);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  font-size: 0.875rem;\n}\n:where(.rui-breadcrumb) :where(li) {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--rui-breadcrumb-gap, 0.5rem);\n  color: var(--color-text-muted);\n}\n:where(.rui-breadcrumb) :where(li + li)::before {\n  content: var(--rui-breadcrumb-separator, \"/\");\n  color: var(--color-text-muted);\n}\n:where(.rui-breadcrumb) :where(a) {\n  color: var(--color-text-muted);\n  text-decoration: none;\n}\n:where(.rui-breadcrumb) :where(a:hover) {\n  color: var(--color-text);\n}\n:where(.rui-breadcrumb) :where(a:focus-visible) {\n  outline: 2px solid var(--color-primary);\n  outline-offset: 2px;\n  border-radius: 2px;\n}\n:where(.rui-breadcrumb) :where([aria-current=\"page\"]) {\n  color: var(--color-text);\n  text-decoration: none;\n}\n:where(.rui-breadcrumb) :where(ol[data-collapse] > li:not(:first-child, :nth-last-child(-n + 2))) {\n  display: none;\n}\n/* Items were hidden (4 or more): mark the gap after the first one. */\n:where(.rui-breadcrumb) :where(ol[data-collapse] > li:first-child:not(:nth-last-child(-n + 3)))::after {\n  content: var(--rui-breadcrumb-separator, \"/\") \" \u2026\";\n  color: var(--color-text-muted);\n}\n";
+//# sourceMappingURL=breadcrumbCss.d.ts.map

package/dist/style/breadcrumbCss.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbCss.d.ts","sourceRoot":"","sources":["../../src/style/breadcrumbCss.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,aAAa,g2CA6CzB,CAAA"}

package/dist/style/breadcrumbCss.js

@@ -0,0 +1,53 @@
+// Breadcrumb, class only: `<nav class="rui-breadcrumb" aria-label="…"><ol><li>…</li></ol></nav>`,
+// the last item with `aria-current="page"`. `data-collapse` on the <ol> keeps the first and
+// the last two items, replacing the others with "…" (hidden items are not reachable).
+// `--rui-breadcrumb-separator` is a CSS string, e.g. `"›"`.
+// Every selector is wrapped in :where() so it has zero specificity:
+// any class or style set by the consuming project wins without !important.
+const separator = `var(--rui-breadcrumb-separator, "/")`;
+export const breadcrumbCss = `
+:where(.rui-breadcrumb) :where(ol) {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--rui-breadcrumb-gap, 0.5rem);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font-size: 0.875rem;
+}
+:where(.rui-breadcrumb) :where(li) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--rui-breadcrumb-gap, 0.5rem);
+  color: var(--color-text-muted);
+}
+:where(.rui-breadcrumb) :where(li + li)::before {
+  content: ${separator};
+  color: var(--color-text-muted);
+}
+:where(.rui-breadcrumb) :where(a) {
+  color: var(--color-text-muted);
+  text-decoration: none;
+}
+:where(.rui-breadcrumb) :where(a:hover) {
+  color: var(--color-text);
+}
+:where(.rui-breadcrumb) :where(a:focus-visible) {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+:where(.rui-breadcrumb) :where([aria-current="page"]) {
+  color: var(--color-text);
+  text-decoration: none;
+}
+:where(.rui-breadcrumb) :where(ol[data-collapse] > li:not(:first-child, :nth-last-child(-n + 2))) {
+  display: none;
+}
+/* Items were hidden (4 or more): mark the gap after the first one. */
+:where(.rui-breadcrumb) :where(ol[data-collapse] > li:first-child:not(:nth-last-child(-n + 3)))::after {
+  content: ${separator} " …";
+  color: var(--color-text-muted);
+}
+`;

package/dist/style/cardCss.d.ts

@@ -0,0 +1,2 @@
+export declare const cardCss = "\n:where(.rui-card) {\n  display: block;\n  box-sizing: border-box;\n  padding: var(--rui-card-padding, 1.25rem);\n  border: 1px solid var(--rui-card-border, var(--color-border));\n  border-radius: var(--rui-card-radius, 12px);\n  background-color: var(--rui-card-bg, var(--color-surface));\n  box-shadow: var(--rui-card-shadow, none);\n  color: var(--color-text);\n}\n/* Custom properties inherit: a nested card must not take its parent's settings. */\n:where(.rui-card) > * {\n  --rui-card-bg: initial;\n  --rui-card-border: initial;\n  --rui-card-shadow: initial;\n  --rui-card-padding: initial;\n  --rui-card-radius: initial;\n  --rui-card-accent: initial;\n}\n:where(button.rui-card) {\n  font: inherit;\n  text-align: left;\n}\n:where(a.rui-card) {\n  color: inherit;\n  text-decoration: none;\n}\n:where(a.rui-card, button.rui-card, .rui-card[data-interactive]) {\n  cursor: pointer;\n  transition: border-color 120ms, box-shadow 120ms;\n}\n:where(a.rui-card, button.rui-card, .rui-card[data-interactive]):where(:hover) {\n  border-color: color-mix(in srgb, var(--rui-card-border, var(--color-border)) 70%, var(--color-text));\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--color-text) 10%, transparent);\n}\n:where(a.rui-card, button.rui-card, .rui-card[data-interactive]):where(:focus-visible) {\n  outline: 2px solid var(--rui-card-accent, var(--color-primary));\n  outline-offset: 2px;\n}\n@media (prefers-reduced-motion: reduce) {\n  :where(.rui-card) {\n    transition: none;\n  }\n}\n";
+//# sourceMappingURL=cardCss.d.ts.map

package/dist/style/cardCss.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cardCss.d.ts","sourceRoot":"","sources":["../../src/style/cardCss.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,m+CA6CnB,CAAA"}

package/dist/style/cardCss.js

@@ -0,0 +1,49 @@
+// Card surface, usable as a bare class (`rui-card`) or through the Card component.
+// Every selector is wrapped in :where() so it has zero specificity:
+// any class or style set by the consuming project wins without !important.
+export const cardCss = `
+:where(.rui-card) {
+  display: block;
+  box-sizing: border-box;
+  padding: var(--rui-card-padding, 1.25rem);
+  border: 1px solid var(--rui-card-border, var(--color-border));
+  border-radius: var(--rui-card-radius, 12px);
+  background-color: var(--rui-card-bg, var(--color-surface));
+  box-shadow: var(--rui-card-shadow, none);
+  color: var(--color-text);
+}
+/* Custom properties inherit: a nested card must not take its parent's settings. */
+:where(.rui-card) > * {
+  --rui-card-bg: initial;
+  --rui-card-border: initial;
+  --rui-card-shadow: initial;
+  --rui-card-padding: initial;
+  --rui-card-radius: initial;
+  --rui-card-accent: initial;
+}
+:where(button.rui-card) {
+  font: inherit;
+  text-align: left;
+}
+:where(a.rui-card) {
+  color: inherit;
+  text-decoration: none;
+}
+:where(a.rui-card, button.rui-card, .rui-card[data-interactive]) {
+  cursor: pointer;
+  transition: border-color 120ms, box-shadow 120ms;
+}
+:where(a.rui-card, button.rui-card, .rui-card[data-interactive]):where(:hover) {
+  border-color: color-mix(in srgb, var(--rui-card-border, var(--color-border)) 70%, var(--color-text));
+  box-shadow: 0 4px 12px color-mix(in srgb, var(--color-text) 10%, transparent);
+}
+:where(a.rui-card, button.rui-card, .rui-card[data-interactive]):where(:focus-visible) {
+  outline: 2px solid var(--rui-card-accent, var(--color-primary));
+  outline-offset: 2px;
+}
+@media (prefers-reduced-motion: reduce) {
+  :where(.rui-card) {
+    transition: none;
+  }
+}
+`;

package/dist/style/inputCss.d.ts

@@ -0,0 +1,2 @@
+export declare const inputCss = "\n:where(.rui-input) {\n  --rui-input-accent-color: var(--rui-input-accent, var(--color-primary));\n  --rui-input-invalid-color: var(--rui-input-invalid, var(--color-text));\n}\n\n:where(.rui-input:not([type=\"checkbox\"], [type=\"radio\"])) {\n  box-sizing: border-box;\n  width: 100%;\n  padding: 0.5rem 0.75rem;\n  border: 1px solid var(--color-border);\n  border-radius: 6px;\n  background-color: var(--color-bg);\n  color: var(--color-text);\n  font: inherit;\n  font-size: 0.875rem;\n  line-height: 1;\n  transition: border-color 120ms, box-shadow 120ms;\n}\n:where(.rui-input:not([type=\"checkbox\"], [type=\"radio\"]))::placeholder {\n  color: var(--color-text-muted);\n  opacity: 1;\n}\n:where(.rui-input:not([type=\"checkbox\"], [type=\"radio\"]):hover:not(:disabled)) {\n  border-color: color-mix(in srgb, var(--color-border) 70%, var(--color-text));\n}\n:where(.rui-input:not([type=\"checkbox\"], [type=\"radio\"]):focus-visible) {\n  outline: none;\n  border-color: var(--rui-input-accent-color);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rui-input-accent-color) 25%, transparent);\n}\n:where(.rui-input.rui-invalid:not([type=\"checkbox\"], [type=\"radio\"])) {\n  border-color: var(--rui-input-invalid-color);\n}\n:where(.rui-input.rui-invalid:not([type=\"checkbox\"], [type=\"radio\"]):focus-visible) {\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rui-input-invalid-color) 25%, transparent);\n}\n:where(textarea.rui-input) {\n  min-height: calc(1em + 1rem + 2px);\n  line-height: 1.4;\n  resize: vertical;\n}\n:where(select.rui-input) option {\n  background-color: var(--color-bg);\n  color: var(--color-text);\n}\n:where(.rui-input:disabled) {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n\n:where(input.rui-input[type=\"checkbox\"], input.rui-input[type=\"radio\"]) {\n  accent-color: var(--rui-input-accent-color);\n}\n\n:where(input.rui-input[type=\"checkbox\"][role=\"switch\"]) {\n  appearance: none;\n  position: relative;\n  box-sizing: border-box;\n  width: 2.25rem;\n  height: 1.25rem;\n  margin: 0;\n  border: none;\n  border-radius: 999px;\n  background-color: var(--color-border);\n  vertical-align: middle;\n  cursor: pointer;\n  transition: background-color 120ms;\n}\n:where(input.rui-input[type=\"checkbox\"][role=\"switch\"])::before {\n  content: \"\";\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  width: calc(1.25rem - 4px);\n  height: calc(1.25rem - 4px);\n  border-radius: 50%;\n  background-color: var(--color-surface);\n  box-shadow: 0 1px 2px color-mix(in srgb, var(--color-text) 25%, transparent);\n  transition: transform 120ms;\n}\n:where(input.rui-input[type=\"checkbox\"][role=\"switch\"]:checked) {\n  background-color: var(--rui-input-accent-color);\n}\n:where(input.rui-input[type=\"checkbox\"][role=\"switch\"]:checked)::before {\n  transform: translateX(1rem);\n}\n:where(input.rui-input[type=\"checkbox\"][role=\"switch\"]:focus-visible) {\n  outline: 2px solid var(--rui-input-accent-color);\n  outline-offset: 2px;\n}\n:where(input.rui-input[type=\"checkbox\"][role=\"switch\"]:disabled) {\n  cursor: not-allowed;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :where(.rui-input),\n  :where(input.rui-input[type=\"checkbox\"][role=\"switch\"])::before {\n    transition: none;\n  }\n}\n";
+//# sourceMappingURL=inputCss.d.ts.map

package/dist/style/inputCss.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"inputCss.d.ts","sourceRoot":"","sources":["../../src/style/inputCss.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,QAAQ,qsGAqGpB,CAAA"}

package/dist/style/inputCss.js

@@ -0,0 +1,107 @@
+// Themed look for native fields: the project puts `rui-input` on its own elements
+// (`rui-input rui-invalid` for the error state). Injected by ThemeProvider.
+// Every selector is wrapped in :where() so it has zero specificity:
+// any class or style set by the consuming project wins without !important.
+// Text fields match Button: same vertical padding, font size, line height, border and radius.
+export const inputCss = `
+:where(.rui-input) {
+  --rui-input-accent-color: var(--rui-input-accent, var(--color-primary));
+  --rui-input-invalid-color: var(--rui-input-invalid, var(--color-text));
+}
+
+:where(.rui-input:not([type="checkbox"], [type="radio"])) {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  background-color: var(--color-bg);
+  color: var(--color-text);
+  font: inherit;
+  font-size: 0.875rem;
+  line-height: 1;
+  transition: border-color 120ms, box-shadow 120ms;
+}
+:where(.rui-input:not([type="checkbox"], [type="radio"]))::placeholder {
+  color: var(--color-text-muted);
+  opacity: 1;
+}
+:where(.rui-input:not([type="checkbox"], [type="radio"]):hover:not(:disabled)) {
+  border-color: color-mix(in srgb, var(--color-border) 70%, var(--color-text));
+}
+:where(.rui-input:not([type="checkbox"], [type="radio"]):focus-visible) {
+  outline: none;
+  border-color: var(--rui-input-accent-color);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rui-input-accent-color) 25%, transparent);
+}
+:where(.rui-input.rui-invalid:not([type="checkbox"], [type="radio"])) {
+  border-color: var(--rui-input-invalid-color);
+}
+:where(.rui-input.rui-invalid:not([type="checkbox"], [type="radio"]):focus-visible) {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rui-input-invalid-color) 25%, transparent);
+}
+:where(textarea.rui-input) {
+  min-height: calc(1em + 1rem + 2px);
+  line-height: 1.4;
+  resize: vertical;
+}
+:where(select.rui-input) option {
+  background-color: var(--color-bg);
+  color: var(--color-text);
+}
+:where(.rui-input:disabled) {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+:where(input.rui-input[type="checkbox"], input.rui-input[type="radio"]) {
+  accent-color: var(--rui-input-accent-color);
+}
+
+:where(input.rui-input[type="checkbox"][role="switch"]) {
+  appearance: none;
+  position: relative;
+  box-sizing: border-box;
+  width: 2.25rem;
+  height: 1.25rem;
+  margin: 0;
+  border: none;
+  border-radius: 999px;
+  background-color: var(--color-border);
+  vertical-align: middle;
+  cursor: pointer;
+  transition: background-color 120ms;
+}
+:where(input.rui-input[type="checkbox"][role="switch"])::before {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: calc(1.25rem - 4px);
+  height: calc(1.25rem - 4px);
+  border-radius: 50%;
+  background-color: var(--color-surface);
+  box-shadow: 0 1px 2px color-mix(in srgb, var(--color-text) 25%, transparent);
+  transition: transform 120ms;
+}
+:where(input.rui-input[type="checkbox"][role="switch"]:checked) {
+  background-color: var(--rui-input-accent-color);
+}
+:where(input.rui-input[type="checkbox"][role="switch"]:checked)::before {
+  transform: translateX(1rem);
+}
+:where(input.rui-input[type="checkbox"][role="switch"]:focus-visible) {
+  outline: 2px solid var(--rui-input-accent-color);
+  outline-offset: 2px;
+}
+:where(input.rui-input[type="checkbox"][role="switch"]:disabled) {
+  cursor: not-allowed;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where(.rui-input),
+  :where(input.rui-input[type="checkbox"][role="switch"])::before {
+    transition: none;
+  }
+}
+`;

package/dist/style/loaderCss.d.ts

@@ -0,0 +1,2 @@
+export declare const loaderCss = "\n:where(.rui-spinner) {\n  display: inline-block;\n  box-sizing: border-box;\n  flex-shrink: 0;\n  width: var(--rui-spinner-size, 1em);\n  height: var(--rui-spinner-size, 1em);\n  border: var(--rui-spinner-thickness, 0.15em) solid var(--rui-spinner-color, currentColor);\n  border-top-color: transparent;\n  border-radius: 50%;\n  vertical-align: middle;\n  animation: rui-spin 0.8s linear infinite;\n}\n:where(.rui-skeleton) {\n  display: block;\n  border-radius: 4px;\n  background-color: var(--rui-skeleton-color, var(--color-border));\n  animation: rui-pulse 1.5s ease-in-out infinite;\n}\n@media (prefers-reduced-motion: reduce) {\n  /* The spinner is the only loading signal: slowed down, not stopped. */\n  :where(.rui-spinner) {\n    animation-duration: 2s;\n  }\n  :where(.rui-skeleton) {\n    animation: none;\n  }\n}\n@keyframes rui-spin {\n  to { transform: rotate(360deg); }\n}\n@keyframes rui-pulse {\n  50% { opacity: 0.5; }\n}\n";
+//# sourceMappingURL=loaderCss.d.ts.map

package/dist/style/loaderCss.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"loaderCss.d.ts","sourceRoot":"","sources":["../../src/style/loaderCss.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,SAAS,s7BAkCrB,CAAA"}

package/dist/style/loaderCss.js

@@ -0,0 +1,39 @@
+// Loading indicators, usable as bare classes (`rui-spinner`, `rui-skeleton`) or through
+// the Spinner / Skeleton components. Injected by ThemeProvider and by the components.
+// Every selector is wrapped in :where() so it has zero specificity:
+// any class or style set by the consuming project wins without !important.
+export const loaderCss = `
+:where(.rui-spinner) {
+  display: inline-block;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  width: var(--rui-spinner-size, 1em);
+  height: var(--rui-spinner-size, 1em);
+  border: var(--rui-spinner-thickness, 0.15em) solid var(--rui-spinner-color, currentColor);
+  border-top-color: transparent;
+  border-radius: 50%;
+  vertical-align: middle;
+  animation: rui-spin 0.8s linear infinite;
+}
+:where(.rui-skeleton) {
+  display: block;
+  border-radius: 4px;
+  background-color: var(--rui-skeleton-color, var(--color-border));
+  animation: rui-pulse 1.5s ease-in-out infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+  /* The spinner is the only loading signal: slowed down, not stopped. */
+  :where(.rui-spinner) {
+    animation-duration: 2s;
+  }
+  :where(.rui-skeleton) {
+    animation: none;
+  }
+}
+@keyframes rui-spin {
+  to { transform: rotate(360deg); }
+}
+@keyframes rui-pulse {
+  50% { opacity: 0.5; }
+}
+`;

package/dist/style/menuCss.d.ts

@@ -0,0 +1,2 @@
+export declare const menuCss = "\n:where(.rui-menu) {\n  position: fixed;\n  top: 0;\n  left: 0;\n  box-sizing: border-box;\n  min-width: 8rem;\n  padding: 0.25rem;\n  border: 1px solid var(--rui-menu-border, var(--color-border));\n  border-radius: 8px;\n  background-color: var(--rui-menu-bg, var(--color-surface));\n  box-shadow: var(--rui-menu-shadow, 0 4px 16px color-mix(in srgb, var(--color-text) 15%, transparent));\n  color: var(--color-text);\n  font-size: 0.875rem;\n  outline: none;\n  animation: rui-menu-in 120ms ease-out;\n}\n/* Not positioned yet: invisible but focusable, so the first item can take the focus. */\n:where(.rui-menu:not([data-placement])) {\n  opacity: 0;\n  animation: none;\n}\n:where(.rui-menu-item) {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.375rem 0.625rem;\n  border-radius: 4px;\n  color: inherit;\n  text-decoration: none;\n  cursor: pointer;\n  outline: none;\n  user-select: none;\n}\n:where(.rui-menu-item:not([aria-disabled=\"true\"]):hover, .rui-menu-item:not([aria-disabled=\"true\"]):focus) {\n  background-color: color-mix(in srgb, var(--rui-menu-accent, var(--color-primary)) 12%, transparent);\n}\n:where(.rui-menu-item[aria-disabled=\"true\"]) {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n:where(.rui-menu-indicator) {\n  display: inline-flex;\n  justify-content: center;\n  width: 1em;\n  color: var(--rui-menu-accent, var(--color-primary));\n}\n:where(.rui-menu-label) {\n  padding: 0.375rem 0.625rem 0.25rem;\n  color: var(--color-text-muted);\n  font-size: 0.75rem;\n  font-weight: 600;\n}\n:where(.rui-menu-separator) {\n  height: 1px;\n  margin: 0.25rem 0;\n  background-color: var(--color-border);\n}\n@media (prefers-reduced-motion: reduce) {\n  :where(.rui-menu) {\n    animation: none;\n  }\n}\n@keyframes rui-menu-in {\n  from { opacity: 0; transform: translateY(-2px); }\n}\n";
+//# sourceMappingURL=menuCss.d.ts.map

package/dist/style/menuCss.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menuCss.d.ts","sourceRoot":"","sources":["../../src/style/menuCss.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,OAAO,mzDAkEnB,CAAA"}