@nascentdigital/funnel-ui 4.6.1 → 5.0.1

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

@@ -28,31 +28,8 @@
     .nd-Block {
         min-height: var(--nd-block-height-min);
     }
-    .nd-Block-root {
-    }
 
     /* container/fullbleed */
-    ._nd-Block-containable {
-
-        /* container */
-        &.nd-Block-root > .nd-BlockPanel {
-            @media screen and (max-width: theme('screens.md')) {
-                &:not(.nd-BlockPanel-fullbleed):not(.nd-BlockPanel-fullbleed-mobile) {
-                    @apply container-p;
-                }
-            }
-            @media screen(md) {
-                &:not(.nd-BlockPanel-fullbleed):not(.nd-BlockPanel-fullbleed-tablet) {
-                    @apply container-p;
-                }
-            }
-            @media screen(lg) {
-                &:not(.nd-BlockPanel-fullbleed):not(.nd-BlockPanel-fullbleed-desktop) {
-                    @apply container-p;
-                }
-            }
-        }
-    }
     ._nd-Block-fullbleed-left {
         margin-left: calc((100dvw - 100cqw) / -2);
     }
@@ -62,12 +39,16 @@
 
 
     /* row layout */
+    .nd-Block-row {
+        @apply max-md:_nd-Block-row-mobile md:_nd-Block-row-desktop;
+    }
+
     ._nd-Block-row-mobile {
-        @apply container-p flex flex-col gap-[var(--nd-block-layout-gap-y)];
+        @apply flex flex-col gap-[var(--nd-block-layout-gap-y)];
         container-type: inline-size;
 
         /* fullbleed (l1 only) */
-        &.nd-Block-root > .nd-BlockPanel {
+        &.nd-Block-rootContainer > .nd-BlockPanel {
             &.nd-BlockPanel-fullbleed {
                 @apply _nd-Block-fullbleed-left _nd-Block-fullbleed-right;
             }
@@ -76,50 +57,44 @@
             }
         }
     }
