@nascentdigital/funnel-ui 4.5.2 → 4.5.4

package/dist/styles/entities/Person.css

@@ -29,7 +29,7 @@
         @apply text-pretty break-normal;
         font: var(--nd-person-title-font);
         letter-spacing: var(--nd-person-title-letterspacing);
-        color: var(--nd-person-title-color, var(--nd-block-fg));
+        color: var(--nd-person-title-color, currentColor);
         font-variant-numeric: lining-nums proportional-nums;
 
         &:not(:last-child):after {
@@ -41,7 +41,7 @@
         @apply text-pretty break-normal;
         font: var(--nd-person-name-font);
         letter-spacing: var(--nd-person-name-letterspacing);
-        color: var(--nd-person-name-color, var(--nd-block-fg));
+        color: var(--nd-person-name-color, currentColor);
         font-variant-numeric: lining-nums proportional-nums;
 
         &:not(:last-child):after {
@@ -53,7 +53,7 @@
         @apply text-pretty break-normal;
         font: var(--nd-person-company-font);
         letter-spacing: var(--nd-person-company-letterspacing);
-        color: var(--nd-person-company-color, var(--nd-block-fg));
+        color: var(--nd-person-company-color, currentColor);
         font-variant-numeric: lining-nums proportional-nums;
 
         &:not(:last-child):after {
@@ -65,7 +65,7 @@
         @apply text-pretty break-normal;
         font: var(--nd-person-location-font);
         letter-spacing: var(--nd-person-location-letterspacing);
-        color: var(--nd-person-location-color, var(--nd-block-fg));
+        color: var(--nd-person-location-color, currentColor);
         font-variant-numeric: lining-nums proportional-nums;
 
         &:not(:last-child):after {

package/dist/styles/entities/Project.css

@@ -4,21 +4,27 @@
         --nd-project-bg: unset;
         --nd-project-padding: theme('spacing.l9');
         --nd-project-copy-gap: theme('spacing.l5');
+        --nd-project-content-gap: unset;
         --nd-project-client-margin: unset;
         --nd-project-name-margin: unset;
         --nd-project-headline-margin: unset;
         --nd-project-link-margin: unset;
         --nd-project-name-font: normal 500 20px/1 Helvetica, Arial, san-serif;
         --nd-project-name-letterspacing: unset;
-        --nd-project-name-color: var(--nd-block-fg);
+        --nd-project-name-color: currentColor;
         --nd-project-headline-font: normal 500 24px/1 Helvetica, Arial, san-serif;
         --nd-project-headline-letterspacing: unset;
-        --nd-project-headline-color: var(--nd-block-fg);
+        --nd-project-headline-color: currentColor;
     }
 
     .nd-Project {
         background: var(--nd-project-bg);
     }
+
+    .nd-Project-content {
+        @apply flex flex-col gap-[--nd-project-content-gap];
+    }
+
     .nd-Project-copy {
         @apply flex flex-col gap-[var(--nd-project-copy-gap)] p-[var(--nd-project-padding)];
     }

package/dist/styles/entities/UniqueSellingPoint.css

@@ -9,15 +9,15 @@
         --nd-usp-copy-gap: unset;
         --nd-usp-name-font: normal 500 20px/1 Helvetica, Arial, san-serif;
         --nd-usp-name-letterspacing: unset;
-        --nd-usp-name-color: var(--nd-block-fg);
+        --nd-usp-name-color: currentColor;
         --nd-usp-name-mb: unset;
         --nd-usp-headline-font: normal 500 24px/1 Helvetica, Arial, san-serif;
         --nd-usp-headline-letterspacing: unset;
-        --nd-usp-headline-color: var(--nd-block-fg);
+        --nd-usp-headline-color: currentColor;
         --nd-usp-headline-mb: unset;
         --nd-usp-caption-font: normal 500 24px/1 Helvetica, Arial, san-serif;
         --nd-usp-caption-letterspacing: unset;
-        --nd-usp-caption-color: var(--nd-block-fg);
+        --nd-usp-caption-color: currentColor;
         --nd-usp-caption-mb: unset;
     }
 

package/dist/styles/fields/Caption.css

@@ -12,12 +12,12 @@
         &.nd-RichText {
             --nd-RichText-p-mb: 0;
             --nd-RichText-p-font: var(--nd-caption-font);
-            --nd-RichText-p-color: var(--nd-caption-color, var(--nd-block-fg));
+            --nd-RichText-p-color: var(--nd-caption-color, currentColor);
             --nd-RichText-p-letterspacing: var(--nd-caption-letterspacing);
         }
         font: var(--nd-caption-font);
         letter-spacing: var(--nd-caption-letterspacing);
-        color: var(--nd-caption-color, var(--nd-block-fg));
+        color: var(--nd-caption-color, currentColor);
         font-variant-numeric: lining-nums proportional-nums;
     }
 }

