### Install Breeze via Composer

Source: https://context7.com/breezefront/module-breeze/llms.txt

Execute these commands in the Magento root directory to install and enable the Breeze module.

```bash
composer require swissup/module-breeze
bin/magento module:enable Swissup_Breeze Swissup_Rtl
bin/magento setup:upgrade
bin/magento cache:flush
```

--------------------------------

### Install Breeze via Composer and Enable Module

Source: https://github.com/breezefront/module-breeze/blob/master/README.md

Use these commands to add the module to your project and enable it within the Magento CLI.

```bash
composer require swissup/module-breeze
bin/magento module:enable Swissup_Breeze Swissup_Rtl
```

--------------------------------

### Create a Modal with a Trigger Element

Source: https://context7.com/breezefront/module-breeze/llms.txt

Configure a modal to be opened by a specific trigger element, simplifying the setup for modals activated by buttons or links.

```javascript
$('.modal-content').modal({
    trigger: '.open-modal-btn',
    title: 'Triggered Modal'
});
```

--------------------------------

### Manage Customer Data Sections

Source: https://context7.com/breezefront/module-breeze/llms.txt

Use $.customerData methods to get, set, reload, and invalidate customer data sections. Subscribe to changes for real-time updates. Ensure customer data is initialized before accessing it.

```javascript
var cartData = $.customerData.get('cart');
cartData.subscribe(function (data) {
    console.log('Cart updated:', data);
});
var currentCart = cartData();
console.log('Items in cart:', currentCart.items?.length || 0);
$.customerData.set('cart', {
    items: [],
    subtotal: '$0.00'
});
$.customerData.reload(['cart', 'customer']);
$.customerData.reload([], true);
$.customerData.invalidate(['cart', 'wishlist']);
$.customerData.getInitCustomerData().then(function () {
    console.log('Customer data is ready');
    var customer = $.customerData.get('customer')();
    if (customer.firstname) {
        console.log('Welcome back,', customer.firstname);
    }
});
$(document).on('customer-data-reload', function (event, data) {
    console.log('Sections reloaded:', data.sections);
    console.log('Response:', data.response);
});
$(document).on('customer-data-invalidate', function (event, data) {
    console.log('Sections invalidated:', data.sections);
});
```

--------------------------------

### Initialize and Configure Product Widget

Source: https://context7.com/breezefront/module-breeze/llms.txt

Sets up configurable product options, including attributes, images, and pricing, and provides hooks for event listeners and manual price reloads.

```javascript
// Initialize configurable product (usually done automatically)
$('#product_addtocart_form').configurable({
    spConfig: {
        attributes: {
            "93": {
                id: "93",
                code: "color",
                label: "Color",
                options: [
                    { id: "49", label: "Black", products: ["1", "2"] },
                    { id: "50", label: "White", products: ["3", "4"] }
                ]
            }
        },
        images: {
            "1": [{ img: "/black-image.jpg", full: "/black-image-full.jpg" }],
            "3": [{ img: "/white-image.jpg", full: "/white-image-full.jpg" }]
        },
        optionPrices: {
            "1": { finalPrice: { amount: 99.00 }, oldPrice: { amount: 120.00 } },
            "3": { finalPrice: { amount: 109.00 }, oldPrice: { amount: 130.00 } }
        },
        prices: {
            finalPrice: { amount: 99.00 }
        },
        chooseText: "Choose an Option..."
    },
    gallerySwitchStrategy: 'replace',
    mediaGallerySelector: '[data-gallery-role=gallery-placeholder]'
});

// Listen for configuration events
$(document).on('configurable.initialized', function () {
    console.log('Configurable product ready');
});

// Pre-select options via URL hash
// URL: product.html#93=49&142=167
// This will automatically select Color: Black, Size: Medium

// Trigger price reload after custom changes
$('#product_addtocart_form').configurable('instance')._reloadPrice();
```

--------------------------------

