@styleflow.app/flowpress-astro-core 1.0.0-beta.1 → 1.0.0-beta.3

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 ## Unreleased
 
+## 1.0.0-beta.3
+
+- Deferred generic Gutenberg semantic validation until its renderer branch is
+  selected, preventing valid numeric heading variants from being validated as
+  body typography and spuriously falling back to `md`.
+- Added a strict production fixture for `core/heading` with `v="5"` and verified
+  that the emitted Styleflow type and variant remain `heading` and `5`.
+
+## 1.0.0-beta.2
+
+- Added exact `@splidejs/splide@4.1.4` support and dedicated renderers for
+  `sf/carousel` and `sf/carousel-item` with responsive item counts, arrows,
+  pagination, drag, focused keyboard control, loop and autoplay.
+- Added accessible live-region integration and mandatory Play/Pause controls
+  for autoplay, including hover/focus pauses and reduced-motion protection.
+- Added defensive CMS clamps, per-instance custom-element lifecycle cleanup,
+  readable no-JavaScript layouts and a diagnostic static fallback that keeps
+  legacy content whose direct children are not carousel items.
+
 ## 1.0.0-beta.1
 
 - Updated the exact `@styleflow.app/astro` dependency to `1.0.0-beta.1`,

package/README.md

@@ -9,7 +9,7 @@ The package must not import from an application or project plugin.
 ## Install
 
 ```bash
-pnpm add @styleflow.app/flowpress-astro-core@1.0.0-beta.1 \
+pnpm add @styleflow.app/flowpress-astro-core@1.0.0-beta.3 \
   @styleflow.app/astro@1.0.0-beta.1
 ```
 
@@ -54,6 +54,22 @@ visible characters. The exported
 from rendered CMS blocks so consumers can generate Tailwind
 `@source inline()` directives before compiling their frontend CSS.
 
+`sf/carousel` renders an accessible horizontal Splide carousel whose direct
+children must be `sf/carousel-item`; each item can recursively contain any
+renderable block. Item counts inherit across `base/sm/md/lg/xl/2xl`, with
+defaults `1/1/2/3/3/3`. Arrows, pagination, drag/swipe, focused keyboard
+navigation, loop and autoplay follow CMS attributes. Autoplay always includes
+one Play/Pause control, pauses on configured hover/focus states and starts
+paused under reduced-motion preferences. Every custom element owns and
+destroys exactly one Splide instance.
+
+Stored CMS values are clamped to the public contract: item counts and movement
+`1–12`, gap `0–128px`, autoplay interval `1000–60000ms`, and transition speed
+`0–5000ms`. Without JavaScript, all valid items remain a readable responsive
+grid and dead controls are hidden. If a legacy carousel contains any direct
+child other than `sf/carousel-item`, no interactive instance is initialized:
+the complete content renders statically, with a development diagnostic.
+
 Heading, rich-text, quote and matching core blocks accept Gutenberg alignment
 from either `style.typography.textAlign` or the FlowPress `textAlign` field.
 Only `left`, `center`, `right`, `justify`, `start` and `end` reach CSS.

package/dist/astro/GutenbergRenderer.astro

