@dnanpm/ui-components 0.6.0 → 0.8.0

package/dist/components/Modal/useNativeDialog.cjs

@@ -0,0 +1,126 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+let bodyScrollLockCount = 0;
+let previousBodyOverflow = "";
+const lockBodyScroll = () => {
+  if (bodyScrollLockCount === 0) {
+    previousBodyOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+  }
+  bodyScrollLockCount += 1;
+};
+const unlockBodyScroll = () => {
+  bodyScrollLockCount = Math.max(bodyScrollLockCount - 1, 0);
+  if (bodyScrollLockCount === 0) {
+    document.body.style.overflow = previousBodyOverflow;
+    previousBodyOverflow = "";
+  }
+};
+const setDialogOpen = (dialog, open) => {
+  {
+    if (typeof dialog.showModal === "function") {
+      if (!dialog.open) dialog.showModal();
+    }
+  }
+};
+const findAutofocusTarget = (dialog) => {
+  if (dialog.hasAttribute("autofocus")) return dialog;
+  return dialog.querySelector("[autofocus]") ?? Array.from(dialog.querySelectorAll("*")).find(
+    (element) => "autofocus" in element && element.autofocus
+  );
+};
+const useNativeDialog = ({ open, keepMounted, onOpenChange }) => {
+  const dialogRef = react.useRef(null);
+  const restoreFocusRef = react.useRef(null);
+  const closeTimerRef = react.useRef(null);
+  const bodyScrollLockedRef = react.useRef(false);
+  const [phase, setPhase] = react.useState("closed");
+  const isPresent = keepMounted || open || phase !== "closed";
+  const notifyOpenChange = react.useCallback(
+    (nextOpen) => {
+      onOpenChange?.(nextOpen);
+    },
+    [onOpenChange]
+  );
+  const finishClose = react.useCallback(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    closeTimerRef.current = null;
+    if (dialog.open) {
+      dialog.close();
+    } else {
+      setPhase("closed");
+    }
+  }, []);
+  const close = react.useCallback(() => notifyOpenChange(false), [notifyOpenChange]);
+  const clearCloseTimer = react.useCallback(() => {
+    if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
+    closeTimerRef.current = null;
+  }, []);
+  react.useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    if (open) {
+      clearCloseTimer();
+      if (phase === "closing" || phase === "closed") setPhase("open");
+      if (!dialog.open) {
+        restoreFocusRef.current = document.activeElement;
+        const autofocusTarget = findAutofocusTarget(dialog);
+        const existingFocusTarget = document.activeElement instanceof HTMLElement && document.activeElement !== dialog && dialog.contains(document.activeElement) ? document.activeElement : null;
+        setDialogOpen(dialog);
+        (autofocusTarget ?? existingFocusTarget ?? dialog.querySelector("[data-dialog-autofocus]"))?.focus();
+      }
+      if (dialog.open && !bodyScrollLockedRef.current) {
+        lockBodyScroll();
+        bodyScrollLockedRef.current = true;
+      }
+    } else if (dialog.open && phase === "open") {
+      setPhase("closing");
+    }
+  }, [clearCloseTimer, open, phase]);
+  react.useEffect(() => {
+    if (phase !== "closing") return;
+    const dialog = dialogRef.current;
+    if (!dialog || !dialog.open) return;
+    const styles = window.getComputedStyle(dialog);
+    const durations = `${styles.transitionDuration},${styles.animationDuration}`.split(",").map((duration2) => {
+      const value = Number.parseFloat(duration2);
+      return Number.isFinite(value) ? duration2.trim().endsWith("ms") ? value : value * 1e3 : 0;
+    });
+    const duration = Math.max(...durations, 0);
+    closeTimerRef.current = setTimeout(finishClose, duration);
+    return () => {
+      clearCloseTimer();
+    };
+  }, [clearCloseTimer, finishClose, phase]);
+  react.useEffect(
+    () => () => {
+      clearCloseTimer();
+      if (bodyScrollLockedRef.current) {
+        unlockBodyScroll();
+        bodyScrollLockedRef.current = false;
+      }
+    },
+    [clearCloseTimer]
+  );
+  react.useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    const handleClose = () => {
+      clearCloseTimer();
+      setPhase("closed");
+      if (bodyScrollLockedRef.current) {
+        unlockBodyScroll();
+        bodyScrollLockedRef.current = false;
+      }
+      restoreFocusRef.current?.focus();
+      restoreFocusRef.current = null;
+    };
+    dialog.addEventListener("close", handleClose);
+    return () => dialog.removeEventListener("close", handleClose);
+  }, [clearCloseTimer, isPresent]);
+  return { dialogRef, close, phase, isPresent };
+};
+exports.useNativeDialog = useNativeDialog;
+//# sourceMappingURL=useNativeDialog.cjs.map