### Create New Breeze Theme

Source: https://context7.com/breezefront/module-breeze/llms.txt

Use the CLI command to create a new Breeze-based theme. Supports interactive mode, direct creation with package name, and specifying a parent theme or vendor name.

```bash
# Interactive mode - prompts for theme name and parent
bin/magento breeze:theme:create
```

```bash
# Direct creation with package name
bin/magento breeze:theme:create vendor/theme-frontend-mytheme
```

```bash
# Specify parent theme
bin/magento breeze:theme:create vendor/theme-frontend-mytheme --parent=Swissup/breeze-blank
```

```bash
# Specify vendor name
bin/magento breeze:theme:create --vendor=mycompany
```

--------------------------------

### Create New Breeze Module

Source: https://context7.com/breezefront/module-breeze/llms.txt

Use the CLI command to create a new Breeze-compatible module. Supports interactive mode, direct creation with package name, and options to skip specific file generations like XML, CSS, or JavaScript.

```bash
# Interactive mode - prompts for package name
bin/magento breeze:module:create
```

```bash
# Direct creation with package name
bin/magento breeze:module:create vendor/module-breeze-myfeature
```

```bash
# Create integration for existing third-party module
bin/magento breeze:module:create --for=vendor/module-name --vendor=myvendor
```

```bash
# Create without generating certain files
bin/magento breeze:module:create vendor/module-breeze-myfeature --noxml  # Skip layout XML
bin/magento breeze:module:create vendor/module-breeze-myfeature --nocss  # Skip CSS
bin/magento breeze:module:create vendor/module-breeze-myfeature --nojs   # Skip JavaScript
```

--------------------------------

### Create and Configure a Simple Modal

Source: https://context7.com/breezefront/module-breeze/llms.txt

Instantiate a modal dialog with custom title, content, and buttons. Define actions for button clicks, including closing the modal. Use $.__() for translatable strings.

```javascript
$.modal({
    title: 'Confirm Action',
    content: '<p>Are you sure you want to proceed?</p>',
    buttons: [{
        text: $.__('Cancel'),
        class: 'action-secondary',
        click: function () {
            this.closeModal();
        }
    }, {
        text: $.__('Confirm'),
        class: 'action-primary',
        click: function () {
            // Handle confirmation
            console.log('Confirmed!');
            this.closeModal();
        }
    }]
});
```

--------------------------------

### Initialize and Manage Gallery Component

Source: https://context7.com/breezefront/module-breeze/llms.txt

Configures the gallery widget with image data and video support, and provides methods for navigation, fullscreen control, and dynamic data updates.

```javascript
// Initialize gallery widget
$('.product-gallery').gallery({
    data: [
        {
            img: '/media/catalog/product/image1.jpg',
            full: '/media/catalog/product/image1_full.jpg',
            thumb: '/media/catalog/product/image1_thumb.jpg',
            caption: 'Product Image 1',
            isMain: true
        },
        {
            img: '/media/catalog/product/image2.jpg',
            full: '/media/catalog/product/image2_full.jpg',
            thumb: '/media/catalog/product/image2_thumb.jpg',
            caption: 'Product Image 2',
            videoUrl: 'https://www.youtube.com/watch?v=VIDEO_ID'
        }
    ],
    width: 700,
    height: 700,
    keyboard: true,
    loop: true,
    allowfullscreen: true,
    gallerySwitchStrategy: 'replace'  // 'replace' or 'prepend'
});

// Access gallery instance
var gallery = $('.product-gallery').gallery('instance');

// Navigation methods
gallery.next();
gallery.prev();
gallery.first();
gallery.last();
gallery.activate(2);  // Go to specific index

// Fullscreen methods
gallery.open();     // Open fullscreen
gallery.close();    // Close fullscreen
gallery.opened();   // Check if fullscreen is open

// Video playback
gallery.play();     // Play video if current slide has one

// Update gallery data dynamically
gallery.updateData([
    { img: '/new-image1.jpg', full: '/new-image1_full.jpg', caption: 'New Image' }
]);

// Get current images
var images = gallery.returnCurrentImages();

// Get data for specific or current index
var currentData = gallery.getData();
var specificData = gallery.getData(1);

// Preload full image
gallery.loadFullImage(0).then(function (imageInfo) {
    console.log('Image loaded:', imageInfo.src, imageInfo.width, imageInfo.height);
});

// Gallery events
$('.product-gallery').on('gallery:loaded', function () {
    console.log('Gallery loaded');
});

$('.product-gallery').on('gallery:afterActivate', function () {
    console.log('Slide changed');
});

$('.product-gallery').on('gallery:afterOpen', function () {
    console.log('Fullscreen opened');
});
```