@@ -7,6 +7,8 @@ import type {
 import type { StyleflowContract } from "../styleflow.js";
 import type { FlowpressBlock } from "../types.js";
 import ColumnBlock from "./blocks/ColumnBlock.astro";
+import CarouselBlock from "./blocks/CarouselBlock.astro";
+import CarouselItemBlock from "./blocks/CarouselItemBlock.astro";
 import FormBlock from "./blocks/FormBlock.astro";
 import GridBlock from "./blocks/GridBlock.astro";
 import HeroBlock from "./blocks/HeroBlock.astro";
@@ -52,7 +54,7 @@ function youtubeEmbedUrl(value: unknown): string | null {
 {blocks.map((block) => {
   const name = block.name.replace(/^sf\//, "");
   const children = block.innerBlocks ?? [];
-  const semantic = semanticProps(block.attributes, contract);
+  const genericSemantic = () => semanticProps(block.attributes, contract);
   const htmlAttributes = blockHtmlAttributes(block.attributes);
   const CustomBlockRenderer = blockRenderers[block.name];
 
@@ -108,6 +110,40 @@ function youtubeEmbedUrl(value: unknown): string | null {
     );
   }
 
+  if (name === "carousel") {
+    const invalidChildNames = children
+      .filter((child) => child.name !== "sf/carousel-item")
+      .map((child) => child.name);
+    return (
+      <CarouselBlock
+        block={block}
+        contract={contract}
+        validChildren={invalidChildNames.length === 0}
+        invalidChildNames={invalidChildNames}
+      >
+        <Astro.self
+          blocks={children}
+          contract={contract}
+          blockRenderers={blockRenderers}
+          iconRenderer={IconRenderer}
+        />
+      </CarouselBlock>
+    );
+  }
+
+  if (name === "carousel-item") {
+    return (
+      <CarouselItemBlock block={block} contract={contract}>
+        <Astro.self
+          blocks={children}
+          contract={contract}
+          blockRenderers={blockRenderers}
+          iconRenderer={IconRenderer}
+        />
+      </CarouselItemBlock>
+    );
+  }
+
   if (name === "number-spinner") {
     return <NumberSpinnerBlock block={block} contract={contract} />;
   }
@@ -208,7 +244,7 @@ function youtubeEmbedUrl(value: unknown): string | null {
       ? block.attributes.images as Array<Record<string, unknown>>
       : [];
     return (
-      <S as="div" {...semantic} {...htmlAttributes}>
+      <S as="div" {...genericSemantic()} {...htmlAttributes}>
         {images.map((image) => image.url ? (
           <img
             src={String(image.url)}
@@ -225,7 +261,7 @@ function youtubeEmbedUrl(value: unknown): string | null {
     const video = objectValue(block, "video");
     const poster = objectValue(block, "poster");
     return video.url ? (
-      <S as="div" {...semantic} {...htmlAttributes}>
+      <S as="div" {...genericSemantic()} {...htmlAttributes}>
         <video
           src={String(video.url)}
           poster={poster.url ? String(poster.url) : undefined}
@@ -241,7 +277,7 @@ function youtubeEmbedUrl(value: unknown): string | null {
   if (name === "video-youtube") {
     const embed = youtubeEmbedUrl(block.attributes.url);
     return embed ? (
-      <S as="div" {...semantic} {...htmlAttributes}>
+      <S as="div" {...genericSemantic()} {...htmlAttributes}>
         <iframe
           src={embed}
           title={String(block.attributes.title ?? "YouTube video")}
@@ -255,7 +291,7 @@ function youtubeEmbedUrl(value: unknown): string | null {
 
   if (name === "chip") {
     return (
-      <S as="span" {...semantic} {...htmlAttributes}>
+      <S as="span" {...genericSemantic()} {...htmlAttributes}>
         {textValue(block, "label")}
       </S>
     );
@@ -265,7 +301,7 @@ function youtubeEmbedUrl(value: unknown): string | null {
     const media = objectValue(block, "image");
     const href = linkValue(block);
     return (
-      <S as="article" {...semantic} {...htmlAttributes}>
+      <S as="article" {...genericSemantic()} {...htmlAttributes}>
         {media.url && (
           <img src={String(media.url)} alt={String(media.alt ?? "")} loading="lazy" />
         )}
@@ -284,7 +320,7 @@ function youtubeEmbedUrl(value: unknown): string | null {
       ? block.attributes.resolvedBlocks as FlowpressBlock[][]
       : [];
     return (
-      <S as="ul" {...semantic} {...htmlAttributes}>
+      <S as="ul" {...genericSemantic()} {...htmlAttributes}>
         {items.map((item, index) => (
           <S as="li">
             {resolvedBlocks[index]?.length ? (
@@ -329,7 +365,7 @@ function youtubeEmbedUrl(value: unknown): string | null {
 
   if (name === "accordion-item") {
     return (
-      <S as="div" {...semantic} {...htmlAttributes}>
+      <S as="div" {...genericSemantic()} {...htmlAttributes}>
         <details>
           <summary>{String(block.attributes.title ?? "")}</summary>
           <Astro.self
@@ -360,7 +396,7 @@ function youtubeEmbedUrl(value: unknown): string | null {
         + `?key=${encodeURIComponent(googleMapsApiKey)}`
         + `&q=${encodeURIComponent(query)}`;
       return (
-        <S as="div" {...semantic} {...htmlAttributes}>
+        <S as="div" {...genericSemantic()} {...htmlAttributes}>
           <iframe
             src={source}
             title={address || "Map"}
@@ -371,7 +407,7 @@ function youtubeEmbedUrl(value: unknown): string | null {
       );
     }
     return query ? (
-      <S as="div" {...semantic} {...htmlAttributes}>
+      <S as="div" {...genericSemantic()} {...htmlAttributes}>
         <S
           as="a"
           href={`https://www.openstreetmap.org/search?query=${encodeURIComponent(query)}`}
@@ -385,7 +421,7 @@ function youtubeEmbedUrl(value: unknown): string | null {
 
   const layoutTag = name === "section" ? "section" : "div";
   return (
-    <S as={layoutTag} {...semantic} {...htmlAttributes}>
+    <S as={layoutTag} {...genericSemantic()} {...htmlAttributes}>
       {block.innerHtml && children.length === 0
         ? <S as="div" set:html={block.innerHtml} />
         : (

package/dist/astro/blocks/CarouselBlock.astro

@@ -0,0 +1,200 @@
+---
+import "@splidejs/splide/css/core";
+import S from "@styleflow.app/astro/S.astro";
+import { carouselOptions, carouselSettings } from "../../carousel.js";
+import type { FlowpressBlock } from "../../types.js";
+import type { StyleflowContract } from "../../styleflow.js";
+import { blockHtmlAttributes, semanticProps } from "./helpers.js";
+
+interface Props {
+  block: FlowpressBlock;
+  contract?: StyleflowContract;
+  validChildren: boolean;
+  invalidChildNames?: string[];
+}
+
+const { block, contract, validChildren, invalidChildNames = [] } = Astro.props;
+const settings = carouselSettings(block.attributes);
+const options = carouselOptions(settings);
+const semantic = semanticProps(block.attributes, contract, {
+  surface: "default",
+  layoutRole: "container",
+  density: "regular"
+});
+const htmlAttributes = blockHtmlAttributes(
+  block.attributes,
+  `flowpress-carousel${validChildren ? " splide" : " flowpress-carousel--static"}`
+);
+const style = [
+  `--flowpress-carousel-gap:${settings.gap}px`,
+  `--flowpress-carousel-base:${settings.itemsPerView.base}`,
+  `--flowpress-carousel-sm:${settings.itemsPerView.sm}`,
+  `--flowpress-carousel-md:${settings.itemsPerView.md}`,
+  `--flowpress-carousel-lg:${settings.itemsPerView.lg}`,
+  `--flowpress-carousel-xl:${settings.itemsPerView.xl}`,
+  `--flowpress-carousel-2xl:${settings.itemsPerView["2xl"]}`
+].join(";");
+
+if (!validChildren && import.meta.env.DEV) {
+  console.warn(
+    `[flowpress-carousel-invalid-children] sf/carousel accepts only sf/carousel-item; received: ${invalidChildNames.join(", ") || "unknown"}. Rendering static content.`
+  );
+}
+---
+
+{validChildren ? (
+  <flowpress-carousel>
+    <S
+      as="section"
+      {...semantic}
+      {...htmlAttributes}
+      aria-label={settings.ariaLabel}
+      data-flowpress-carousel-root
+      data-carousel-options={JSON.stringify(options)}
+      style={style}
+    >
+      {settings.showArrows ? (
+        <div class="splide__arrows" data-flowpress-carousel-controls>
+          <button class="splide__arrow splide__arrow--prev" type="button">
+            <span aria-hidden="true">←</span>
+          </button>
+          <button class="splide__arrow splide__arrow--next" type="button">
+            <span aria-hidden="true">→</span>
+          </button>
+        </div>
+      ) : null}
+      <div class="splide__track">
+        <ul class="splide__list">
+          <slot />
+        </ul>
+      </div>
+      {settings.showPagination ? <ul class="splide__pagination"></ul> : null}
+      {settings.autoplay ? (
+        <button
+          class="splide__toggle"
+          type="button"
+          data-flowpress-carousel-controls
+        >
+          <span class="splide__toggle__play">Avvia</span>
+          <span class="splide__toggle__pause">Pausa</span>
+        </button>
+      ) : null}
+    </S>
+  </flowpress-carousel>
+) : (
+  <S
+    as="section"
+    {...semantic}
+    {...htmlAttributes}
+    aria-label={settings.ariaLabel}
+    data-flowpress-carousel-invalid
+    data-invalid-children={invalidChildNames.join(",")}
+    style={style}
+  >
+    <slot />
+  </S>
+)}
+
+<script>
+  import Splide from "@splidejs/splide";
+  import type { Options } from "@splidejs/splide";
+
+  if (!customElements.get("flowpress-carousel")) {
+    customElements.define("flowpress-carousel", class extends HTMLElement {
+      private instance?: Splide;
+
+      connectedCallback() {
+        if (this.instance) return;
+        const root = this.querySelector<HTMLElement>("[data-flowpress-carousel-root]");
+        if (!root) return;
+        try {
+          const options = JSON.parse(root.dataset.carouselOptions || "{}") as Options;
+          this.instance = new Splide(root, options);
+          this.instance.mount();
+        } catch (error) {
+          console.error("[flowpress-carousel-init] Unable to initialize carousel.", error);
+        }
+      }
+
+      disconnectedCallback() {
+        this.instance?.destroy(true);
+        this.instance = undefined;
+      }
+    });
+  }
+</script>
+
+<style>
+  flowpress-carousel { display: block; }
+  .flowpress-carousel { min-width: 0; }
+  .flowpress-carousel:not(.is-initialized) .splide__list {
+    display: grid;
+    grid-template-columns: repeat(var(--flowpress-carousel-base), minmax(0, 1fr));
+    gap: var(--flowpress-carousel-gap);
+  }
+  .flowpress-carousel:not(.is-initialized) [data-flowpress-carousel-controls],
+  .flowpress-carousel:not(.is-initialized) .splide__pagination {
+    display: none;
+  }
+  .flowpress-carousel--static {
+    display: grid;
+    gap: var(--flowpress-carousel-gap);
+  }
+  .splide__arrows {
+    display: flex;
+    justify-content: space-between;
+    gap: 0.5rem;
+    margin-block-end: 0.75rem;
+  }
+  .splide__arrow:disabled { opacity: 0.45; }
+  .splide__pagination {
+    display: flex;
+    justify-content: center;
+    gap: 0.5rem;
+    margin: 0.75rem 0 0;
+    padding: 0;
+  }
+  :global(.splide__pagination__page) {
+    width: 0.75rem;
+    height: 0.75rem;
+    border-radius: 999px;
+  }
+  .splide__toggle { margin-block-start: 0.75rem; }
+  .splide__toggle__pause { display: none; }
+  .splide__toggle.is-active .splide__toggle__play { display: none; }
+  .splide__toggle.is-active .splide__toggle__pause { display: inline; }
+  .splide__arrow:focus-visible,
+  :global(.splide__pagination__page:focus-visible),
+  .splide__toggle:focus-visible {
+    outline: 3px solid currentColor;
+    outline-offset: 3px;
+  }
+  @media (min-width: 40rem) {
+    .flowpress-carousel:not(.is-initialized) .splide__list {
+      grid-template-columns: repeat(var(--flowpress-carousel-sm), minmax(0, 1fr));
+    }
+  }
+  @media (min-width: 48rem) {
+    .flowpress-carousel:not(.is-initialized) .splide__list {
+      grid-template-columns: repeat(var(--flowpress-carousel-md), minmax(0, 1fr));
+    }
+  }
+  @media (min-width: 64rem) {
+    .flowpress-carousel:not(.is-initialized) .splide__list {
+      grid-template-columns: repeat(var(--flowpress-carousel-lg), minmax(0, 1fr));
+    }
+  }
+  @media (min-width: 80rem) {
+    .flowpress-carousel:not(.is-initialized) .splide__list {
+      grid-template-columns: repeat(var(--flowpress-carousel-xl), minmax(0, 1fr));
+    }
+  }
+  @media (min-width: 96rem) {
+    .flowpress-carousel:not(.is-initialized) .splide__list {
+      grid-template-columns: repeat(var(--flowpress-carousel-2xl), minmax(0, 1fr));
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .flowpress-carousel * { scroll-behavior: auto !important; }
+  }
+</style>

package/dist/astro/blocks/CarouselItemBlock.astro

@@ -0,0 +1,26 @@
+---
+import S from "@styleflow.app/astro/S.astro";
+import type { FlowpressBlock } from "../../types.js";
+import type { StyleflowContract } from "../../styleflow.js";
+import { blockHtmlAttributes, semanticProps } from "./helpers.js";
+
+interface Props {
+  block: FlowpressBlock;
+  contract?: StyleflowContract;
+}
+
+const { block, contract } = Astro.props;
+const semantic = semanticProps(block.attributes, contract);
+const htmlAttributes = blockHtmlAttributes(
+  block.attributes,
+  "splide__slide flowpress-carousel-item"
+);
+---
+
+<S as="li" {...semantic} {...htmlAttributes}>
+  <slot />
+</S>
+
+<style>
+  .flowpress-carousel-item { min-width: 0; }
+</style>

package/dist/carousel.d.ts

@@ -0,0 +1,22 @@
+import type { Options } from "@splidejs/splide";
+declare const BREAKPOINTS: readonly ["base", "sm", "md", "lg", "xl", "2xl"];
+export interface FlowpressCarouselSettings {
+    ariaLabel: string;
+    itemsPerView: Record<(typeof BREAKPOINTS)[number], number>;
+    itemsPerMove: number;
+    gap: number;
+    showArrows: boolean;
+    showPagination: boolean;
+    drag: boolean;
+    keyboard: boolean;
+    autoplay: boolean;
+    autoplayInterval: number;
+    pauseOnHover: boolean;
+    pauseOnFocus: boolean;
+    loop: boolean;
+    speed: number;
+}
+export declare function carouselSettings(attributes: Record<string, unknown>): FlowpressCarouselSettings;
+export declare function carouselOptions(settings: FlowpressCarouselSettings): Options;
+export {};
+//# sourceMappingURL=carousel.d.ts.map

package/dist/carousel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"carousel.d.ts","sourceRoot":"","sources":["../src/carousel.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAEhD,QAAA,MAAM,WAAW,kDAAmD,CAAC;AAErE,MAAM,WAAW,yBAAyB;IACxC,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC;IAC3D,YAAY,EAAE,MAAM,CAAC;IACrB,GAAG,EAAE,MAAM,CAAC;IACZ,UAAU,EAAE,OAAO,CAAC;IACpB,cAAc,EAAE,OAAO,CAAC;IACxB,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,gBAAgB,EAAE,MAAM,CAAC;IACzB,YAAY,EAAE,OAAO,CAAC;IACtB,YAAY,EAAE,OAAO,CAAC;IACtB,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAqBD,wBAAgB,gBAAgB,CAC9B,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAClC,yBAAyB,CAgD3B;AAED,wBAAgB,eAAe,CAAC,QAAQ,EAAE,yBAAyB,GAAG,OAAO,CA6C5E"}

package/dist/carousel.js

@@ -0,0 +1,102 @@
+const BREAKPOINTS = ["base", "sm", "md", "lg", "xl", "2xl"];
+function boundedNumber(value, fallback, min, max) {
+    if (value === "" || value === null || value === undefined || value === "inherit") {
+        return fallback;
+    }
+    const numeric = Number(value);
+    return Number.isFinite(numeric)
+        ? Math.min(max, Math.max(min, Math.round(numeric)))
+        : fallback;
+}
+function booleanValue(value, fallback) {
+    return typeof value === "boolean" ? value : fallback;
+}
+export function carouselSettings(attributes) {
+    const defaults = { base: 1, sm: 1, md: 2, lg: 3, xl: 3, "2xl": 3 };
+    const values = {};
+    let inherited = defaults.base;
+    for (const breakpoint of BREAKPOINTS) {
+        const suffix = breakpoint === "base"
+            ? "Base"
+            : breakpoint === "2xl"
+                ? "2xl"
+                : breakpoint.charAt(0).toUpperCase() + breakpoint.slice(1);
+        const raw = attributes[`itemsPerView${suffix}`];
+        const fallback = breakpoint !== "base" && (raw === "" || raw === "inherit")
+            ? inherited
+            : breakpoint === "base"
+                ? defaults.base
+                : breakpoint === "md" || breakpoint === "lg"
+                    ? defaults[breakpoint]
+                    : inherited;
+        const value = boundedNumber(raw, fallback, 1, 12);
+        values[breakpoint] = value;
+        inherited = value;
+    }
+    const ariaLabel = typeof attributes.ariaLabel === "string"
+        ? attributes.ariaLabel.trim()
+        : "";
+    return {
+        ariaLabel: ariaLabel || "Carosello",
+        itemsPerView: values,
+        itemsPerMove: boundedNumber(attributes.itemsPerMove, 1, 1, 12),
+        gap: boundedNumber(attributes.gap, 24, 0, 128),
+        showArrows: booleanValue(attributes.showArrows, true),
+        showPagination: booleanValue(attributes.showPagination, true),
+        drag: booleanValue(attributes.drag, true),
+        keyboard: booleanValue(attributes.keyboard, true),
+        autoplay: booleanValue(attributes.autoplay, false),
+        autoplayInterval: boundedNumber(attributes.autoplayInterval, 5000, 1000, 60000),
+        pauseOnHover: booleanValue(attributes.pauseOnHover, true),
+        pauseOnFocus: booleanValue(attributes.pauseOnFocus, true),
+        loop: booleanValue(attributes.loop, false),
+        speed: boundedNumber(attributes.speed, 400, 0, 5000)
+    };
+}
+export function carouselOptions(settings) {
+    return {
+        label: settings.ariaLabel,
+        type: settings.loop ? "loop" : "slide",
+        perPage: settings.itemsPerView.base,
+        perMove: settings.itemsPerMove,
+        gap: `${settings.gap}px`,
+        arrows: settings.showArrows,
+        pagination: settings.showPagination,
+        drag: settings.drag,
+        keyboard: settings.keyboard ? "focused" : false,
+        autoplay: settings.autoplay,
+        interval: settings.autoplayInterval,
+        pauseOnHover: settings.pauseOnHover,
+        pauseOnFocus: settings.pauseOnFocus,
+        speed: settings.speed,
+        live: true,
+        mediaQuery: "min",
+        breakpoints: {
+            640: { perPage: settings.itemsPerView.sm },
+            768: { perPage: settings.itemsPerView.md },
+            1024: { perPage: settings.itemsPerView.lg },
+            1280: { perPage: settings.itemsPerView.xl },
+            1536: { perPage: settings.itemsPerView["2xl"] }
+        },
+        reducedMotion: {
+            speed: 0,
+            rewindSpeed: 0,
+            autoplay: "pause"
+        },
+        i18n: {
+            prev: "Slide precedente",
+            next: "Slide successiva",
+            first: "Vai alla prima slide",
+            last: "Vai all'ultima slide",
+            slideX: "Vai alla slide %s",
+            pageX: "Vai alla pagina %s",
+            play: "Avvia autoplay",
+            pause: "Pausa autoplay",
+            carousel: "carosello",
+            slide: "slide",
+            select: "Seleziona una slide da mostrare",
+            slideLabel: "%s di %s"
+        }
+    };
+}
+//# sourceMappingURL=carousel.js.map

package/dist/carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"carousel.js","sourceRoot":"","sources":["../src/carousel.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Options } from \"@splidejs/splide\";\n\nconst BREAKPOINTS = [\"base\", \"sm\", \"md\", \"lg\", \"xl\", \"2xl\"] as const;\n\nexport interface FlowpressCarouselSettings {\n  ariaLabel: string;\n  itemsPerView: Record<(typeof BREAKPOINTS)[number], number>;\n  itemsPerMove: number;\n  gap: number;\n  showArrows: boolean;\n  showPagination: boolean;\n  drag: boolean;\n  keyboard: boolean;\n  autoplay: boolean;\n  autoplayInterval: number;\n  pauseOnHover: boolean;\n  pauseOnFocus: boolean;\n  loop: boolean;\n  speed: number;\n}\n\nfunction boundedNumber(\n  value: unknown,\n  fallback: number,\n  min: number,\n  max: number\n): number {\n  if (value === \"\" || value === null || value === undefined || value === \"inherit\") {\n    return fallback;\n  }\n  const numeric = Number(value);\n  return Number.isFinite(numeric)\n    ? Math.min(max, Math.max(min, Math.round(numeric)))\n    : fallback;\n}\n\nfunction booleanValue(value: unknown, fallback: boolean): boolean {\n  return typeof value === \"boolean\" ? value : fallback;\n}\n\nexport function carouselSettings(\n  attributes: Record<string, unknown>\n): FlowpressCarouselSettings {\n  const defaults = { base: 1, sm: 1, md: 2, lg: 3, xl: 3, \"2xl\": 3 };\n  const values = {} as FlowpressCarouselSettings[\"itemsPerView\"];\n  let inherited = defaults.base;\n  for (const breakpoint of BREAKPOINTS) {\n    const suffix = breakpoint === \"base\"\n      ? \"Base\"\n      : breakpoint === \"2xl\"\n        ? \"2xl\"\n        : breakpoint.charAt(0).toUpperCase() + breakpoint.slice(1);\n    const raw = attributes[`itemsPerView${suffix}`];\n    const fallback = breakpoint !== \"base\" && (raw === \"\" || raw === \"inherit\")\n      ? inherited\n      : breakpoint === \"base\"\n      ? defaults.base\n      : breakpoint === \"md\" || breakpoint === \"lg\"\n        ? defaults[breakpoint]\n        : inherited;\n    const value = boundedNumber(\n      raw,\n      fallback,\n      1,\n      12\n    );\n    values[breakpoint] = value;\n    inherited = value;\n  }\n\n  const ariaLabel = typeof attributes.ariaLabel === \"string\"\n    ? attributes.ariaLabel.trim()\n    : \"\";\n\n  return {\n    ariaLabel: ariaLabel || \"Carosello\",\n    itemsPerView: values,\n    itemsPerMove: boundedNumber(attributes.itemsPerMove, 1, 1, 12),\n    gap: boundedNumber(attributes.gap, 24, 0, 128),\n    showArrows: booleanValue(attributes.showArrows, true),\n    showPagination: booleanValue(attributes.showPagination, true),\n    drag: booleanValue(attributes.drag, true),\n    keyboard: booleanValue(attributes.keyboard, true),\n    autoplay: booleanValue(attributes.autoplay, false),\n    autoplayInterval: boundedNumber(attributes.autoplayInterval, 5000, 1000, 60000),\n    pauseOnHover: booleanValue(attributes.pauseOnHover, true),\n    pauseOnFocus: booleanValue(attributes.pauseOnFocus, true),\n    loop: booleanValue(attributes.loop, false),\n    speed: boundedNumber(attributes.speed, 400, 0, 5000)\n  };\n}\n\nexport function carouselOptions(settings: FlowpressCarouselSettings): Options {\n  return {\n    label: settings.ariaLabel,\n    type: settings.loop ? \"loop\" : \"slide\",\n    perPage: settings.itemsPerView.base,\n    perMove: settings.itemsPerMove,\n    gap: `${settings.gap}px`,\n    arrows: settings.showArrows,\n    pagination: settings.showPagination,\n    drag: settings.drag,\n    keyboard: settings.keyboard ? \"focused\" : false,\n    autoplay: settings.autoplay,\n    interval: settings.autoplayInterval,\n    pauseOnHover: settings.pauseOnHover,\n    pauseOnFocus: settings.pauseOnFocus,\n    speed: settings.speed,\n    live: true,\n    mediaQuery: \"min\",\n    breakpoints: {\n      640: { perPage: settings.itemsPerView.sm },\n      768: { perPage: settings.itemsPerView.md },\n      1024: { perPage: settings.itemsPerView.lg },\n      1280: { perPage: settings.itemsPerView.xl },\n      1536: { perPage: settings.itemsPerView[\"2xl\"] }\n    },\n    reducedMotion: {\n      speed: 0,\n      rewindSpeed: 0,\n      autoplay: \"pause\"\n    },\n    i18n: {\n      prev: \"Slide precedente\",\n      next: \"Slide successiva\",\n      first: \"Vai alla prima slide\",\n      last: \"Vai all'ultima slide\",\n      slideX: \"Vai alla slide %s\",\n      pageX: \"Vai alla pagina %s\",\n      play: \"Avvia autoplay\",\n      pause: \"Pausa autoplay\",\n      carousel: \"carosello\",\n      slide: \"slide\",\n      select: \"Seleziona una slide da mostrare\",\n      slideLabel: \"%s di %s\"\n    }\n  };\n}\n"]}

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./client.js";
+export * from "./carousel.js";
 export * from "./block-renderers.js";
 export * from "./env.js";
 export * from "./number-spinner.js";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,sBAAsB,CAAC;AACrC,cAAc,UAAU,CAAC;AACzB,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,sBAAsB,CAAC;AACrC,cAAc,UAAU,CAAC;AACzB,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,YAAY,CAAC"}

package/dist/index.js

@@ -1,4 +1,5 @@
 export * from "./client.js";
+export * from "./carousel.js";
 export * from "./block-renderers.js";
 export * from "./env.js";
 export * from "./number-spinner.js";

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,sBAAsB,CAAC;AACrC,cAAc,UAAU,CAAC;AACzB,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,YAAY,CAAC","sourcesContent":["export * from \"./client.js\";\nexport * from \"./block-renderers.js\";\nexport * from \"./env.js\";\nexport * from \"./number-spinner.js\";\nexport * from \"./styleflow.js\";\nexport * from \"./style-classes.js\";\nexport * from \"./template-hierarchy.js\";\nexport * from \"./types.js\";\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,sBAAsB,CAAC;AACrC,cAAc,UAAU,CAAC;AACzB,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,YAAY,CAAC","sourcesContent":["export * from \"./client.js\";\nexport * from \"./carousel.js\";\nexport * from \"./block-renderers.js\";\nexport * from \"./env.js\";\nexport * from \"./number-spinner.js\";\nexport * from \"./styleflow.js\";\nexport * from \"./style-classes.js\";\nexport * from \"./template-hierarchy.js\";\nexport * from \"./types.js\";\n"]}

package/dist/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["../src/astro.d.ts","../src/block-renderers.ts","../src/client.ts","../src/env.ts","../src/index.ts","../src/number-spinner.ts","../src/style-classes.ts","../src/styleflow.ts","../src/template-hierarchy.ts","../src/templates.ts","../src/types.ts","../src/astro/blocks/helpers.ts"],"version":"5.9.3"}
+{"root":["../src/astro.d.ts","../src/block-renderers.ts","../src/carousel.ts","../src/client.ts","../src/env.ts","../src/index.ts","../src/number-spinner.ts","../src/style-classes.ts","../src/styleflow.ts","../src/template-hierarchy.ts","../src/templates.ts","../src/types.ts","../src/astro/blocks/helpers.ts"],"version":"5.9.3"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@styleflow.app/flowpress-astro-core",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.3",
   "description": "Project-agnostic WordPress routing, templates, SEO and GraphQL runtime for FlowPress Astro apps.",
   "type": "module",
   "private": false,
@@ -44,6 +44,7 @@
     "prepublishOnly": "npm run typecheck && npm test && npm run build"
   },
   "dependencies": {
+    "@splidejs/splide": "4.1.4",
     "@styleflow.app/astro": "1.0.0-beta.1"
   },
   "peerDependencies": {