README

Adds Hyvä storefront support for fom/module-page-builder-accordion while leaving the Page Builder content model and Admin editor in the base package.

Compatibility

Magento 2

Magento 2.4.4–2.4.6 and PHP 8.1 are not supported.

Magento	PHP
2.4.7	8.2, 8.3
2.4.8	8.3, 8.4
2.4.9	8.5

Each code package declares only its direct dependencies with bounded component API families. The consuming Magento metapackage selects the exact secure patch release. Review Adobe's system requirements, lifecycle policy, release schedule, security enforcement policy, and versioning policy when maintaining the matrix.

Mage-OS

Mage-OS	PHP	Magento base
3.4.0	8.3, 8.4, 8.5	2.4.9

Mage-OS 3.4 components replace the corresponding Magento 2.4.9 component packages. The existing Magento-named component constraints therefore support both distributions without parallel dependency alternatives. Mage-OS supports only its latest release branch; review its release policy and system requirements when this matrix is updated.

Hyvä Theme

Hyvä Theme Module	Tailwind CSS
>=1.3 <2.0	3 and 4

The package uses Alpine.js supplied by Hyvä. It does not load RequireJS, jQuery, or the Magento accordion widget on a Hyvä storefront.

Installation

composer require fom/module-page-builder-accordion-hyva
bin/magento module:enable Fom_PageBuilderAccordion Fom_PageBuilderAccordionHyva
bin/magento setup:upgrade
bin/magento hyva:config:generate

Rebuild the active Hyvä theme CSS after generating the module configuration.

For Tailwind 4 themes:

cd app/design/frontend/Vendor/theme/web/tailwind
npx hyva-sources
npm run build

For Tailwind 3 themes, use the theme's existing build-prod command after hyva:config:generate.

Storefront behavior

The companion supports every base content-type setting:

One open item, one item always open, or multiple open items.
No initially open item or one selected item.
No animation, 200 ms, 300 ms, or 500 ms animation.
Left or right chevron position.
H2 through H6 item headings emitted by the base module.

Deep links open the containing item. Arrow keys, Home, and End move focus between item buttons. Reduced-motion preferences disable panel animation.

Styling

The component ships a neutral Tailwind-independent stylesheet. Current Hyvä builds load view/frontend/tailwind/module.css; legacy Tailwind 3 builds use tailwind-source.css and tailwind.config.js.

Override these custom properties in the active theme to change the design without replacing the interaction markup:

[data-content-type='accordion'][data-appearance='default'] {
    --fom-accordion-border-color: var(--color-gray-300);
    --fom-accordion-control-background: transparent;
    --fom-accordion-control-hover-background: var(--color-gray-100);
    --fom-accordion-control-color: inherit;
    --fom-accordion-control-font-size: 1rem;
    --fom-accordion-control-font-weight: 600;
    --fom-accordion-control-line-height: 1.5;
    --fom-accordion-control-padding-block: 1rem;
    --fom-accordion-control-padding-inline: 1rem;
    --fom-accordion-content-background: transparent;
    --fom-accordion-content-color: inherit;
    --fom-accordion-content-padding: 1rem;
    --fom-accordion-focus-color: currentColor;
    --fom-accordion-icon-color: currentColor;
    --fom-accordion-icon-gap: .75rem;
    --fom-accordion-icon-size: 1rem;
}

Page Builder's CSS Classes field remains available for instance-specific variants. Indicator position is behavior configuration, not a Page Builder appearance.

License

Open Software License 3.0

fom / module-page-builder-accordion-hyva

Maintainers

Package info

Statistics

Security