@nascentdigital/funnel-ui 4.5.2 → 4.5.4

package/dist/server/panels/TestimonialPanel.js

@@ -1,4 +1,15 @@
 "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 };
 };
@@ -11,10 +22,8 @@ const entities_1 = require("../entities");
 const fields_1 = require("../fields");
 const BlockPanel_1 = require("./BlockPanel");
 // component
-function TestimonialPanel({ className, panel, layout = 'quoteAuthor', title, titleTag = 'span', quote, quoteTag = 'h2', author, authorTag = 'div', ctas = [], decorator }) {
-    var _a, _b;
-    // extract company from author
-    const company = (_b = (_a = author.fields) === null || _a === void 0 ? void 0 : _a.company) === null || _b === void 0 ? void 0 : _b.value;
+function TestimonialPanel(_a) {
+    var { className, panel } = _a, testimonialProps = __rest(_a, ["className", "panel"]);
     // render
     return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className, 'nd-TestimonialPanel', 
         // base layout
@@ -37,13 +46,7 @@ function TestimonialPanel({ className, panel, layout = 'quoteAuthor', title, tit
                 center: 'lg:nd-TestimonialPanel-textCenter',
                 right: 'lg:nd-TestimonialPanel-textEnd'
             }
-        })), children: (0, jsx_runtime_1.jsxs)("div", { className: "nd-BlockPanel-content nd-TestimonialPanel-content", children: [company && layout === 'companyQuoteAuthor' &&
-                    (0, jsx_runtime_1.jsx)(entities_1.Client, { as: "div", className: "nd-TestimonialPanel-company", client: company, displayFields: ['name', 'logo'] }), title &&
-                    (0, jsx_runtime_1.jsx)(fields_1.Title, { className: "nd-TestimonialPanel-title", as: titleTag, title: title }), (0, jsx_runtime_1.jsx)(fields_1.Quote, { className: "nd-TestimonialPanel-quote", as: quoteTag, quote: quote }), (0, jsx_runtime_1.jsx)(entities_1.Person, { as: authorTag, className: "nd-TestimonialPanel-author", person: author, displayFields: layout === 'companyQuoteAuthor'
-                        ? entities_1.Person.DisplayFields.exclude('company')
-                        : entities_1.Person.DisplayFields.Id.values }), ctas.length > 0 &&
-                    (0, jsx_runtime_1.jsx)("div", { className: "nd-TestimonialPanel-ctas", children: ctas.map(cta => (0, jsx_runtime_1.jsx)(fields_1.Link, { className: "nd-TestimonialPanel-cta", link: cta.value }, cta.id)) }), decorator &&
-                    (0, jsx_runtime_1.jsx)("div", { className: "nd-TestimonialPanel-decorator", children: decorator })] }) }));
+        })), children: (0, jsx_runtime_1.jsx)(TestimonialPanel.Testimonial, Object.assign({ className: "nd-BlockPanel-content nd-TestimonialPanel-content" }, testimonialProps)) }));
 }
 // extension
 (function (TestimonialPanel) {
@@ -59,13 +62,35 @@ function TestimonialPanel({ className, panel, layout = 'quoteAuthor', title, tit
             hint: 'Who said it?',
             collections: [entities_1.Person.schema]
         });
-        Fields.cta = funnel_core_1.Schema.Field.link({ name: 'Call to Action' });
-        Fields.ctas = funnel_core_1.Schema.Field.list({
-            name: 'CTAs',
-            description: 'Add your call-to-actions in the order you\'d like them to appear *(these are optional)*.',
-            itemTypes: { cta: Fields.cta },
-            min: 1,
-            max: 2
-        }).optional();
+        Fields.ctas = fields_1.CallToActions.schema.optional();
+        Fields.all = {
+            title: Fields.title,
+            quote: Fields.quote,
+            author: Fields.author,
+            ctas: Fields.ctas
+        };
     })(Fields = TestimonialPanel.Fields || (TestimonialPanel.Fields = {}));