--------------------------------

### Use Config Helper for Module Settings

Source: https://context7.com/breezefront/module-breeze/llms.txt

The Config helper provides methods to check module status and retrieve configuration values. Use it to validate specific paths or check multiple configuration settings simultaneously.

```php
<?php
namespace Vendor\Module\Model;

use Swissup\Breeze\Helper\Config;

class MyFeature
{
    public function __construct(
        private Config $configHelper
    ) {}

    public function checkFeatures(): array
    {
        // Check if a specific module is enabled
        $isModuleEnabled = $this->configHelper->isModuleEnabled('Magento_Catalog');

        // Get a configuration value
        $value = $this->configHelper->getValue('design/breeze/enabled');

        // Check if a configuration path is enabled (truthy)
        $isEnabled = $this->configHelper->isEnabled('design/breeze/debug');

        // Check if ANY of multiple paths are enabled
        $anyEnabled = $this->configHelper->isAnyEnabled([
            'design/breeze/responsive_images',
            'design/breeze/better_compatibility'
        ]);

        // Check if ALL paths are enabled
        $allEnabled = $this->configHelper->isAllEnabled([
            'design/breeze/enabled',
            'design/breeze/responsive_images'
        ]);

        // Check if config value equals expected value
        $isEqual = $this->configHelper->isEqual('design/breeze/enabled:theme');

        return [
            'module_enabled' => $isModuleEnabled,
            'breeze_enabled' => $isEnabled,
            'any_feature_on' => $anyEnabled,
            'all_features_on' => $allEnabled,
            'is_theme_mode' => $isEqual
        ];
    }
}
```

--------------------------------

### Gallery Component API

Source: https://context7.com/breezefront/module-breeze/llms.txt

Manage product image galleries with video support, fullscreen mode, and navigation.

```APIDOC
## Gallery Component

### Description
Manage product image galleries with video support, fullscreen mode, and navigation.

### Initialization
```javascript
$('.product-gallery').gallery({
    data: [
        {
            img: '/media/catalog/product/image1.jpg',
            full: '/media/catalog/product/image1_full.jpg',
            thumb: '/media/catalog/product/image1_thumb.jpg',
            caption: 'Product Image 1',
            isMain: true
        },
        {
            img: '/media/catalog/product/image2.jpg',
            full: '/media/catalog/product/image2_full.jpg',
            thumb: '/media/catalog/product/image2_thumb.jpg',
            caption: 'Product Image 2',
            videoUrl: 'https://www.youtube.com/watch?v=VIDEO_ID'
        }
    ],
    width: 700,
    height: 700,
    keyboard: true,
    loop: true,
    allowfullscreen: true,
    gallerySwitchStrategy: 'replace'  // 'replace' or 'prepend'
});
```

### Accessing Instance
```javascript
var gallery = $('.product-gallery').gallery('instance');
```

### Navigation Methods
- `gallery.next()`: Go to the next slide.
- `gallery.prev()`: Go to the previous slide.
- `gallery.first()`: Go to the first slide.
- `gallery.last()`: Go to the last slide.
- `gallery.activate(index)`: Go to a specific slide by index.

### Fullscreen Methods
- `gallery.open()`: Open fullscreen mode.
- `gallery.close()`: Close fullscreen mode.
- `gallery.opened()`: Returns `true` if fullscreen is open, `false` otherwise.

### Video Playback
- `gallery.play()`: Play video if the current slide contains one.

### Data Management
- `gallery.updateData(newData)`: Update the gallery with new image data.
- `gallery.getData()`: Get data for the current slide.
- `gallery.getData(index)`: Get data for a specific slide by index.

### Image Preloading
- `gallery.loadFullImage(index)`: Preloads the full image for the specified index and returns a Promise.

### Events
- `gallery:loaded`: Triggered when the gallery is fully loaded.
- `gallery:afterActivate`: Triggered after a slide change.
- `gallery:afterOpen`: Triggered after fullscreen mode is opened.

Example Event Listener:
```javascript
$('.product-gallery').on('gallery:loaded', function () {
    console.log('Gallery loaded');
});
```
```