package/dist/components/Modal/useNativeDialog.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useNativeDialog.cjs","sources":["../../../src/components/Modal/useNativeDialog.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\ninterface UseNativeDialogOptions {\n    open: boolean;\n    keepMounted: boolean;\n    onOpenChange?: (open: boolean) => void;\n}\n\ntype DialogPhase = 'closed' | 'open' | 'closing';\n\nlet bodyScrollLockCount = 0;\nlet previousBodyOverflow = '';\n\nconst lockBodyScroll = () => {\n    if (bodyScrollLockCount === 0) {\n        previousBodyOverflow = document.body.style.overflow;\n        document.body.style.overflow = 'hidden';\n    }\n    bodyScrollLockCount += 1;\n};\n\nconst unlockBodyScroll = () => {\n    bodyScrollLockCount = Math.max(bodyScrollLockCount - 1, 0);\n    if (bodyScrollLockCount === 0) {\n        document.body.style.overflow = previousBodyOverflow;\n        previousBodyOverflow = '';\n    }\n};\n\nconst setDialogOpen = (dialog: HTMLDialogElement, open: boolean) => {\n    if (open) {\n        if (typeof dialog.showModal === 'function') {\n            if (!dialog.open) dialog.showModal();\n        }\n    } else if (dialog.open) {\n        if (typeof dialog.close === 'function') {\n            dialog.close();\n        }\n    }\n};\n\nconst findAutofocusTarget = (dialog: HTMLDialogElement) => {\n    if (dialog.hasAttribute('autofocus')) return dialog;\n\n    return (\n        dialog.querySelector<HTMLElement>('[autofocus]') ??\n        Array.from(dialog.querySelectorAll<HTMLElement>('*')).find(\n            (element) =>\n                'autofocus' in element &&\n                (element as HTMLElement & { autofocus: boolean }).autofocus,\n        )\n    );\n};\n\nexport const useNativeDialog = ({ open, keepMounted, onOpenChange }: UseNativeDialogOptions) => {\n    const dialogRef = useRef<HTMLDialogElement>(null);\n    const restoreFocusRef = useRef<HTMLElement | null>(null);\n    const closeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n    const bodyScrollLockedRef = useRef(false);\n    const [phase, setPhase] = useState<DialogPhase>('closed');\n    const isPresent = keepMounted || open || phase !== 'closed';\n\n    const notifyOpenChange = useCallback(\n        (nextOpen: boolean) => {\n            onOpenChange?.(nextOpen);\n        },\n        [onOpenChange],\n    );\n\n    const finishClose = useCallback(() => {\n        const dialog = dialogRef.current;\n        if (!dialog) return;\n        closeTimerRef.current = null;\n        if (dialog.open) {\n            dialog.close();\n        } else {\n            setPhase('closed');\n        }\n    }, []);\n\n    const close = useCallback(() => notifyOpenChange(false), [notifyOpenChange]);\n\n    const clearCloseTimer = useCallback(() => {\n        if (closeTimerRef.current) clearTimeout(closeTimerRef.current);\n        closeTimerRef.current = null;\n    }, []);\n\n    useEffect(() => {\n        const dialog = dialogRef.current;\n        if (!dialog) return;\n\n        if (open) {\n            clearCloseTimer();\n            if (phase === 'closing' || phase === 'closed') setPhase('open');\n            if (!dialog.open) {\n                restoreFocusRef.current = document.activeElement as HTMLElement | null;\n                const autofocusTarget = findAutofocusTarget(dialog);\n                const existingFocusTarget =\n                    document.activeElement instanceof HTMLElement &&\n                    document.activeElement !== dialog &&\n                    dialog.contains(document.activeElement)\n                        ? document.activeElement\n                        : null;\n                setDialogOpen(dialog, true);\n                (\n                    autofocusTarget ??\n                    existingFocusTarget ??\n                    dialog.querySelector<HTMLElement>('[data-dialog-autofocus]')\n                )?.focus();\n            }\n            if (dialog.open && !bodyScrollLockedRef.current) {\n                lockBodyScroll();\n                bodyScrollLockedRef.current = true;\n            }\n        } else if (dialog.open && phase === 'open') {\n            setPhase('closing');\n        }\n    }, [clearCloseTimer, open, phase]);\n\n    useEffect(() => {\n        if (phase !== 'closing') return;\n        const dialog = dialogRef.current;\n        if (!dialog || !dialog.open) return;\n\n        const styles = window.getComputedStyle(dialog);\n        const durations = `${styles.transitionDuration},${styles.animationDuration}`\n            .split(',')\n            .map((duration) => {\n                const value = Number.parseFloat(duration);\n                return Number.isFinite(value)\n                    ? duration.trim().endsWith('ms')\n                        ? value\n                        : value * 1000\n                    : 0;\n            });\n        const duration = Math.max(...durations, 0);\n        closeTimerRef.current = setTimeout(finishClose, duration);\n\n        return () => {\n            clearCloseTimer();\n        };\n    }, [clearCloseTimer, finishClose, phase]);\n\n    useEffect(\n        () => () => {\n            clearCloseTimer();\n            if (bodyScrollLockedRef.current) {\n                unlockBodyScroll();\n                bodyScrollLockedRef.current = false;\n            }\n        },\n        [clearCloseTimer],\n    );\n\n    useEffect(() => {\n        const dialog = dialogRef.current;\n        if (!dialog) return;\n\n        const handleClose = () => {\n            clearCloseTimer();\n            setPhase('closed');\n            if (bodyScrollLockedRef.current) {\n                unlockBodyScroll();\n                bodyScrollLockedRef.current = false;\n            }\n            restoreFocusRef.current?.focus();\n            restoreFocusRef.current = null;\n        };\n\n        dialog.addEventListener('close', handleClose);\n        return () => dialog.removeEventListener('close', handleClose);\n    }, [clearCloseTimer, isPresent]);\n\n    return { dialogRef, close, phase, isPresent };\n};\n"],"names":["useRef","useState","useCallback","useEffect","duration"],"mappings":"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"}