+
     ._nd-Block-row-desktop {
-        @apply container-p grid auto-cols-fr gap-[var(--nd-block-layout-gap-x)];
+        @apply grid auto-cols-fr gap-[var(--nd-block-layout-gap-x)];
         container-type: inline-size;
 
-        /* row widths */
-        &.nd-Block-items-1 {
-            @apply grid-cols-1;
-        }
-        &.nd-Block-items-2 {
-            @apply grid-cols-2;
-        }
-        &.nd-Block-items-3 {
-            @apply grid-cols-3;
-        }
-        &.nd-Block-items-4 {
-            @apply grid-cols-4;
-        }
-
         /* row alignment */
+
         &.nd-Block-y-start {
             @apply items-start;
         }
+
         &.nd-Block-y-center {
             @apply items-center;
         }
+
         &.nd-Block-y-end {
             @apply items-end;
         }
 
-        /* fullbleed (l1 only) */
-        &.nd-Block-root > .nd-BlockPanel {
+        /* fullbleed (l1 OR l2) */
+
+        & > .nd-BlockPanel {
             &.nd-BlockPanel-fullbleed {
                 &:first-child {
                     @apply _nd-Block-fullbleed-left;
                 }
+
                 &:last-child {
                     @apply _nd-Block-fullbleed-right;
                 }
             }
+
             @media screen(md) {
                 &.nd-BlockPanel-fullbleed-tablet {
                     &:first-child {
                         @apply _nd-Block-fullbleed-left;
                     }
+
                     &:last-child {
                         @apply _nd-Block-fullbleed-right;
                     }
@@ -130,6 +105,7 @@
                     &:first-child {
                         @apply _nd-Block-fullbleed-left;
                     }
+
                     &:last-child {
                         @apply _nd-Block-fullbleed-right;
                     }
@@ -137,10 +113,36 @@
             }
         }
     }
-    .nd-Block-row {
-        @apply max-md:_nd-Block-row-mobile md:_nd-Block-row-desktop;
+
+    .nd-Block-row-ratio-1_1 {
+        @apply grid-cols-[1fr,1fr];
     }
 
+    .nd-Block-row-ratio-1_2 {
+        @apply grid-cols-[1fr,2fr];
+    }
+
+    .nd-Block-row-ratio-1_3 {
+        @apply grid-cols-[1fr,3fr];
+    }
+
+    .nd-Block-row-ratio-2_1 {
+        @apply grid-cols-[2fr,1fr];
+    }
+
+    .nd-Block-row-ratio-2_3 {
+        @apply grid-cols-[2fr,3fr];
+    }
+
+    .nd-Block-row-ratio-3_1 {
+        @apply grid-cols-[3fr,1fr];
+    }
+
+    .nd-Block-row-ratio-3_2 {
+        @apply grid-cols-[3fr,2fr];
+    }
+
+
     /* column layout  */
     ._nd-Block-column-mobile {
         @apply flex flex-col gap-[var(--nd-block-layout-gap-y)];
@@ -149,12 +151,13 @@
         @apply grid grid-cols-1 grid-flow-row gap-[var(--nd-block-layout-gap-y)];
     }
     .nd-Block-column {
-        @apply w-full max-md:_nd-Block-column-mobile md:_nd-Block-column-desktop _nd-Block-containable;
+        @apply w-full max-md:_nd-Block-column-mobile md:_nd-Block-column-desktop;
     }
 
-    /* column layout  */
+
+    /* stack layout  */
     .nd-Block-stack {
-        @apply stacked _nd-Block-containable;
+        @apply stacked;
 
         /* z-indexing */
         > *:nth-child(1) {
@@ -186,6 +189,7 @@
         }
     }
 
+
     /* panel layout */
     ._nd-BlockPanel-desktop {
         @apply grid grid-cols-12;
@@ -241,4 +245,41 @@
     .nd-BlockPanel-mobileLast {
         @apply max-md:order-last;
     }
+
+    /*  containers   */
+    .nd-Block-rowWrap {
+        @apply container;
+    }
+}
+
+.nd-Block-rootContainer:not(.nd-Block-row) {
+
+    /* direct descendent */
+    > .nd-BlockPanel-wrap {
+        @media screen and (max-width: theme('screens.md')) {
+            &:not(:is(.nd-Block-fullbleed, .nd-Block-fullbleed-mobile)){
+                @apply container;
+            }
+        }
+
+        @media screen(md) {
+            &:not(:is(.nd-BlockPanel-fullbleed,.nd-BlockPanel-fullbleed-tablet)){
+                @apply container;
+            }
+        }
+
+        @media screen(lg) {
+            &:not(:is(.nd-BlockPanel-fullbleed,.nd-BlockPanel-fullbleed-desktop)){
+                @apply container;
+            }
+        }
+
+    }
+
+    /* nested */
+    > .nd-Block-containerWrap:not(.nd-Block-rowWrap) {
+        .nd-BlockPanel-wrap {
+            @apply container;
+        }
+    }
 }

package/dist/styles/blocks/Editorial.css

@@ -42,7 +42,7 @@
             @apply w-full;
         }
         .nd-Editorial-headerWrap {
-            @apply container-p relative;
+            @apply container relative;
         }
         .nd-Editorial-header {
             @apply flex flex-col gap-[var(--nd-editorial-header-gap)];
@@ -60,7 +60,7 @@
             margin: var(--nd-editorial-ctas-margin);
         }
         .nd-Editorial-bodyWrap {
-            @apply container-p relative;
+            @apply container relative;
         }
         .nd-Editorial-visualWrap {
             @apply relative;

package/dist/styles/blocks/Form.css

@@ -3,11 +3,11 @@
     .nd-Form {
 
         .nd-Form-copyWrap {
-            @apply container-p;
+            @apply container;
         }
 
         .nd-Form-formWrap {
-            @apply container-p;
+            @apply container;
         }
     }
 }

package/dist/styles/blocks/MediaLayout.css

@@ -64,7 +64,7 @@
         /* vertical stack */
         .nd-StackLayout.nd-StackLayout-direction-vertical {
             .nd-MediaLayout-itemWrap {
-                @apply aspect-cinema @panel-lg:aspect-cinemascope;
+                @apply nd-VisualPanel nd-VisualPanel-aspect-auto;
             }
         }
     }

package/dist/styles/components/container.css

@@ -2,57 +2,36 @@
 
     :root {
         --nd-container-size: theme('screens.xl');
-        --nd-container-size-wide: 1800px;
         --nd-container-gutter-xs: 24px;
-        --nd-container-gutter-wide-xs: var(--nd-container-gutter-xs);
         --nd-container-gutter-sm: 40px;
-        --nd-container-gutter-wide-sm: var(--nd-container-gutter-sm);
         --nd-container-gutter-md: 80px;
-        --nd-container-gutter-wide-md: var(--nd-container-gutter-md);
         --nd-container-gutter-lg: 102px;
-        --nd-container-gutter-wide-lg: var(--nd-container-gutter-lg);
         --nd-container-gutter-xl: 102px;
-        --nd-container-gutter-wide-xl: 80px;
 
         --nd-container-gutter: var(--nd-container-gutter-xs);
-        --nd-container-gutter-wide: var(--nd-container-gutter-wide-xs);
         @media screen(sm) {
             --nd-container-gutter: var(--nd-container-gutter-sm);
-            --nd-container-gutter-wide: var(--nd-container-gutter-wide-sm);
         }
         @media screen(md) {
             --nd-container-gutter: var(--nd-container-gutter-md);
-            --nd-container-gutter-wide: var(--nd-container-gutter-wide-md);
         }
         @media screen(lg) {
             --nd-container-gutter: var(--nd-container-gutter-lg);
-            --nd-container-gutter-wide: var(--nd-container-gutter-wide-lg);
         }
         @media screen(xl) {
             --nd-container-gutter: var(--nd-container-gutter-xl);
-            --nd-container-gutter-wide: var(--nd-container-gutter-wide-xl);
         }
     }
 
     .container {
-        @apply max-w-[var(--nd-container-size)] mx-auto;
-    }
-    .container-wide {
-        @apply max-w-[var(--nd-container-size-wide)] mx-auto;
+        @apply max-w-[var(--nd-container-size)] mx-auto container-gutter;
     }
     .container-gutter {
         @apply px-[var(--nd-container-gutter)];
     }
-    .container-gutter-wide {
-        @apply px-[var(--nd-container-gutter-wide)];
-    }
-    .container-p {
-        @apply container container-gutter;
-    }
-    .container-wide-p {
-        @apply container-wide container-gutter-wide;
-    }
     .container-none {
         @apply max-w-none px-revert;
     }
 }