--------------------------------

### Configurable Product Widget API

Source: https://context7.com/breezefront/module-breeze/llms.txt

Handle configurable product option selection with price updates and image switching.

```APIDOC
## Configurable Product Widget

### Description
Handle configurable product option selection with price updates and image switching.

### Initialization
Initialization is typically done automatically. The widget uses the `spConfig` object to configure product options, prices, and images.

```javascript
$('#product_addtocart_form').configurable({
    spConfig: {
        attributes: {
            "93": {
                id: "93",
                code: "color",
                label: "Color",
                options: [
                    { id: "49", label: "Black", products: ["1", "2"] },
                    { id: "50", label: "White", products: ["3", "4"] }
                ]
            }
        },
        images: {
            "1": [{ img: "/black-image.jpg", full: "/black-image-full.jpg" }],
            "3": [{ img: "/white-image.jpg", full: "/white-image-full.jpg" }]
        },
        optionPrices: {
            "1": { finalPrice: { amount: 99.00 }, oldPrice: { amount: 120.00 } },
            "3": { finalPrice: { amount: 109.00 }, oldPrice: { amount: 130.00 } }
        },
        prices: {
            finalPrice: { amount: 99.00 }
        },
        chooseText: "Choose an Option..."
    },
    gallerySwitchStrategy: 'replace',
    mediaGallerySelector: '[data-gallery-role=gallery-placeholder]'
});
```

### Events
- `configurable.initialized`: Triggered when the configurable product widget is initialized.

Example Event Listener:
```javascript
$(document).on('configurable.initialized', function () {
    console.log('Configurable product ready');
});
```

### Pre-selecting Options
Options can be pre-selected using the URL hash. For example, `product.html#93=49&142=167` will automatically select the option with attribute ID `93` and option ID `49`.

### Price Reload
To trigger a price reload after custom changes, use the `_reloadPrice` method on the widget instance:
```javascript
$('#product_addtocart_form').configurable('instance')._reloadPrice();
```
```

--------------------------------

### Generate Responsive Image Attributes

Source: https://context7.com/breezefront/module-breeze/llms.txt

Use the Image helper to generate srcset and sizes attributes for responsive images. Specify the product and image type (e.g., 'category_page_grid').

```php
<?php
namespace Vendor\Module\Block;

use Magento\Catalog\Model\Product;
use Swissup\Breeze\Helper\Image;

class ProductImages
{
    public function __construct(
        private Image $imageHelper
    ) {}