package/dist/components/Modal/useNativeDialog.d.ts

@@ -0,0 +1,14 @@
+interface UseNativeDialogOptions {
+    open: boolean;
+    keepMounted: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+type DialogPhase = 'closed' | 'open' | 'closing';
+export declare const useNativeDialog: ({ open, keepMounted, onOpenChange }: UseNativeDialogOptions) => {
+    dialogRef: import('react').RefObject<HTMLDialogElement | null>;
+    close: () => void;
+    phase: DialogPhase;
+    isPresent: boolean;
+};
+export {};
+//# sourceMappingURL=useNativeDialog.d.ts.map

package/dist/components/Modal/useNativeDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useNativeDialog.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/useNativeDialog.ts"],"names":[],"mappings":"AAEA,UAAU,sBAAsB;IAC5B,IAAI,EAAE,OAAO,CAAC;IACd,WAAW,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C;AAED,KAAK,WAAW,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC;AA8CjD,eAAO,MAAM,eAAe,GAAI,qCAAqC,sBAAsB;;;;;CAwH1F,CAAC"}

package/dist/components/Modal/useNativeDialog.js

@@ -0,0 +1,126 @@
+import { useRef, useState, useCallback, useEffect } from "react";
+let bodyScrollLockCount = 0;
+let previousBodyOverflow = "";
+const lockBodyScroll = () => {
+  if (bodyScrollLockCount === 0) {
+    previousBodyOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+  }
+  bodyScrollLockCount += 1;
+};
+const unlockBodyScroll = () => {
+  bodyScrollLockCount = Math.max(bodyScrollLockCount - 1, 0);
+  if (bodyScrollLockCount === 0) {
+    document.body.style.overflow = previousBodyOverflow;
+    previousBodyOverflow = "";
+  }
+};
+const setDialogOpen = (dialog, open) => {
+  {
+    if (typeof dialog.showModal === "function") {
+      if (!dialog.open) dialog.showModal();
+    }
+  }
+};
+const findAutofocusTarget = (dialog) => {
+  if (dialog.hasAttribute("autofocus")) return dialog;
+  return dialog.querySelector("[autofocus]") ?? Array.from(dialog.querySelectorAll("*")).find(
+    (element) => "autofocus" in element && element.autofocus
+  );
+};
+const useNativeDialog = ({ open, keepMounted, onOpenChange }) => {
+  const dialogRef = useRef(null);
+  const restoreFocusRef = useRef(null);
+  const closeTimerRef = useRef(null);
+  const bodyScrollLockedRef = useRef(false);
+  const [phase, setPhase] = useState("closed");
+  const isPresent = keepMounted || open || phase !== "closed";
+  const notifyOpenChange = useCallback(
+    (nextOpen) => {
+      onOpenChange?.(nextOpen);
+    },
+    [onOpenChange]
+  );
+  const finishClose = useCallback(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    closeTimerRef.current = null;
+    if (dialog.open) {
+      dialog.close();
+    } else {
+      setPhase("closed");
+    }
+  }, []);
+  const close = useCallback(() => notifyOpenChange(false), [notifyOpenChange]);
+  const clearCloseTimer = useCallback(() => {
+    if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
+    closeTimerRef.current = null;
+  }, []);
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    if (open) {
+      clearCloseTimer();
+      if (phase === "closing" || phase === "closed") setPhase("open");
+      if (!dialog.open) {
+        restoreFocusRef.current = document.activeElement;
+        const autofocusTarget = findAutofocusTarget(dialog);
+        const existingFocusTarget = document.activeElement instanceof HTMLElement && document.activeElement !== dialog && dialog.contains(document.activeElement) ? document.activeElement : null;
+        setDialogOpen(dialog);
+        (autofocusTarget ?? existingFocusTarget ?? dialog.querySelector("[data-dialog-autofocus]"))?.focus();
+      }
+      if (dialog.open && !bodyScrollLockedRef.current) {
+        lockBodyScroll();
+        bodyScrollLockedRef.current = true;
+      }
+    } else if (dialog.open && phase === "open") {
+      setPhase("closing");
+    }
+  }, [clearCloseTimer, open, phase]);
+  useEffect(() => {
+    if (phase !== "closing") return;
+    const dialog = dialogRef.current;
+    if (!dialog || !dialog.open) return;
+    const styles = window.getComputedStyle(dialog);
+    const durations = `${styles.transitionDuration},${styles.animationDuration}`.split(",").map((duration2) => {
+      const value = Number.parseFloat(duration2);
+      return Number.isFinite(value) ? duration2.trim().endsWith("ms") ? value : value * 1e3 : 0;
+    });
+    const duration = Math.max(...durations, 0);
+    closeTimerRef.current = setTimeout(finishClose, duration);
+    return () => {
+      clearCloseTimer();
+    };
+  }, [clearCloseTimer, finishClose, phase]);
+  useEffect(
+    () => () => {
+      clearCloseTimer();
+      if (bodyScrollLockedRef.current) {
+        unlockBodyScroll();
+        bodyScrollLockedRef.current = false;
+      }
+    },
+    [clearCloseTimer]
+  );
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    const handleClose = () => {
+      clearCloseTimer();
+      setPhase("closed");
+      if (bodyScrollLockedRef.current) {
+        unlockBodyScroll();
+        bodyScrollLockedRef.current = false;
+      }
+      restoreFocusRef.current?.focus();
+      restoreFocusRef.current = null;
+    };
+    dialog.addEventListener("close", handleClose);
+    return () => dialog.removeEventListener("close", handleClose);
+  }, [clearCloseTimer, isPresent]);
+  return { dialogRef, close, phase, isPresent };
+};
+export {
+  useNativeDialog
+};
+//# sourceMappingURL=useNativeDialog.js.map