+
+/* TODO: find replace only on UI and nascentdigital , NOT: Editor!!!*/

package/dist/styles/components/embed/YoutubePlayer.css

@@ -8,7 +8,7 @@
             @apply flex flex-col justify-center;
 
             .nd-YoutubePlayer-thumbnail {
-                @apply absolute inset-0 z-supersurface;
+                @apply absolute inset-0 w-full h-full object-cover z-supersurface;
             }
 
             iframe {

package/dist/styles/fields/Media.css

@@ -0,0 +1,37 @@
+@layer components {
+
+    /* variables */
+    :root {
+    }
+
+
+    /* base */
+    .nd-Media {
+    }
+
+    /* image */
+    .nd-Media-image {
+        @apply stacked;
+
+        /* desktop (hide if mobile is enabled) */
+        &:has(.nd-Media-image-mobile) > .nd-Media-image-desktop {
+            @apply hidden md:block;
+        }
+
+        /* mobile */
+        .nd-Media-image-mobile {
+            @apply block md:hidden;
+        }
+    }
+
+    /* video */
+    .nd-Media-video {
+    }
+
+    /* streaming video (youtube/vimeo) */
+    .nd-Media-streamingVideo {
+    }
+    .nd-Media-streamingVideo-player {
+        @apply w-full h-full;
+    }
+}

package/dist/styles/fields/_index.css

@@ -5,6 +5,7 @@
 @import "./Icon.css";
 @import "./LazyVideo.css";
 @import "./Link.css";
+@import "./Media.css";
 @import "./Quote.css";
 @import "./RichText.css";
 @import "./Title.css";

package/dist/styles/layouts/Accordion.css

@@ -0,0 +1,29 @@
+@layer components {
+
+    :root {
+    }
+
+    /* list */
+    .nd-AccordionLayout {
+    }
+
+    /* item */
+    .nd-AccordionItem {
+    }
+    .nd-AccordionItem-expanded {
+    }
+
+    /* header */
+    .nd-AccordionItem-headerWrap {
+    }
+    .nd-AccordionItem-header {
+    }
+    .nd-AccordionItem-headerFocus {
+    }
+
+    /* panel */
+    .nd-AccordionItem-panelWrap {
+    }
+    .nd-AccordionItem-panel {
+    }
+}

package/dist/styles/layouts/_index.css

@@ -1,8 +1,9 @@
-@import "./Layout.css";
+@import "./Accordion.css";
 @import "./BentoLayout.css";
 @import "./CardLayout.css";
 @import "./BrickLayout.css";
 @import "./FlexWrapLayout.css";
 @import "./GridLayout.css";
+@import "./Layout.css";
 @import "./MasonryLayout.css";
 @import "./StackLayout.css";

package/dist/styles/panels/VisualPanel.css

@@ -9,7 +9,8 @@
 
     /* aspect ratios */
     .nd-VisualPanel-aspect-auto {
-        --nd-visual-aspect: theme(aspectRatio.auto);
+        --nd-visual-aspect: unset;
+        --nd-visual-width: 100%;
         --nd-visual-height: auto;
     }
     .nd-VisualPanel-aspect-square {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nascentdigital/funnel-ui",
   "description": "UI components for funnel",
-  "version": "4.6.1",
+  "version": "5.0.1",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "restricted"
@@ -69,5 +69,5 @@
     "react-dom": "^19",
     "ts-jest": "^29.3.2"
   },
-  "gitHead": "4a1d18f6f87148196b5e820c0ada8f2a8111b9f6"
+  "gitHead": "6ac66e04e5d6d10b959826b84cf3827422ddf47b"
 }