    public function getResponsiveImage(Product $product): array
    {
        // Generate srcset attribute for responsive images
        // Returns comma-separated list of image URLs with width descriptors
        $srcset = $this->imageHelper->getSrcset($product, 'category_page_grid');
        // Returns: "url1.jpg 215w, url2.jpg 430w, url3.jpg 645w"

        // Generate sizes attribute for responsive images
        $sizes = $this->imageHelper->getSizes('category_page_grid');
        // Returns: "(min-width: 1280px) 215px, (min-width: 1024px) 165px, 50vw"

        // Different image types supported
        $productPageSrcset = $this->imageHelper->getSrcset($product, 'product_page_image_medium');
        $thumbnailSrcset = $this->imageHelper->getSrcset($product, 'product_page_image_small');
        $cartSrcset = $this->imageHelper->getSrcset($product, 'cart_page_product_thumbnail');

        return [
            'srcset' => $srcset,
            'sizes' => $sizes
        ];
    }
}
```

--------------------------------

### Define and Initialize JavaScript Widget

Source: https://context7.com/breezefront/module-breeze/llms.txt

Defines a custom jQuery-like widget with options, event binding, and lifecycle methods. Initializes the widget on specific elements with custom options.

```javascript
// Define a custom widget
$.widget('myNamespace.myWidget', {
    component: 'Vendor_Module/js/my-widget',

    options: {
        selector: '.target-element',
        autoInit: true,
        delay: 300
    },

    // Called when widget is created
    create: function () {
        this.cache = {};
        this.bindEvents();

        if (this.options.autoInit) {
            this.init();
        }

        // Trigger custom event
        this._trigger('loaded');
    },

    bindEvents: function () {
        var self = this;

        this.element
            .on('click', this.options.selector, function (event) {
                event.preventDefault();
                self.handleClick($(this));
            })
            .on('keydown', function (event) {
                if (event.key === 'Enter') {
                    self.handleEnter();
                }
            });
    },

    init: function () {
        this.element.addClass('initialized');
        this._trigger('initialized');
    },

    handleClick: function ($target) {
        this._trigger('beforeClick', { target: $target });
        // Handle click logic
        this._trigger('afterClick', { target: $target });
    },

    handleEnter: function () {
        console.log('Enter pressed');
    },

    // Clean up when widget is destroyed
    destroy: function () {
        this.element.removeClass('initialized');
        this._super();
    }
});

// Initialize widget on elements
$('.my-element').myWidget({
    delay: 500,
    autoInit: false
});

// Access widget instance
var instance = $('.my-element').myWidget('instance');
instance.init();
```

--------------------------------

### Initialize and Control an Existing Modal Element

Source: https://context7.com/breezefront/module-breeze/llms.txt

Initialize the modal widget on an existing HTML element, configuring options like type, class, and behavior. Use methods to programmatically open, close, toggle, or update the modal's title. Listen for modal events like 'modalopened' and 'modalclosed'.

```javascript
$('#my-modal-content').modal({
    type: 'popup',           // 'popup' or 'slide'
    title: 'My Modal',
    modalClass: 'my-custom-modal',
    autoOpen: false,
    clickableOverlay: true,
    responsive: false,
    innerScroll: true,
    buttons: [{
        text: $.__('Close'),
        click: function () {
            this.closeModal();
        }
    }]
});
$('#my-modal-content').modal('openModal');
$('#my-modal-content').modal('closeModal');
$('#my-modal-content').modal('toggleModal');
$('#my-modal-content').modal('setTitle', 'New Title');
$('#my-modal-content').on('modalopened', function () {
    console.log('Modal opened');
});
$('#my-modal-content').on('modalclosed', function () {
    console.log('Modal closed');
});
```

--------------------------------

### Breeze Custom Document Events

Source: https://context7.com/breezefront/module-breeze/llms.txt

Listen to various Breeze-specific document events for frontend interactivity. These include `breeze:load`, `breeze:resize-x`, and `customerData:afterInitialize`.

```javascript
// Breeze fully loaded and ready
$(document).on('breeze:load', function () {
    console.log('Breeze is ready');
    initializeCustomComponents();
});

// Window resize (debounced, horizontal only)
$(document).on('breeze:resize-x', function () {
    console.log('Window width changed');
    recalculateLayout();
});

// Customer data initialized
$(document).on('customerData:afterInitialize', function () {
    console.log('Customer data ready');
});

