@nascentdigital/funnel-ui 4.5.3 → 4.5.4

package/dist/styles/Section.css

@@ -0,0 +1,52 @@
+@layer components {
+
+    /* root variables */
+    :root {
+
+        /* theming */
+        --nd-section-fg: #000;
+        --nd-section-bg: #FFF;
+
+        /* spacing */
+        --nd-section-pt: theme('spacing.l17');
+        --nd-section-pb: theme('spacing.l17');
+        --nd-section-gap-sm: theme('spacing.l13');
+        --nd-section-gap-md: theme('spacing.l15');
+        --nd-section-gap-lg: theme('spacing.l17');
+
+        @media screen(sm) {
+            --nd-section-pt: theme('spacing.l17');
+            --nd-section-pb: theme('spacing.l17');
+            --nd-section-gap-sm: theme('spacing.l13');
+            --nd-section-gap-md: theme('spacing.l15');
+            --nd-section-gap-lg: theme('spacing.l17');
+        }
+        @media screen(md) {
+            --nd-section-pt: theme('spacing.l18');
+            --nd-section-pb: theme('spacing.l18');
+            --nd-section-gap-sm: theme('spacing.l14');
+            --nd-section-gap-md: theme('spacing.l16');
+            --nd-section-gap-lg: theme('spacing.l18');
+        }
+        @media screen(lg) {
+            --nd-section-pt: theme('spacing.l18');
+            --nd-section-pb: theme('spacing.l18');
+            --nd-section-gap-sm: theme('spacing.l15');
+            --nd-section-gap-md: theme('spacing.l17');
+            --nd-section-gap-lg: theme('spacing.l18');
+        }
+        @media screen(xl) {
+            --nd-section-pt: theme('spacing.l18');
+            --nd-section-pb: theme('spacing.l18');
+            --nd-section-gap-sm: theme('spacing.l15');
+            --nd-section-gap-md: theme('spacing.l17');
+            --nd-section-gap-lg: theme('spacing.l18');
+        }
+    }
+
+    /* theming */
+    .nd-Section {
+        @apply text-[--nd-section-fg];
+        background: var(--site-color-bg);
+    }
+}

package/dist/styles/blocks/Block-spacing.css

@@ -1,43 +1,5 @@
 @layer components {
 
-    /* spacing: variables */
-    :root {
-        --nd-section-pt: theme('spacing.l17');
-        --nd-section-pb: theme('spacing.l17');
-        --nd-section-gap-sm: theme('spacing.l13');
-        --nd-section-gap-md: theme('spacing.l15');
-        --nd-section-gap-lg: theme('spacing.l17');
-
-        @media screen(sm) {
-            --nd-section-pt: theme('spacing.l17');
-            --nd-section-pb: theme('spacing.l17');
-            --nd-section-gap-sm: theme('spacing.l13');
-            --nd-section-gap-md: theme('spacing.l15');
-            --nd-section-gap-lg: theme('spacing.l17');
-        }
-        @media screen(md) {
-            --nd-section-pt: theme('spacing.l18');
-            --nd-section-pb: theme('spacing.l18');
-            --nd-section-gap-sm: theme('spacing.l14');
-            --nd-section-gap-md: theme('spacing.l16');
-            --nd-section-gap-lg: theme('spacing.l18');
-        }
-        @media screen(lg) {
-            --nd-section-pt: theme('spacing.l18');
-            --nd-section-pb: theme('spacing.l18');
-            --nd-section-gap-sm: theme('spacing.l15');
-            --nd-section-gap-md: theme('spacing.l17');
-            --nd-section-gap-lg: theme('spacing.l18');
-        }
-        @media screen(xl) {
-            --nd-section-pt: theme('spacing.l18');
-            --nd-section-pb: theme('spacing.l18');
-            --nd-section-gap-sm: theme('spacing.l15');
-            --nd-section-gap-md: theme('spacing.l17');
-            --nd-section-gap-lg: theme('spacing.l18');
-        }
-    }
-
     /* spacing + gaps */
     .nd-Block {
 
@@ -49,6 +11,18 @@
         --nd-section-pb-value: var(--nd-section-pb);
         --nd-section-gap-value: var(--nd-section-gap);
 
+        /* section padding */
+        &:first-child {
+            padding-top: var(--nd-section-pt-value);
+        }
+        &:last-child {
+            padding-bottom: var(--nd-section-pb-value);
+        }
+        /* inter-block gaps */
+        + .nd-Block {
+            padding-top: var(--nd-section-gap-value);
+        }
+
         /* tight gap */
         &.nd-Block-spacing-sm + .nd-Block {
             --nd-section-gap: var(--nd-section-gap-sm);
@@ -104,6 +78,21 @@
     }
 
     /* crawl-up */
+    .nd-Section:has(+ .nd-Section > .nd-Block.nd-Block-crawlUp:first-child) {
+        padding-bottom: var(--nd-section-pb);
+
+        + .nd-Section > .nd-Block.nd-Block-crawlUp:first-child {
+            @apply py-0;
+
+            > * {
+                @apply -translate-y-[var(--nd-section-pb)];
+            }
+
+            + .nd-Block {
+                @apply pt-0;
+            }
+        }
+    }
     .nd-Block:has(+ .nd-Block.nd-Block-crawlUp):not(:first-child) {
         --nd-section-pb-value: calc(2 * var(--nd-section-pb));
 
@@ -113,6 +102,10 @@
             > * {
                 @apply -translate-y-[var(--nd-section-pb)];
             }
+
+            + .nd-Block {
+                @apply pt-0;
+            }
         }
     }
 

package/dist/styles/blocks/Block-theming.css

@@ -2,13 +2,11 @@
 
     /* theming: variables */
     :root {
-        --nd-block-fg: #000;
-        --nd-block-bg: #FFF;
+        --nd-block-fg: currentColor;
     }
 
     /* theming */
     .nd-Block {
-        color: var(--nd-block-fg);
-        background-color: var(--nd-block-bg);
+        color: var(--nd-block-fg, currentColor);
     }
 }