package/dist/styles/fields/Description.css

@@ -12,12 +12,12 @@
         &.nd-RichText {
             --nd-RichText-p-mb: 0;
             --nd-RichText-p-font: var(--nd-description-font);
-            --nd-RichText-p-color: var(--nd-description-color, var(--nd-block-fg));
+            --nd-RichText-p-color: var(--nd-description-color, currentColor);
             --nd-RichText-p-letterspacing: var(--nd-description-letterspacing);
         }
         font: var(--nd-description-font);
         letter-spacing: var(--nd-description-letterspacing);
-        color: var(--nd-description-color, var(--nd-block-fg));
+        color: var(--nd-description-color, currentColor);
         font-variant-numeric: lining-nums proportional-nums;
     }
 }

package/dist/styles/fields/Icon.css

@@ -12,7 +12,7 @@
     }
     .nd-Icon-visual {
         @apply inline-block w-full h-full;
-        background-color: var(--nd-icon-color, var(--nd-block-fg));
+        background-color: var(--nd-icon-color, currentColor);
         mask-repeat: no-repeat;
         mask-size: contain;
         mask-position: center;

package/dist/styles/fields/Link.css

@@ -10,7 +10,7 @@
         @apply text-nowrap;
         font: var(--nd-link-font);
         letter-spacing: var(--nd-link-letterspacing);
-        color: var(--nd-link-color, var(--nd-block-fg));
+        color: var(--nd-link-color, currentColor);
         font-variant-numeric: lining-nums proportional-nums;
     }
 }

package/dist/styles/fields/Quote.css

@@ -23,7 +23,7 @@
         &.nd-RichText {
             --nd-RichText-p-mb: 0;
             --nd-RichText-p-font: var(--nd-quote-font);
-            --nd-RichText-p-color: var(--nd-quote-color, var(--nd-block-fg));
+            --nd-RichText-p-color: var(--nd-quote-color, currentColor);
             --nd-RichText-p-letterspacing: var(--nd-quote-letterspacing);
             --nd-RichText-priority-font: var(--nd-quote-priority-font);
             --nd-RichText-priority-color: var(--nd-quote-priority-color);
@@ -35,7 +35,7 @@
 
         font: var(--nd-quote-font);
         letter-spacing: var(--nd-quote-letterspacing);
-        color: var(--nd-quote-color, var(--nd-block-fg));
+        color: var(--nd-quote-color, currentColor);
         font-variant-numeric: lining-nums proportional-nums;
 
         span:first-child:before {

package/dist/styles/fields/Title.css

@@ -11,7 +11,7 @@
         overflow-wrap: anywhere;
         font: var(--nd-title-font);
         letter-spacing: var(--nd-title-letterspacing);
-        color: var(--nd-title-color, var(--nd-block-fg));
+        color: var(--nd-title-color, currentColor);
         font-variant-numeric: lining-nums proportional-nums;
     }
 }

package/dist/styles/index.css

@@ -7,3 +7,5 @@
 @import "./layouts/_index.css";
 @import "./panels/_index.css";
 @import "./utilities/_index.css";
+@import "./Page.css";
+@import "./Section.css";

package/dist/styles/layouts/BentoLayout.css