package/dist/components/Modal/useNativeDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useNativeDialog.js","sources":["../../../src/components/Modal/useNativeDialog.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\ninterface UseNativeDialogOptions {\n    open: boolean;\n    keepMounted: boolean;\n    onOpenChange?: (open: boolean) => void;\n}\n\ntype DialogPhase = 'closed' | 'open' | 'closing';\n\nlet bodyScrollLockCount = 0;\nlet previousBodyOverflow = '';\n\nconst lockBodyScroll = () => {\n    if (bodyScrollLockCount === 0) {\n        previousBodyOverflow = document.body.style.overflow;\n        document.body.style.overflow = 'hidden';\n    }\n    bodyScrollLockCount += 1;\n};\n\nconst unlockBodyScroll = () => {\n    bodyScrollLockCount = Math.max(bodyScrollLockCount - 1, 0);\n    if (bodyScrollLockCount === 0) {\n        document.body.style.overflow = previousBodyOverflow;\n        previousBodyOverflow = '';\n    }\n};\n\nconst setDialogOpen = (dialog: HTMLDialogElement, open: boolean) => {\n    if (open) {\n        if (typeof dialog.showModal === 'function') {\n            if (!dialog.open) dialog.showModal();\n        }\n    } else if (dialog.open) {\n        if (typeof dialog.close === 'function') {\n            dialog.close();\n        }\n    }\n};\n\nconst findAutofocusTarget = (dialog: HTMLDialogElement) => {\n    if (dialog.hasAttribute('autofocus')) return dialog;\n\n    return (\n        dialog.querySelector<HTMLElement>('[autofocus]') ??\n        Array.from(dialog.querySelectorAll<HTMLElement>('*')).find(\n            (element) =>\n                'autofocus' in element &&\n                (element as HTMLElement & { autofocus: boolean }).autofocus,\n        )\n    );\n};\n\nexport const useNativeDialog = ({ open, keepMounted, onOpenChange }: UseNativeDialogOptions) => {\n    const dialogRef = useRef<HTMLDialogElement>(null);\n    const restoreFocusRef = useRef<HTMLElement | null>(null);\n    const closeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n    const bodyScrollLockedRef = useRef(false);\n    const [phase, setPhase] = useState<DialogPhase>('closed');\n    const isPresent = keepMounted || open || phase !== 'closed';\n\n    const notifyOpenChange = useCallback(\n        (nextOpen: boolean) => {\n            onOpenChange?.(nextOpen);\n        },\n        [onOpenChange],\n    );\n\n    const finishClose = useCallback(() => {\n        const dialog = dialogRef.current;\n        if (!dialog) return;\n        closeTimerRef.current = null;\n        if (dialog.open) {\n            dialog.close();\n        } else {\n            setPhase('closed');\n        }\n    }, []);\n\n    const close = useCallback(() => notifyOpenChange(false), [notifyOpenChange]);\n\n    const clearCloseTimer = useCallback(() => {\n        if (closeTimerRef.current) clearTimeout(closeTimerRef.current);\n        closeTimerRef.current = null;\n    }, []);\n\n    useEffect(() => {\n        const dialog = dialogRef.current;\n        if (!dialog) return;\n\n        if (open) {\n            clearCloseTimer();\n            if (phase === 'closing' || phase === 'closed') setPhase('open');\n            if (!dialog.open) {\n                restoreFocusRef.current = document.activeElement as HTMLElement | null;\n                const autofocusTarget = findAutofocusTarget(dialog);\n                const existingFocusTarget =\n                    document.activeElement instanceof HTMLElement &&\n                    document.activeElement !== dialog &&\n                    dialog.contains(document.activeElement)\n                        ? document.activeElement\n                        : null;\n                setDialogOpen(dialog, true);\n                (\n                    autofocusTarget ??\n                    existingFocusTarget ??\n                    dialog.querySelector<HTMLElement>('[data-dialog-autofocus]')\n                )?.focus();\n            }\n            if (dialog.open && !bodyScrollLockedRef.current) {\n                lockBodyScroll();\n                bodyScrollLockedRef.current = true;\n            }\n        } else if (dialog.open && phase === 'open') {\n            setPhase('closing');\n        }\n    }, [clearCloseTimer, open, phase]);\n\n    useEffect(() => {\n        if (phase !== 'closing') return;\n        const dialog = dialogRef.current;\n        if (!dialog || !dialog.open) return;\n\n        const styles = window.getComputedStyle(dialog);\n        const durations = `${styles.transitionDuration},${styles.animationDuration}`\n            .split(',')\n            .map((duration) => {\n                const value = Number.parseFloat(duration);\n                return Number.isFinite(value)\n                    ? duration.trim().endsWith('ms')\n                        ? value\n                        : value * 1000\n                    : 0;\n            });\n        const duration = Math.max(...durations, 0);\n        closeTimerRef.current = setTimeout(finishClose, duration);\n\n        return () => {\n            clearCloseTimer();\n        };\n    }, [clearCloseTimer, finishClose, phase]);\n\n    useEffect(\n        () => () => {\n            clearCloseTimer();\n            if (bodyScrollLockedRef.current) {\n                unlockBodyScroll();\n                bodyScrollLockedRef.current = false;\n            }\n        },\n        [clearCloseTimer],\n    );\n\n    useEffect(() => {\n        const dialog = dialogRef.current;\n        if (!dialog) return;\n\n        const handleClose = () => {\n            clearCloseTimer();\n            setPhase('closed');\n            if (bodyScrollLockedRef.current) {\n                unlockBodyScroll();\n                bodyScrollLockedRef.current = false;\n            }\n            restoreFocusRef.current?.focus();\n            restoreFocusRef.current = null;\n        };\n\n        dialog.addEventListener('close', handleClose);\n        return () => dialog.removeEventListener('close', handleClose);\n    }, [clearCloseTimer, isPresent]);\n\n    return { dialogRef, close, phase, isPresent };\n};\n"],"names":["duration"],"mappings":"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"}