package/dist/styles/blocks/MediaLayout.css

@@ -45,6 +45,22 @@
             }
         }
 
+        /* puzzle */
+        .nd-PuzzleLayout {
+            > * {
+                &:nth-child(3n + 1):has(> .nd-Visual) {
+                    @apply @panel-md:w-8/12;
+                    @apply @panel-md:aspect-video;
+                }
+                &:nth-child(3n + 2):has(> .nd-Visual) {
+                    @apply @panel-md:aspect-square;
+                }
+                &:nth-child(3n + 3):has(> .nd-Visual) {
+                    @apply @panel-md:aspect-camera;
+                }
+            }
+        }
+
         /* vertical stack */
         .nd-StackLayout.nd-StackLayout-direction-vertical {
             .nd-MediaLayout-itemWrap {

package/dist/styles/blocks/Projects.css

@@ -5,14 +5,5 @@
 
     /* base */
     .nd-Projects {
-
-
-
-
-    }
-
-    /* layout: masonry */
-    .nd-Projects .nd-MasonryLayout {
-        @apply container-p;
     }
 }

package/dist/styles/blocks/RelatedPages.css

@@ -0,0 +1,13 @@
+@layer components {
+
+    :root {
+    }
+
+    /* base */
+    .nd-RelatedPages {
+    }
+
+    /* visual aspect ratios */
+    .nd-RelatedPages .nd-ListPanel {
+    }
+}

package/dist/styles/blocks/Stats.css

@@ -1,38 +1,9 @@
 @layer components {
 
     :root {
-        --nd-stats-content-gap: theme('spacing.l8');
-        --nd-stats-copy-gap: theme('spacing.l8');
-        --nd-stats-stats-gap: theme('spacing.l8');
-        --nd-stats-stats-gap-x: var(--nd-stats-stats-gap);
-        --nd-stats-stats-gap-y: var(--nd-stats-stats-gap);
-    }
-
-    .nd-Stats-content {
-        @apply container-p;
-        @apply flex flex-col gap-[var(--nd-stats-content-gap)];
-    }
 
-    .nd-Stats-copy {
-        @apply flex flex-col gap-[var(--nd-stats-copy-gap)];
     }
 
-    /* classic layout */
-    .nd-Stats-layout-classic {
-        .nd-Stats-stats {
-            display: grid;
-            column-gap: var(--nd-stats-stats-gap-x);
-            row-gap: var(--nd-stats-stats-gap-y);
-            grid-template-columns: 1fr;
-            overflow-wrap: break-word;
-
-            @media screen(md) {
-                grid-template-columns: repeat(var(--columns, 2), minmax(0, 1fr));
-
-                &[data-stats-count="3"],
-                &[data-stats-count="5"],
-                &[data-stats-count="6"] {--columns: 3}
-            }
-        }
+    .nd-Stats {
     }
 }

package/dist/styles/components/Carousel.css

@@ -0,0 +1,128 @@
+@layer components {
+
+    :root {
+        --nd-carousel-prev-content: "Prev";
+        --nd-carousel-next-content: "Next";
+        --nd-carousel-controls-gap: 0px;
+        --nd-carousel-controls-btn: unset;
+        --nd-carousel-controls-btn-bg: unset;
+        --nd-carousel-controls-btn-padding: unset;
+        --nd-carousel-controls-btn-rounding: unset;
+        --nd-carousel-controls-margin: unset;
+        --nd-carousel-controls-btn-icon-size: unset;
+    }
+
+    /* empty */
+    .nd-Carousel-empty {
+    }
+
+    /* single-item */
+    .nd-Carousel-single {
+    }
+
+    /* base */
+    .nd-Carousel-root {
+
+        /* pager */
+        .nd-Carousel-pager {
+            @apply relative whitespace-nowrap;
+
+            /* clipping enabled */
+            @apply overflow-hidden;
+            /*&:not([class*="nd-Carousel-disableClipping"]) {*/
+            /*    @apply overflow-hidden;*/
+            /*}*/
+
+            /* clipping disabled */
+            /*&.nd-Carousel-disableClipping {*/
+            /*    @apply overflow-visible;*/
+            /*}*/
+            /*&.nd-Carousel-disableClipping-left {*/
+            /*    clip-path: polygon(-100% -100%, 100% -100%, 100% 100%, -100% 100%);*/
+            /*}*/
+            /*&.nd-Carousel-disableClipping-right {*/
+            /*    clip-path: polygon(0 -100%, 200% -100%, 200% 100%, 0% 100%);*/
+            /*}*/
+        }
+
+        /* pages container (drag + translate) */
+        .nd-Carousel-pages {
+            @apply absolute inset-y-0 w-full flex;
+        }
+
+        /* pages accessibility container (not for interaction)  */
+        .nd-Carousel-pagesAlt {
+            @apply flex invisible;
+        }
+
+        /* page */
+        .nd-Carousel-page {
+            @apply inline-block w-full shrink-0 pointer-events-none;
+
+            &.nd-Carousel-pageActive {
+                @apply pointer-events-auto;
+            }
+        }
+
+        /* controls */
+        .nd-Carousel-controls {
+            margin: var(--nd-carousel-controls-margin);
+            @apply flex items-center gap-[var(--nd-carousel-controls-gap)];
+
+            /* prev */
+            .nd-Carousel-prev::after {
+                @apply block content-empty;
+                mask: var(--nd-carousel-prev-content);
+                background-color: var(--nd-carousel-controls-btn);
+                width: var(--nd-carousel-controls-btn-icon-size);
+                height: var(--nd-carousel-controls-btn-icon-size);
+            }
+
+            /* next */
+            .nd-Carousel-next::after {
+                @apply block content-empty;
+                mask: var(--nd-carousel-next-content);
+                background-color: var(--nd-carousel-controls-btn);
+                width: var(--nd-carousel-controls-btn-icon-size);
+                height: var(--nd-carousel-controls-btn-icon-size);
+            }
+
+            .nd-Carousel-prev,
+            .nd-Carousel-next {
+                color: var(--nd-carousel-controls-btn);
+                background-color: var(--nd-carousel-controls-btn-bg);
+                padding: var(--nd-carousel-controls-btn-padding);
+                border-radius: var(--nd-carousel-controls-btn-rounding);
+            }
+
+            /* play/pause */
+            .nd-Carousel-play {
+            }
+        }
+
+        /* indicators */
+        .nd-Carousel-indicators {
+            @apply flex gap-l4 items-center;
+
+            .nd-Carousel-indicator {
+                @apply block;
+
+                .nd-Carousel-indicatorBtn {
+                    @apply block w-16 h-16 rounded-full overflow-hidden text-transparent interpolate;
+                }
+
+                &.nd-Carousel-indicatorActive {
+                    .nd-Carousel-indicatorBtn {
+                    }
+                }
+            }
+        }
+    }
+
+    /* utility classes */
+    .nd-Carousel-disableClipping {
+        .nd-Carousel-pager {
+            @apply overflow-visible;
+        }
+    }
+}

package/dist/styles/components/_index.css

@@ -1,3 +1,4 @@
 @import "./embed/_index.css";
+@import "./Carousel.css";
 @import "./container.css";
-@import "./divider.css";
+@import "./divider.css";

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.3",
+  "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": "ef42bb5440cc23187aeefc29319875ed5402676f"
+  "gitHead": "d3d65564e0935e40c8b1e441316b63a126516bca"
 }