@@ -0,0 +1,41 @@
+@layer components {
+
+    :root {
+        --nd-bento-layout-gap: theme('spacing.l8');
+        --nd-bento-layout-gap-x: var(--nd-bento-layout-gap);
+        --nd-bento-layout-gap-y: var(--nd-bento-layout-gap);
+    }
+
+    ._nd-BentoLayout-mobile {
+        @apply flex flex-col gap-[--nd-bento-layout-gap-y];
+        .nd-MessagePreview-visualWrap {
+            --nd-message-preview-visual-aspect: 4/3;
+        }
+    }
+
+    ._nd-BentoLayout-desktop {
+        @apply grid grid-cols-12 gap-x-[--nd-bento-layout-gap-x] gap-y-[--nd-bento-layout-gap-y];
+
+        > * {
+
+            /* first */
+            &:nth-child(3n + 1) {
+                @apply col-span-full;
+            }
+
+            /* second */
+            &:nth-child(3n + 2) {
+                @apply col-span-6;
+            }
+
+            /* third */
+            &:nth-child(3n + 3) {
+                @apply col-span-6;
+            }
+        }
+    }
+
+    .nd-BentoLayout {
+        @apply @max-panel-md:_nd-BentoLayout-mobile @panel-md:_nd-BentoLayout-desktop;
+    }
+}

package/dist/styles/layouts/_index.css

@@ -1,3 +1,4 @@
+@import "./BentoLayout.css";
 @import "./CardLayout.css";
 @import "./BrickLayout.css";
 @import "./FlexWrapLayout.css";

package/dist/styles/panels/TestimonialPanel.css

@@ -41,6 +41,10 @@
     .nd-TestimonialPanel-author {
         @apply not-first:mb-[var(--nd-testimonial-panel-author-mt)] not-last:mb-[var(--nd-testimonial-panel-author-mb)];
         text-align: var(--nd-testimonial-panel-quote-textAlign);
+
+        .nd-Person-copy > span:not(:last-child)::after {
+            content: ",";
+        }
     }
     .nd-TestimonialPanel-ctas {
         @apply flex justify-center flex-wrap gap-[var(--nd-testimonial-panel-ctas-gap)];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nascentdigital/funnel-ui",
   "description": "UI components for funnel",
-  "version": "4.5.2",
+  "version": "4.5.4",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "restricted"
@@ -49,7 +49,6 @@
     "@emotion/is-prop-valid": "^1",
     "@react-hook/resize-observer": "^2",
     "@tailwindcss/aspect-ratio": "^0",
-    "@tailwindcss/container-queries": "^0.1.1",
     "@vimeo/player": "^2.30.1",
     "classnames": "^2",
     "color": "^5.0.0",
@@ -70,5 +69,5 @@
     "react-dom": "^19",
     "ts-jest": "^29.3.2"
   },
-  "gitHead": "5b63f9cd8843cc111b4458c71aa031a974455241"
+  "gitHead": "d3d65564e0935e40c8b1e441316b63a126516bca"
 }

package/dist/client/interaction/Popup.d.ts