package/dist/components/Pictograph/Pictograph.css

@@ -13,14 +13,16 @@
  *   944px  — desktop
  */
 
-._pictograph_11vg9_16 {
-    --pictograph-icon-size: 40px;
-    --pictograph-direction: row;
-    --pictograph-align: flex-start;
-    --pictograph-text-align: left;
-    --pictograph-item-gap: 20px;
-    --pictograph-text-color: inherit;
-    --pictograph-icon-color: var(--color-semantic-foreground-primary-strong);
+._pictograph_1qho1_16 {
+    --_pictograph-icon-size: 40px;
+    --_pictograph-direction: row;
+    --_pictograph-align: flex-start;
+    --_pictograph-text-align: left;
+    --_pictograph-item-gap: var(--spacing-space-20);
+    --_pictograph-text-color: var(--color-semantic-foreground-default);
+    --_pictograph-icon-color: var(--color-semantic-foreground-primary-strong);
+    --_pictograph-heading-font: var(--typography-heading-xs);
+    --_pictograph-long-body-font: var(--typography-body-md);
 
     margin: 0;
     container-name: pictograph;
@@ -29,16 +31,16 @@
 
 /* ─── Mode: vertical (icon above text) ─── */
 
-._pictograph--vertical_11vg9_32 {
-    --pictograph-direction: column;
-    --pictograph-item-gap: 10px;
+._pictograph--vertical_1qho1_34 {
+    --_pictograph-direction: column;
+    --_pictograph-item-gap: var(--spacing-space-12);
 }
 
 /* ─── List layout ─── */
 
-._pictograph__list_11vg9_39 {
+._pictograph__list_1qho1_41 {
     display: grid;
-    gap: 30px;
+    gap: var(--spacing-space-32);
     list-style: none;
     margin: 0;
     padding: 0;
@@ -47,117 +49,127 @@
 /* ─── Column variants (container queries) ─── */
 
 @container pictograph (min-width: 440px) {
-    ._pictograph__list--5_11vg9_50 {
+    ._pictograph__list--5_1qho1_52 {
         grid-template-columns: repeat(2, 1fr);
     }
 }
 
 @container pictograph (min-width: 688px) {
-    ._pictograph__list--2_11vg9_56,
-    ._pictograph__list--3_11vg9_57,
-    ._pictograph__list--4_11vg9_58 {
+    ._pictograph__list--2_1qho1_58,
+    ._pictograph__list--3_1qho1_59,
+    ._pictograph__list--4_1qho1_60 {
         grid-template-columns: repeat(2, 1fr);
     }
 
-    ._pictograph__list--5_11vg9_50 {
+    ._pictograph__list--5_1qho1_52 {
         grid-template-columns: repeat(3, 1fr);
     }
 }
 
 @container pictograph (min-width: 944px) {
-    ._pictograph__list--3_11vg9_57 {
+    ._pictograph__list--3_1qho1_59 {
         grid-template-columns: repeat(3, 1fr);
     }
 
-    ._pictograph__list--4_11vg9_58 {
+    ._pictograph__list--4_1qho1_60 {
         grid-template-columns: repeat(4, 1fr);
     }
 
-    ._pictograph__list--5_11vg9_50 {
+    ._pictograph__list--5_1qho1_52 {
         grid-template-columns: repeat(5, 1fr);
     }
 }
 
 /* ─── Mode: horizontal (icon beside text) ─── */
 
-._pictograph--horizontal_11vg9_83 {
-    --pictograph-direction: row;
-    --pictograph-item-gap: 20px;
+._pictograph--horizontal_1qho1_85 {
+    --_pictograph-direction: row;
+    --_pictograph-item-gap: var(--spacing-space-20);
 }
 
-._pictograph--horizontal_11vg9_83 ._pictograph__list_11vg9_39 {
-    gap: 20px 30px;
+._pictograph--horizontal_1qho1_85 ._pictograph__list_1qho1_41 {
+    gap: var(--spacing-space-32);
+}
+
+._pictograph--horizontal_1qho1_85:has(li[data-pictograph-content='short']):not(
+        :has(li[data-pictograph-content='long'])
+    )
+    ._pictograph__list_1qho1_41 {
+    gap: var(--spacing-space-20) var(--spacing-space-32);
 }
 
 /* Horizontal mode: column overrides */
-._pictograph--horizontal_11vg9_83 ._pictograph__list--4_11vg9_58,
-._pictograph--horizontal_11vg9_83 ._pictograph__list--5_11vg9_50 {
+._pictograph--horizontal_1qho1_85 ._pictograph__list--4_1qho1_60,
+._pictograph--horizontal_1qho1_85 ._pictograph__list--5_1qho1_52 {
     grid-template-columns: 1fr;
 }
 
 @container pictograph (min-width: 440px) {
-    ._pictograph--horizontal_11vg9_83 ._pictograph__list--4_11vg9_58,
-    ._pictograph--horizontal_11vg9_83 ._pictograph__list--5_11vg9_50 {
+    ._pictograph--horizontal_1qho1_85 ._pictograph__list--4_1qho1_60,
+    ._pictograph--horizontal_1qho1_85 ._pictograph__list--5_1qho1_52 {
         grid-template-columns: repeat(2, 1fr);
     }
 }
 
 @container pictograph (min-width: 688px) {
-    ._pictograph--horizontal_11vg9_83 ._pictograph__list--5_11vg9_50 {
+    ._pictograph--horizontal_1qho1_85 ._pictograph__list--5_1qho1_52 {
         grid-template-columns: repeat(3, 1fr);
     }
 }
 
 @container pictograph (min-width: 944px) {
-    ._pictograph--horizontal_11vg9_83 ._pictograph__list--4_11vg9_58 {
+    ._pictograph--horizontal_1qho1_85 ._pictograph__list--4_1qho1_60 {
         grid-template-columns: repeat(4, 1fr);
     }
 
-    ._pictograph--horizontal_11vg9_83 ._pictograph__list--5_11vg9_50 {
+    ._pictograph--horizontal_1qho1_85 ._pictograph__list--5_1qho1_52 {
         grid-template-columns: repeat(5, 1fr);
     }
 }
 
 /* ─── Alignment: centered ─── */
 
-._pictograph--centered_11vg9_123 {
-    --pictograph-align: center;
+._pictograph--centered_1qho1_132 {
+    --_pictograph-align: center;
 }
 
-._pictograph--vertical_11vg9_32._pictograph--centered_11vg9_123 {
-    --pictograph-text-align: center;
+._pictograph--vertical_1qho1_34._pictograph--centered_1qho1_132 {
+    --_pictograph-text-align: center;
 }
 
 /* ─── Icon size: small ─── */
 
-._pictograph--icon-small_11vg9_133 {
-    --pictograph-icon-size: 40px;
+._pictograph--icon-small_1qho1_142 {
+    --_pictograph-icon-size: 40px;
 }
 
 @container pictograph (min-width: 688px) {
-    ._pictograph--icon-small_11vg9_133 {
-        --pictograph-icon-size: 52px;
+    ._pictograph--icon-small_1qho1_142 {
+        --_pictograph-icon-size: 56px;
     }
 }
 
 /* ─── Icon size: large ─── */
 
-._pictograph--icon-large_11vg9_145 {
-    --pictograph-icon-size: 52px;
+._pictograph--icon-large_1qho1_154 {
+    --_pictograph-icon-size: 56px;
+    --_pictograph-heading-font: var(--typography-heading-sm);
+    --_pictograph-long-body-font: var(--typography-body-lg);
 }
 
 @container pictograph (min-width: 688px) {
-    ._pictograph--icon-large_11vg9_145 {
-        --pictograph-icon-size: 72px;
+    ._pictograph--icon-large_1qho1_154 {
+        --_pictograph-icon-size: 72px;
     }
 }
 
 /* ─── Vertical + short text: items are compact, allow more columns earlier ─── */
-/* Note: :has(li > div:last-child > p:only-child) depends on PictographItem DOM structure:
-   <li> → <span>(icon) + <div>(text). If PictographItem markup changes, update these selectors. */
 
 @container pictograph (min-width: 440px) {
-    ._pictograph--vertical_11vg9_32:has(li > div:last-child > p:only-child) ._pictograph__list--4_11vg9_58 {
+    ._pictograph--vertical_1qho1_34:has(li[data-pictograph-content='short']):not(
+            :has(li[data-pictograph-content='long'])
+        )
+        ._pictograph__list--4_1qho1_60 {
         grid-template-columns: repeat(2, 1fr);
     }
 }
@@ -165,16 +177,16 @@
 /* ─── Horizontal + long text: stack items vertically at small sizes ─── */
 
 @container pictograph (max-width: 439px) {
-    ._pictograph--horizontal_11vg9_83:not(:has(li > div:last-child > p:only-child)) ._pictograph__list_11vg9_39 {
-        --pictograph-direction: column;
-        --pictograph-align: flex-start;
-        --pictograph-item-gap: 10px;
+    ._pictograph--horizontal_1qho1_85:has(li[data-pictograph-content='long']) ._pictograph__list_1qho1_41 {
+        --_pictograph-direction: column;
+        --_pictograph-align: flex-start;
+        --_pictograph-item-gap: var(--spacing-space-12);
     }
 }
 
 @container pictograph (min-width: 688px) {
-    ._pictograph--horizontal_11vg9_83:not(:has(li > div:last-child > p:only-child)) ._pictograph__list_11vg9_39 {
-        gap: 30px;
+    ._pictograph--horizontal_1qho1_85:has(li[data-pictograph-content='long']) ._pictograph__list_1qho1_41 {
+        gap: var(--spacing-space-32);
     }
 }
 
@@ -182,9 +194,9 @@
 /* Styles apply from [data-color-scheme="dark"] down to (but not into) [data-color-scheme="light"]. */
 
 @scope ([data-color-scheme='dark']) to ([data-color-scheme='light']) {
-    ._pictograph_11vg9_16 {
-        --pictograph-text-color: var(--color-semantic-foreground-inverse);
-        --pictograph-icon-color: var(--color-semantic-foreground-inverse);
+    ._pictograph_1qho1_16 {
+        --_pictograph-text-color: var(--color-semantic-foreground-inverse);
+        --_pictograph-icon-color: var(--color-semantic-foreground-inverse);
     }
 }
 }

package/dist/components/Pictograph/Pictograph.module.css.cjs

@@ -1,20 +1,20 @@
 require('./Pictograph.css');
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const pictograph = "_pictograph_11vg9_16";
-const pictograph__list = "_pictograph__list_11vg9_39";
+const pictograph = "_pictograph_1qho1_16";
+const pictograph__list = "_pictograph__list_1qho1_41";
 const styles = {
   pictograph,
-  "pictograph--vertical": "_pictograph--vertical_11vg9_32",
+  "pictograph--vertical": "_pictograph--vertical_1qho1_34",
   pictograph__list,
-  "pictograph__list--5": "_pictograph__list--5_11vg9_50",
-  "pictograph__list--2": "_pictograph__list--2_11vg9_56",
-  "pictograph__list--3": "_pictograph__list--3_11vg9_57",
-  "pictograph__list--4": "_pictograph__list--4_11vg9_58",
-  "pictograph--horizontal": "_pictograph--horizontal_11vg9_83",
-  "pictograph--centered": "_pictograph--centered_11vg9_123",
-  "pictograph--icon-small": "_pictograph--icon-small_11vg9_133",
-  "pictograph--icon-large": "_pictograph--icon-large_11vg9_145"
+  "pictograph__list--5": "_pictograph__list--5_1qho1_52",
+  "pictograph__list--2": "_pictograph__list--2_1qho1_58",
+  "pictograph__list--3": "_pictograph__list--3_1qho1_59",
+  "pictograph__list--4": "_pictograph__list--4_1qho1_60",
+  "pictograph--horizontal": "_pictograph--horizontal_1qho1_85",
+  "pictograph--centered": "_pictograph--centered_1qho1_132",
+  "pictograph--icon-small": "_pictograph--icon-small_1qho1_142",
+  "pictograph--icon-large": "_pictograph--icon-large_1qho1_154"
 };
 exports.default = styles;
 exports.pictograph = pictograph;

package/dist/components/Pictograph/Pictograph.module.css.js

@@ -1,18 +1,18 @@
 import './Pictograph.css';
-const pictograph = "_pictograph_11vg9_16";
-const pictograph__list = "_pictograph__list_11vg9_39";
+const pictograph = "_pictograph_1qho1_16";
+const pictograph__list = "_pictograph__list_1qho1_41";
 const styles = {
   pictograph,
-  "pictograph--vertical": "_pictograph--vertical_11vg9_32",
+  "pictograph--vertical": "_pictograph--vertical_1qho1_34",
   pictograph__list,
-  "pictograph__list--5": "_pictograph__list--5_11vg9_50",
-  "pictograph__list--2": "_pictograph__list--2_11vg9_56",
-  "pictograph__list--3": "_pictograph__list--3_11vg9_57",
-  "pictograph__list--4": "_pictograph__list--4_11vg9_58",
-  "pictograph--horizontal": "_pictograph--horizontal_11vg9_83",
-  "pictograph--centered": "_pictograph--centered_11vg9_123",
-  "pictograph--icon-small": "_pictograph--icon-small_11vg9_133",
-  "pictograph--icon-large": "_pictograph--icon-large_11vg9_145"
+  "pictograph__list--5": "_pictograph__list--5_1qho1_52",
+  "pictograph__list--2": "_pictograph__list--2_1qho1_58",
+  "pictograph__list--3": "_pictograph__list--3_1qho1_59",
+  "pictograph__list--4": "_pictograph__list--4_1qho1_60",
+  "pictograph--horizontal": "_pictograph--horizontal_1qho1_85",
+  "pictograph--centered": "_pictograph--centered_1qho1_132",
+  "pictograph--icon-small": "_pictograph--icon-small_1qho1_142",
+  "pictograph--icon-large": "_pictograph--icon-large_1qho1_154"
 };
 export {
   styles as default,

package/dist/components/Pictograph/Pictograph.types.d.ts

@@ -2,8 +2,8 @@ import { ComponentPropsWithRef, ReactNode } from 'react';
 export interface PictographProps extends ComponentPropsWithRef<'div'> {
     /**
      * Size of the icon area in each item.
-     * - `small`: 40px (52px on tablet and above)
-     * - `large`: 52px (72px on tablet and above)
+     * - `small`: 40px (56px on tablet and above)
+     * - `large`: 56px (72px on tablet and above)
      * @default 'small'
      */
     readonly iconSize?: 'small' | 'large';