+    // component
+    function Testimonial({ className, layout, titleTag = 'span', title, quoteTag = 'h2', quote, authorTag = 'div', author, ctas = [], companyDisplayFields = ['logo'], decorator }) {
+        var _a, _b;
+        // extract company from author
+        const company = (_b = (_a = author === null || author === void 0 ? void 0 : author.fields) === null || _a === void 0 ? void 0 : _a.company) === null || _b === void 0 ? void 0 : _b.value;
+        // render
+        return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(className, 'nd-Testimonial'), children: [!title && !quote && !author && ctas.length === 0 &&
+                    (0, jsx_runtime_1.jsx)(Testimonial.Placeholder, {}), company && layout === 'companyQuoteAuthor' &&
+                    (0, jsx_runtime_1.jsx)(entities_1.Client, { as: "div", className: "nd-TestimonialPanel-company", client: company, displayFields: companyDisplayFields }), title &&
+                    (0, jsx_runtime_1.jsx)(fields_1.Title, { className: "nd-TestimonialPanel-title", as: titleTag, title: title }), (0, jsx_runtime_1.jsx)(fields_1.Quote, { className: "nd-TestimonialPanel-quote", as: quoteTag, quote: quote }), (0, jsx_runtime_1.jsx)(entities_1.Person, { as: authorTag, className: "nd-TestimonialPanel-author", person: author, displayFields: layout === 'companyQuoteAuthor'
+                        ? entities_1.Person.DisplayFields.exclude('company')
+                        : entities_1.Person.DisplayFields.Id.values }), ctas.length > 0 &&
+                    (0, jsx_runtime_1.jsx)(fields_1.CallToActions, { className: "nd-TestimonialPanel-ctas", ctas: ctas }), decorator &&
+                    (0, jsx_runtime_1.jsx)("div", { className: "nd-TestimonialPanel-decorator", children: decorator })] }));
+    }
+    TestimonialPanel.Testimonial = Testimonial;
+    (function (Testimonial) {
+        // placeholder
+        function Placeholder() {
+            return ((0, jsx_runtime_1.jsx)("div", { className: "nd-Testimonial-placeholder", children: "No testimonial content" }));
+        }
+        Testimonial.Placeholder = Placeholder;
+    })(Testimonial = TestimonialPanel.Testimonial || (TestimonialPanel.Testimonial = {}));
 })(TestimonialPanel || (exports.TestimonialPanel = TestimonialPanel = {}));

package/dist/server/panels/VisualPanel.d.ts