@@ -1,36 +0,0 @@
-import { Callback, Frame, Rect } from '@nascentdigital/funnel-core';
-import { Variants } from 'framer-motion';
-import { HTMLAttributes } from 'react';
-import { ClickObserver } from './ClickObserver';
-import { UILevel } from './UILevel';
-export declare function Popup({ className, style, anchor, level, placement, anchorOffset, viewportPadding, animation, dismissTrigger, disableBackground, disabled, bubbleCloseEvent, open, onOpened: onOpenedRaw, onClose, onClosed: onClosedRaw, children, ...props }: Popup.Props): import("react/jsx-runtime").JSX.Element | null;
-export declare namespace Popup {
-    type Props = HTMLAttributes<HTMLDivElement> & {
-        anchor?: Rect | Element | string | null | undefined;
-        level?: UILevel;
-        placement?: Placement;
-        anchorOffset?: number;
-        viewportPadding?: number;
-        animation?: Animation;
-        dismissTrigger?: ClickObserver.Trigger | 'none';
-        disableBackground?: boolean;
-        disabled?: boolean;
-        bubbleCloseEvent?: boolean;
-        open?: boolean;
-        onOpened?: Callback.Void;
-        onClose?: Callback.Void;
-        onClosed?: Callback.Void;
-    };
-    type Placement = 'top-start' | 'top' | 'top-end' | 'top-match' | 'bottom-start' | 'bottom' | 'bottom-end' | 'bottom-match' | 'left-start' | 'left' | 'left-end' | 'right-start' | 'right' | 'right-end';
-    type Animation = 'in' | 'out' | 'in-out';
-    type GetFrameArgs = {
-        anchorRect: Rect;
-        contentElement: HTMLDivElement;
-        placement: Popup.Placement;
-        anchorOffset: number;
-        viewportPadding: number;
-    };
-    function getFrame({ anchorRect, contentElement, placement, anchorOffset, viewportPadding }: GetFrameArgs): Partial<Frame>;
-}
-export declare const animations: Variants;
-export declare function getAnchorRect(anchor: Rect | Element | string | null | undefined): Rect | null;

package/dist/client/interaction/Popup.js