// Trigger customer data reload
$(document).trigger('customerData:reload', {
    sections: ['cart', 'messages'],
    forceNewSectionTimestamp: true
});

// Trigger customer data invalidation
$(document).trigger('customerData:invalidate', {
    sections: ['wishlist']
});

// AJAX complete handler
$(document).on('ajaxComplete', function (event, data) {
    console.log('AJAX completed:', data.settings.url);
    console.log('Response:', data.response.body);
});
```

--------------------------------

### Use Data Helper for State Management

Source: https://context7.com/breezefront/module-breeze/llms.txt

The Data helper manages core state, including URL exclusions and feature-specific settings. It is useful for plugins to determine if Breeze should be active for the current request.

```php
<?php
namespace Vendor\Module\Plugin;

use Swissup\Breeze\Helper\Data;

class MyPlugin
{
    public function __construct(
        private Data $breezeHelper
    ) {}

    public function beforeExecute(): void
    {
        // Check if Breeze is enabled for current request
        if (!$this->breezeHelper->isEnabled()) {
            return;
        }

        // Check if responsive images feature is enabled
        $responsiveImages = $this->breezeHelper->isResponsiveImagesEnabled();

        // Check if better compatibility mode is enabled
        $betterCompat = $this->breezeHelper->isBetterCompatibilityEnabled();

        // Get excluded URLs (Breeze will be disabled for these)
        $excludedUrls = $this->breezeHelper->getExcludedUrls();
        // Returns: ['/redirect/', '/multishipping/', ...]

        // Get exception URLs (allowed even if parent path is excluded)
        $exceptions = $this->breezeHelper->getExcludeExceptionUrls();
        // Returns: ['checkout/cart/configure', 'customer/section/load', ...]

        // Get configuration value directly
        $debugMode = $this->breezeHelper->getConfig('design/breeze/debug');

        // Get theme-specific configuration
        $themeEnabled = $this->breezeHelper->getThemeConfig('enabled', 'Swissup_Breeze');
    }
}
```

--------------------------------

### Registering JavaScript Components in Layout XML

Source: https://context7.com/breezefront/module-breeze/llms.txt

Use this XML structure to register various JavaScript components in Breeze bundles. Configure autoload, dependencies, and lazy loading options.

```xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="breeze.js">
            <arguments>
                <argument name="bundles" xsi:type="array">
                    <!-- Default bundle - loaded on all pages -->
                    <item name="default" xsi:type="array">
                        <item name="items" xsi:type="array">
                            <!-- Simple component registration -->
                            <item name="Vendor_Module/js/component" xsi:type="array">
                                <item name="path" xsi:type="string">Vendor_Module/js/component</item>
                            </item>

                            <!-- Component with autoload -->
                            <item name="Vendor_Module/js/init" xsi:type="array">
                                <item name="path" xsi:type="string">Vendor_Module/js/init</item>
                                <item name="autoload" xsi:type="boolean">true</item>
                            </item>

                            <!-- Component with dependencies -->
                            <item name="Vendor_Module/js/feature" xsi:type="array">
                                <item name="path" xsi:type="string">Vendor_Module/js/feature</item>
                                <item name="import" xsi:type="array">
                                    <item name="0" xsi:type="string">jquery</item>
                                    <item name="1" xsi:type="string">underscore</item>
                                </item>
                            </item>

                            <!-- Component with lazy loading -->
                            <item name="Vendor_Module/js/heavy-component" xsi:type="array">
                                <item name="path" xsi:type="string">Vendor_Module/js/heavy-component</item>
                                <item name="load" xsi:type="array">
                                    <item name="onInteraction" xsi:type="boolean">true</item>
                                </item>
                            </item>

                            <!-- Component loaded on specific event -->
                            <item name="Vendor_Module/js/modal-handler" xsi:type="array">
                                <item name="path" xsi:type="string">Vendor_Module/js/modal-handler</item>
                                <item name="load" xsi:type="array">
                                    <item name="onEvent" xsi:type="array">
                                        <item name="0" xsi:type="string">modal:opened</item>
                                    </item>
                                </item>
                            </item>

                            <!-- Component loaded when element becomes visible -->
                            <item name="Vendor_Module/js/lazy-gallery" xsi:type="array">
                                <item name="path" xsi:type="string">Vendor_Module/js/lazy-gallery</item>
                                <item name="load" xsi:type="array">
                                    <item name="onReveal" xsi:type="array">
                                        <item name="0" xsi:type="string">.gallery-container</item>
                                    </item>
                                </item>
                            </item>

                            <!-- Export component under multiple names -->
                            <item name="Vendor_Module/js/utils" xsi:type="array">
                                <item name="path" xsi:type="string">Vendor_Module/js/utils</item>
                                <item name="export" xsi:type="array">
                                    <item name="0" xsi:type="string">vendorUtils</item>
                                    <item name="1" xsi:type="string">Vendor_Module/js/helper</item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>