@@ -8,7 +8,7 @@ export declare namespace VisualPanel {
     type Props = BlockPanel.Props & {
         className?: string;
         panel: BlockLayout.Visual;
-        visual: Visual.Model;
+        visual?: Visual.Model;
         visualDecorator?: ReactNode;
         visualLoading?: Visual.Loading;
         aspect?: AspectRatio;

package/dist/server/panels/VisualPanel.js

@@ -147,7 +147,6 @@ function VisualPanel({ className, panel, visual, visualDecorator, visualLoading,
         if (aspect === matchedAspect) {
             aspect = 'auto';
         }
-        console.debug('[VisualPanel/getConfig] aspect calculation:', { width, height, sourceAspectRatio, matchedAspect });
         // create schema (drop matched aspect if we need to)
         const configSchema = {
             [keys.aspect]: matchedAspect
@@ -163,7 +162,6 @@ function VisualPanel({ className, panel, visual, visualDecorator, visualLoading,
         if (sourceAspectRatio && aspect !== 'auto') {
             // coerce anchor
             const targetAspectRatio = schema_1.AspectRatio.ratios[aspect];
-            console.debug('[VisualPanel/getConfig] aspect calculation:', { width, height, sourceAspectRatio, matchedAspect, targetAspectRatio });
             let anchorSchema = schema_1.Anchor.schema.modify({ semantics: 'segmented' });
             if (sourceAspectRatio < targetAspectRatio) {
                 anchorSchema = anchorSchema.keepOptions('center', 'top', 'bottom');

package/dist/server/schema/Anchor.d.ts

@@ -1,5 +1,5 @@
 import { Schema } from '@nascentdigital/funnel-core';
-export type Anchor = 'center' | 'top' | 'bottom' | 'left' | 'right';
+export type Anchor = 'top' | 'left' | 'center' | 'bottom' | 'right';
 export declare namespace Anchor {
     const options: Schema.EnumField.Options<Anchor>;
     const schema: Schema.EnumField<Schema.EnumField.Options<Anchor>>;

package/dist/server/schema/Anchor.js

@@ -7,10 +7,10 @@ var Anchor;
 (function (Anchor) {
     // schema
     Anchor.options = {
-        center: { name: 'Center' },
         top: { name: 'Top' },
-        bottom: { name: 'Bottom' },
         left: { name: 'Left' },
+        center: { name: 'Center' },
+        bottom: { name: 'Bottom' },
         right: { name: 'Right' }
     };
     Anchor.schema = funnel_core_1.Schema.Field.enumeration({

package/dist/server/schema/BlockConfig.js

@@ -22,7 +22,7 @@ var BlockConfig;
         });
         // helpers
         function getClassName(theme) {
-            return funnel_core_1.BlockThemes.getClassName(theme !== null && theme !== void 0 ? theme : 'default');
+            return `nd-theme-${(theme !== null && theme !== void 0 ? theme : 'default')}`;
         }
         Theme.getClassName = getClassName;
     })(Theme = BlockConfig.Theme || (BlockConfig.Theme = {}));

package/dist/server/schema/ListPanelLayout.d.ts

@@ -1,5 +1,6 @@
 import { Schema } from '@nascentdigital/funnel-core';
 import { ItemAlignment } from './ItemAlignment';
+import type { Carousel } from '../../client';
 export type ListPanelLayout = keyof ListPanelLayout.Configs;
 export declare namespace ListPanelLayout {
     const options: Schema.EnumField.Options<ListPanelLayout>;
@@ -11,6 +12,7 @@ export declare namespace ListPanelLayout {
     type Card = {
         itemSize: 'sm' | 'md';
     };
+    type Carousel = Carousel.CommonProps;
     type FlexWrap = {
         allowSingleItemRows: boolean;
         itemAlignment: ItemAlignment;
@@ -18,6 +20,7 @@ export declare namespace ListPanelLayout {
     type Grid = {
         columns: number;
     };
+    type Masonry = {};
     type Stack = {
         direction: 'horizontal' | 'vertical';
         itemDistribution: 'equal' | 'even' | 'none';
@@ -26,9 +29,12 @@ export declare namespace ListPanelLayout {
         brick: Omit<Brick, 'flipped'>;
         brickFlipped: Omit<Brick, 'flipped'>;
         card: Card;
+        carousel: Carousel;
         flexWrap: FlexWrap;
         grid: Grid;
         horizontalStack: Omit<Stack, 'direction'>;
+        masonry: Masonry;
         verticalStack: Omit<Stack, 'direction'>;
+        bento: {};
     };
 }

package/dist/server/schema/ListPanelLayout.js

@@ -9,10 +9,13 @@ var ListPanelLayout;
         brick: { name: 'Brick' },
         brickFlipped: { name: 'Brick flipped' },
         card: { name: 'Card' },
+        carousel: { name: 'Carousel' },
         flexWrap: { name: 'Flex wrap' },
         horizontalStack: { name: 'Horizontal stack' },
+        masonry: { name: 'Masonry' },
         verticalStack: { name: 'Vertical stack' },
         grid: { name: 'Grid' },
+        bento: { name: 'Bento' }
     };
     ListPanelLayout.schema = funnel_core_1.Schema.Field.enumeration({
         name: 'Layout',

package/dist/server/utils/ReactUtils.d.ts

@@ -0,0 +1,6 @@
+import { FragmentProps, ReactElement, ReactNode } from 'react';
+export declare namespace ReactUtils {
+    function isFragment(node: ReactNode): node is ReactElement<FragmentProps>;
+    function flattenChildren<TNode extends ReactNode = ReactNode>(children: TNode): TNode[];
+    function flattenFragment<TNode extends ReactNode = ReactNode>(fragment: ReactElement<FragmentProps>): TNode[];
+}

package/dist/server/utils/ReactUtils.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReactUtils = void 0;
+const react_1 = require("react");
+// namespace
+var ReactUtils;
+(function (ReactUtils) {
+    function isFragment(node) {
+        return (0, react_1.isValidElement)(node)
+            && node.type === react_1.Fragment;
+    }
+    ReactUtils.isFragment = isFragment;
+    function flattenChildren(children) {
+        // setup nodes
+        const nodes = [];
+        //
+        // return nodes
+        return nodes;
+    }
+    ReactUtils.flattenChildren = flattenChildren;
+    function flattenFragment(fragment) {
+        throw new Error();
+    }
+    ReactUtils.flattenFragment = flattenFragment;
+})(ReactUtils || (exports.ReactUtils = ReactUtils = {}));

package/dist/server/utils/index.d.ts

@@ -0,0 +1 @@
+export * from './ReactUtils';

package/dist/{client/interaction/modal → server/utils}/index.js

@@ -14,5 +14,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./Modal"), exports);
-__exportStar(require("./ModalContainer"), exports);
+__exportStar(require("./ReactUtils"), exports);

package/dist/styles/Page.css

@@ -0,0 +1,5 @@
+@layer components {
+
+    .nd-Page {
+    }
+}

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";