@@ -1,244 +0,0 @@
-"use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.animations = void 0;
-exports.Popup = Popup;
-exports.getAnchorRect = getAnchorRect;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const funnel_core_1 = require("@nascentdigital/funnel-core");
-const classnames_1 = __importDefault(require("classnames"));
-const framer_motion_1 = require("framer-motion");
-const react_1 = require("react");
-const react_dom_1 = require("react-dom");
-const react_hotkeys_hook_1 = require("react-hotkeys-hook");
-const hooks_1 = require("../hooks");
-const ClickObserver_1 = require("./ClickObserver");
-// component
-function Popup(_a) {
-    var { className, style = {}, anchor, level = 'l1', placement = 'bottom', anchorOffset = 0, viewportPadding = 0, animation = 'in-out', dismissTrigger, disableBackground = false, disabled = false, bubbleCloseEvent = false, open = false, onOpened: onOpenedRaw = funnel_core_1.Fn.NoOp, onClose = funnel_core_1.Fn.NoOp, onClosed: onClosedRaw = funnel_core_1.Fn.NoOp, children } = _a, props = __rest(_a, ["className", "style", "anchor", "level", "placement", "anchorOffset", "viewportPadding", "animation", "dismissTrigger", "disableBackground", "disabled", "bubbleCloseEvent", "open", "onOpened", "onClose", "onClosed", "children"]);
-    // bind context
-    const [active, setActive] = (0, react_1.useState)(false);
-    const openedRef = (0, react_1.useRef)(false);
-    const contentRef = (0, react_1.useRef)(null);
-    const id = (0, react_1.useId)();
-    const anchorRect = getAnchorRect(anchor);
-    const onOpenedRef = (0, react_1.useRef)(onOpenedRaw);
-    onOpenedRef.current = onOpenedRaw;
-    const onClosedRef = (0, react_1.useRef)(onClosedRaw);
-    onClosedRef.current = onClosedRaw;
-    const closeCallback = (0, react_1.useCallback)(() => {
-        if (openedRef.current) {
-            onClose();
-        }
-    }, [onClose]);
-    // re-render on window size change
-    (0, hooks_1.useViewportSize)();
-    // close on escape
-    (0, react_hotkeys_hook_1.useHotkeys)('esc', closeCallback);
-    // show/hide based on open change
-    (0, react_1.useEffect)(() => {
-        // raise event on open/close
-        let unlock = undefined;
-        if (open) {
-            // update ref
-            openedRef.current = true;
-            // activate
-            setActive(true);
-            // lock keyboard
-            unlock = funnel_core_1.Browser.lockFocus(`#${CSS.escape(id)}`);
-        }
-        // raise event on close (if it was actually opened)
-        else if (openedRef.current) {
-            // deactivate
-            setActive(false);
-            // update ref
-            openedRef.current = false;
-        }
-        // on unmount
-        return () => {
-            // unlock (if locked)
-            if (unlock) {
-                unlock();
-            }
-        };
-    }, [open, id]);
-    // skip for SSR
-    if (!funnel_core_1.Browser.available) {
-        return null;
-    }
-    // compute popup rect (if visible + ready)
-    const contentElement = contentRef.current;
-    const popupFrame = active && !!anchorRect && !!contentElement
-        ? Popup.getFrame({
-            anchorRect,
-            contentElement,
-            placement,
-            anchorOffset,
-            viewportPadding
-        })
-        : {};
-    // helpers
-    const onClickOutside = (e) => {
-        // consume click
-        if (!bubbleCloseEvent) {
-            e.preventDefault();
-            e.stopPropagation();
-        }
-        // close
-        onClose();
-    };
-    const onAnimationComplete = (definition) => {
-        if (definition === 'visible') {
-            onOpenedRef.current();
-        }
-        else if (definition === 'exit') {
-            onClosedRef.current();
-        }
-    };
-    // render
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: open && !!anchorRect &&
-                (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { id: id, className: (0, classnames_1.default)('Popup-wrap', {
-                        'Popup-disableBg': disableBackground,
-                        'Popup-disabled': disabled,
-                        'Popup-l1': level === 'l1',
-                        'Popup-l2': level === 'l2',
-                        'Popup-l3': level === 'l3'
-                    }), variants: exports.animations, initial: animation !== 'out' ? 'hidden' : 'visible', animate: "visible", exit: animation !== 'in' ? 'exit' : 'visible', onAnimationComplete: definition => onAnimationComplete(definition), children: (0, jsx_runtime_1.jsx)(ClickObserver_1.ClickObserver, { trigger: dismissTrigger === 'none' ? 'click' : dismissTrigger, disabled: !open || dismissTrigger === 'none', onClickOutside: onClickOutside, children: (0, jsx_runtime_1.jsx)("div", Object.assign({}, props, { ref: contentRef, style: Object.assign(Object.assign({}, style), popupFrame), className: (0, classnames_1.default)(className, 'Popup-root'), children: children })) }) }, id) }), document.body) }));
-}
-// extension
-(function (Popup) {
-    // helpers
-    function getFrame({ anchorRect, contentElement, placement, anchorOffset, viewportPadding }) {
-        // get geometries
-        const viewportRect = new funnel_core_1.Rect(viewportPadding, viewportPadding, window.innerWidth - viewportPadding * 2, window.innerHeight - viewportPadding * 2);
-        const contentWidth = contentElement.offsetWidth;
-        const contentHeight = contentElement.offsetHeight;
-        // horizontal layout if left/right
-        const popupFrame = {};
-        const [primary, secondary] = placement.split('-');
-        if (primary === 'left' || primary === 'right') {
-            // determine space to left/right
-            const spaceLeft = Math.max(0, anchorRect.left - viewportRect.left - anchorOffset);
-            const spaceRight = Math.max(0, viewportRect.right - anchorRect.right - anchorOffset);
-            // place left if it fits or it fits better than on the right
-            if ((primary === 'left' && (spaceLeft >= contentWidth || spaceLeft > spaceRight))
-                || (primary === 'right' && spaceRight < contentWidth && spaceRight < spaceLeft)) {
-                popupFrame.right = viewportRect.right - anchorRect.left + anchorOffset;
-            }
-            // or place right
-            else {
-                popupFrame.left = anchorRect.right + anchorOffset;
-            }
-            // top-align on start
-            if (secondary === 'start') {
-                popupFrame.top = anchorRect.top;
-            }
-            // bottom-align on end
-            else if (secondary === 'end') {
-                popupFrame.bottom = viewportRect.bottom - anchorRect.bottom;
-            }
-            // or center against anchor
-            else {
-                // set top bounds so it's centered
-                popupFrame.top = Math.max(anchorRect.top + (anchorRect.height - contentHeight) / 2, viewportRect.top);
-                // offset if the bottom is bleeding over
-                if (popupFrame.top + contentHeight > viewportRect.bottom) {
-                    popupFrame.top -= popupFrame.top + contentHeight - viewportRect.bottom;
-                }
-            }
-        }
-        // or standard vertical layout
-        else {
-            // determine space to top/bottom
-            const spaceTop = Math.max(0, anchorRect.top - viewportRect.top - anchorOffset);
-            const spaceBottom = Math.max(0, viewportRect.bottom - anchorRect.bottom - anchorOffset);
-            // place above if it fits or it fits better than on the right
-            if ((primary === 'top' && (spaceTop >= contentHeight || spaceBottom < spaceTop))
-                || (primary === 'bottom' && spaceBottom < contentHeight && spaceBottom < spaceTop)) {
-                popupFrame.bottom = viewportRect.bottom - anchorRect.top + anchorOffset;
-            }
-            // or place below
-            else {
-                popupFrame.top = anchorRect.bottom + anchorOffset;
-            }
-            // left-align on start
-            if (secondary === 'start') {
-                popupFrame.left = anchorRect.left;
-            }
-            // right-align on end
-            else if (secondary === 'end') {
-                popupFrame.right = viewportRect.right - anchorRect.right;
-            }
-            // match width
-            else if (secondary === 'match') {
-                popupFrame.left = anchorRect.left;
-                popupFrame.width = anchorRect.width;
-            }
-            // or center against anchor
-            else {
-                // set left bounds so it's centered
-                popupFrame.left = Math.max(anchorRect.left + (anchorRect.width - contentWidth) / 2, viewportRect.left);
-                // offset if the right is bleeding over
-                if (popupFrame.left + contentWidth > viewportRect.right) {
-                    popupFrame.left -= popupFrame.left + contentWidth - viewportRect.right;
-                }
-            }
-        }
-        // return position insets
-        return popupFrame;
-    }
-    Popup.getFrame = getFrame;
-})(Popup || (exports.Popup = Popup = {}));
-// helpers
-exports.animations = {
-    hidden: {
-        opacity: 0
-    },
-    visible: {
-        opacity: 1,
-        transition: {
-            ease: 'easeOut',
-            duration: 0.5,
-            when: 'beforeChildren'
-        }
-    },
-    exit: {
-        opacity: 0,
-        transition: {
-            ease: 'easeIn',
-            duration: 0.15,
-            bounce: 0,
-            when: 'afterChildren'
-        }
-    }
-};
-function getAnchorRect(anchor) {
-    // skip if there's no anchor or if we're SSR
-    if (!anchor || !funnel_core_1.Browser.available) {
-        return null;
-    }
-    // or skip if we already have a rect
-    else if (anchor instanceof funnel_core_1.Rect) {
-        return anchor;
-    }
-    // try to coerce anchor into an element (or fail)
-    const anchorElement = typeof anchor === 'string'
-        ? document.querySelector(anchor)
-        : anchor;
-    return anchorElement
-        ? funnel_core_1.Rect.fromInsets(anchorElement.getBoundingClientRect())
-        : null;
-}

package/dist/client/interaction/Tooltip.d.ts

@@ -1,16 +0,0 @@
-import { ReactNode, RefObject } from 'react';
-import { Popup } from './Popup';
-export declare function Tooltip({ delay, scroller, content, children, anchorClassName, popupClassName, onClose, placement, anchorOffset, viewportPadding, disabled }: DelayedPopup.Props): import("react/jsx-runtime").JSX.Element;
-export declare namespace DelayedPopup {
-    type Props = Pick<Popup.Props, 'anchorOffset' | 'viewportPadding' | 'placement' | 'onClose'> & {
-        delay?: number;
-        scroller?: string | RefObject<HTMLElement | null>;
-        content: ReactNode;
-        children: ReactNode;
-        anchorClassName?: string;
-        popupClassName?: string;
-        disabled?: boolean;
-    };
-    type HoverState = 'inactive' | 'waiting' | 'active';
-    type TapState = 'inactive' | 'active';
-}