```

--------------------------------

### Custom HTML Output Filter

Source: https://context7.com/breezefront/module-breeze/llms.txt

Implement a custom DOM filter to optimize HTML output by adding attributes like 'loading' and 'decoding' to images, or custom data attributes to buttons. Register this filter in `di.xml`.

```php
<?php
namespace Vendor\Module\Model\Filter\Dom;

use Swissup\Breeze\Model\Filter\AbstractFilter;

class CustomFilter extends AbstractFilter
{
    /**
     * Process DOM document before output
     *
     * @param \DOMDocument $document
     * @return void
     */
    public function process(\DOMDocument $document): void
    {
        $xpath = new \DOMXPath($document);

        // Find and modify elements
        $images = $xpath->query('//img[not(@loading)]');
        foreach ($images as $image) {
            $image->setAttribute('loading', 'lazy');
            $image->setAttribute('decoding', 'async');
        }

        // Add custom data attributes
        $buttons = $xpath->query('//button[@type="submit"]');
        foreach ($buttons as $button) {
            $button->setAttribute('data-breeze-submit', 'true');
        }
    }
}
```

```xml
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Swissup\Breeze\Model\Filter">
        <arguments>
            <argument name="domFilters" xsi:type="array">
                <item name="customFilter" xsi:type="object">Vendor\Module\Model\Filter\Dom\CustomFilter</item>
            </argument>
        </arguments>
    </type>
</config>
```

--------------------------------

### Customer Data API

Source: https://context7.com/breezefront/module-breeze/llms.txt

Breeze provides a customer data management system compatible with Magento's customer-data.js. This API allows for retrieving, setting, reloading, and invalidating customer data sections.

```APIDOC
## Customer Data API

### Description
Manages customer data sections, providing an interface similar to Magento's `customer-data.js`.

### Methods

#### Get Customer Data Section
Retrieves an observable for a specific customer data section.

```javascript
var sectionData = $.customerData.get('sectionName');
```

#### Subscribe to Changes
Subscribes a callback function to be executed when a data section changes.

```javascript
sectionData.subscribe(function (data) {
    console.log('Section updated:', data);
});
```

#### Access Current Value
Gets the current value of an observable data section.

```javascript
var currentValue = sectionData();
```

#### Set Customer Data Section
Sets the value for a specific customer data section.

```javascript
$.customerData.set('sectionName', { ... data ... });
```

#### Reload Sections
Reloads specified customer data sections from the server. If an empty array is provided for sections and `true` is passed as the second argument, all sections are reloaded.

```javascript
// Reload specific sections
$.customerData.reload(['section1', 'section2']);

// Reload all sections
$.customerData.reload([], true);
```

#### Invalidate Sections
Marks specified sections as invalid, triggering a reload on the next access or explicit reload.

```javascript
$.customerData.invalidate(['section1', 'section2']);
```

#### Wait for Initialization
Returns a promise that resolves when the initial customer data has been loaded.

```javascript
$.customerData.getInitCustomerData().then(function () {
    console.log('Customer data is ready');
});
```

### Events

#### `customer-data-reload`
Triggered after customer data sections have been reloaded.

```javascript
$(document).on('customer-data-reload', function (event, data) {
    console.log('Sections reloaded:', data.sections);
    console.log('Response:', data.response);
});
```

#### `customer-data-invalidate`
Triggered when customer data sections are invalidated.

```javascript
$(document).on('customer-data-invalidate', function (event, data) {
    console.log('Sections invalidated:', data.sections);
});
```
```

--------------------------------

### Modal Component

Source: https://context7.com/breezefront/module-breeze/llms.txt

Provides functionality to create, manage, and interact with modal dialogs using a built-in jQuery widget.

```APIDOC
## Modal Component

### Description
Create and manage modal dialogs using the built-in modal widget.

### Methods

#### Create Simple Modal
Initializes a modal with basic configuration.

```javascript
$.modal({
    title: 'Modal Title',
    content: '<p>Modal content here.</p>',
    buttons: [
        {
            text: 'Cancel',
            class: 'action-secondary',
            click: function () { this.closeModal(); }
        },
        {
            text: 'Confirm',
            class: 'action-primary',
            click: function () { /* handle confirm */ this.closeModal(); }
        }
    ]
});
```

#### Initialize on Existing Element
Applies the modal widget to an existing HTML element.

```javascript
$('#elementId').modal({
    type: 'popup',           // 'popup' or 'slide'
    title: 'My Modal',
    modalClass: 'my-custom-modal',
    autoOpen: false,
    clickableOverlay: true,
    responsive: false,
    innerScroll: true,
    buttons: [
        {
            text: 'Close',
            click: function () { this.closeModal(); }
        }
    ]
});
```

#### Programmatic Control
Methods to control the modal's state.

```javascript
// Open modal
$('#elementId').modal('openModal');

// Close modal
$('#elementId').modal('closeModal');

// Toggle modal
$('#elementId').modal('toggleModal');

// Update title
$('#elementId').modal('setTitle', 'New Title');
```

### Events

#### `modalopened`
Triggered when the modal is opened.

```javascript
$('#elementId').on('modalopened', function () {
    console.log('Modal opened');
});
```

#### `modalclosed`
Triggered when the modal is closed.

```javascript
$('#elementId').on('modalclosed', function () {
    console.log('Modal closed');
});
```

### Advanced Usage

#### Modal with Trigger Button
Configures a modal to be opened by a specific trigger element.

```javascript
$('.modal-content').modal({
    trigger: '.open-modal-btn',
    title: 'Triggered Modal'
});
```
```

--------------------------------

### Scrollbar Management with Breeze

Source: https://context7.com/breezefront/module-breeze/llms.txt

Control body scrollbar visibility using jQuery plugin. Use `hide()` to prevent scrolling and `reset()` to restore it. Note that multiple `hide()` calls require corresponding `reset()` calls to fully restore scrollbar functionality.

```javascript
// Hide scrollbar (body becomes fixed, prevents scroll)
$.breeze.scrollbar.hide();

// Reset scrollbar (restores scroll position)
$.breeze.scrollbar.reset();

// Counter-based - multiple hides require multiple resets
$.breeze.scrollbar.hide();  // counter = 1
$.breeze.scrollbar.hide();  // counter = 2
$.breeze.scrollbar.reset(); // counter = 1, still hidden
$.breeze.scrollbar.reset(); // counter = 0, scrollbar restored

// Example: Custom overlay implementation
function openOverlay() {
    $.breeze.scrollbar.hide();
    $('.my-overlay').addClass('active');
}

function closeOverlay() {
    $('.my-overlay').removeClass('active');
    $.breeze.scrollbar.reset();
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.