@ionic/core 8.8.19 → 8.8.20-dev.11788449221.155f9f1e

package/dist/esm/ion-gallery.entry.js

@@ -0,0 +1,606 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { r as registerInstance, f as printIonWarning, h, d as Host, g as getElement } from './index-C0EQceqV.js';
+import { r as raf } from './helpers-ChPZH7zh.js';
+import { c as getIonTheme } from './ionic-global-BJDU78B6.js';
+import './focus-visible-vXpMhGrs.js';
+import './dir-o8OKV5aD.js';
+
+/**
+ * Helpers for validating user-supplied CSS values using regular expressions, without
+ * relying on browser CSS APIs.
+ */
+// Matches `<length>` (`<number>` + unit identifier) or `<percentage>` (`<number>%`).
+const LENGTH_PERCENTAGE_PATTERN = /^[-+]?(?:\d+\.?\d*|\.\d+)(?:%|[a-z]+)$/i;
+// Matches simple `calc` / `min` / `max` / `clamp(...)` functions.
+const MATH_FUNCTION_PATTERN = /^(calc|min|max|clamp)\s*\(.+\)$/i;
+// Matches a `var(--name)` reference with an optional fallback, e.g.
+// `var(--my-gap)` or `var(--my-gap, 16px)`.
+const VAR_FUNCTION_PATTERN = /^var\(\s*--[^\s,)]+\s*(?:,[\s\S]*)?\)$/i;
+/**
+ * Returns whether `value` matches the [length-percentage](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/length-percentage)
+ * syntax. Accepts `<length>` (`<number>` + unit identifier) or `<percentage>` (`<number>%`).
+ * Also supports simple `calc` / `min` / `max` / `clamp(...)` functions.
+ *
+ * @param value String value to validate.
+ */
+function isValidLengthPercentage(value) {
+    const v = value.trim();
+    if (!v) {
+        return false;
+    }
+    return MATH_FUNCTION_PATTERN.test(v) || LENGTH_PERCENTAGE_PATTERN.test(v);
+}
+/**
+ * Returns whether `value` is a single [`var()`](https://developer.mozilla.org/en-US/docs/Web/CSS/var)
+ * reference, e.g. `var(--my-token)` or `var(--my-token, 16px)`. The referenced
+ * custom property is resolved by the browser, so the resolved value is not
+ * validated here.
+ *
+ * @param value String value to validate.
+ */
+function isCssVariable(value) {
+    return VAR_FUNCTION_PATTERN.test(value.trim());
+}
+
+const DEFAULT_COLUMNS = {
+    xs: 2,
+    sm: 3,
+    md: 4,
+    lg: 6,
+    xl: 8,
+    xxl: 10,
+};
+const DEFAULT_GAP = '16px';
+
+const galleryCss = () => `:host{display:grid;grid-template-columns:repeat(var(--internal-gallery-columns, 2), minmax(0, 1fr))}:host(.gallery-layout-uniform){gap:var(--internal-gallery-gap, 16px)}:host(.gallery-layout-masonry){-ms-flex-align:start;align-items:start;-webkit-column-gap:var(--internal-gallery-gap, 16px);-moz-column-gap:var(--internal-gallery-gap, 16px);column-gap:var(--internal-gallery-gap, 16px);row-gap:0;grid-auto-rows:1px}`;
+
+// TODO(FW-7285): Replace with global breakpoints
+const BREAKPOINTS = {
+    xs: 0,
+    sm: 576,
+    md: 768,
+    lg: 992,
+    xl: 1200,
+    xxl: 1400,
+};
+const BREAKPOINT_ORDER = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
+/**
+ * The tag of the component used to wrap each gallery item.
+ */
+const GALLERY_ITEM_SELECTOR = 'ion-gallery-item';
+const Gallery = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        // Keep track of whether we've warned about invalid columns, invalid gap,
+        // and unused order properties to avoid duplicate warnings on screen resize.
+        this.hasWarnedInvalidColumns = false;
+        this.hasWarnedInvalidGap = false;
+        this.hasWarnedUnusedOrder = false;
+        this.hasWarnedInvalidItems = false;
+        /**
+         * The visual layout of the gallery. When `uniform`, rows take up the height
+         * of the tallest item and are spaced evenly across the gallery. Additionally,
+         * items will have an aspect ratio of 1/1, forcing them to be square unless a
+         * height is explicitly set. When `masonry`, items will be positioned under each
+         * other with only the specified gap between them.
+         */
+        this.layout = 'uniform';
+        /**
+         * The number of columns to display. Can be set as a number or an object of
+         * breakpoint values (e.g. `{ xs: 2, sm: 3, md: 4 }`).
+         */
+        this.columns = DEFAULT_COLUMNS;
+        /**
+         * The space between gallery items. Accepts valid CSS [length-percentage](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/length-percentage)
+         * values like `16px`, `1rem`, `20%`, math functions like `calc(10px + 20%)`,
+         * CSS variables like `var(--app-gallery-gap)`, or numbers (treated as pixel
+         * values). Can also be set as a breakpoint map
+         * (e.g. `{ xs: '8px', sm: '1rem', md: '24px' }`). Does not accept
+         * space-separated values or CSS keyword values like `inherit`, `auto`, etc.
+         */
+        this.gap = DEFAULT_GAP;
+        /**
+         * Listen for the slotchange event on the slot. When the gallery's items are
+         * added or removed, re-collapse wrappers, re-observe items for size changes,
+         * and recompute the masonry grid.
+         */
+        this.onSlotChange = () => {
+            this.collapseWrappers();
+            this.observeResizes();
+            this.scheduleMasonryResize();
+        };
+        /**
+         * Measure the host and children, then compute masonry placement.
+         */
+        this.resizeMasonryGrid = () => {
+            this.masonryRaf = undefined;
+            if (this.layout !== 'masonry') {
+                this.clearMasonryStyles();
+                return;
+            }
+            const width = this.el.getBoundingClientRect().width;
+            const columns = this.getColumnsForWidth(width);
+            // Skip masonry placement when width/columns does not resolve
+            // to a valid breakpoint column count.
+            if (columns === undefined) {
+                return;
+            }
+            const styles = getComputedStyle(this.el);
+            const rowHeight = parseFloat(styles.getPropertyValue('grid-auto-rows')) || 0;
+            const rowGap = parseFloat(styles.getPropertyValue('row-gap')) || parseFloat(styles.getPropertyValue('gap')) || 0;
+            const items = this.getItems();
+            this.layoutMasonry(items, rowHeight, rowGap, columns);
+        };
+    }
+    onColumnsOrGapChanged() {
+        this.syncResponsiveLayout();
+    }
+    onLayoutOrOrderChanged() {
+        this.syncResponsiveLayout();
+        this.syncItemLayout();
+        // Wait until the next animation frame to warn about unused order
+        // to avoid erroneous warnings when the layout and order are updated
+        // in the same frame.
+        raf(() => {
+            this.warnUnusedOrder();
+        });
+    }
+    /**
+     * Sync the current layout with each item when the gallery's `layout`
+     * changes.
+     */
+    syncItemLayout() {
+        this.getItems().forEach((item) => {
+            item.syncGalleryLayout();
+        });
+    }
+    componentDidLoad() {
+        this.collapseWrappers();
+        this.updateResponsiveStyles(true);
+        this.resizeObserver = new ResizeObserver(() => {
+            this.updateResponsiveStyles();
+            this.scheduleMasonryResize();
+        });
+        this.observeResizes();
+        this.scheduleMasonryResize();
+        this.warnUnusedOrder();
+    }
+    disconnectedCallback() {
+        var _a;
+        if (this.masonryRaf !== undefined) {
+            cancelAnimationFrame(this.masonryRaf);
+            this.masonryRaf = undefined;
+        }
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.resizeObserver = undefined;
+    }
+    /**
+     * Observe the host and each item for size changes. Items are observed in
+     * addition to the host so masonry placement is recomputed when an item's
+     * rendered height changes — most importantly when a dynamically added
+     * `ion-gallery-item` finishes hydrating, which (unlike an `<img>`) emits no
+     * `load` event and does not change the host's measured size while collapsed.
+     */
+    observeResizes() {
+        const observer = this.resizeObserver;
+        if (observer === undefined) {
+            return;
+        }
+        observer.disconnect();
+        observer.observe(this.el);
+        this.getItems().forEach((item) => observer.observe(item));
+    }
+    /**
+     * Listen for the load event on child elements.
+     * When the layout is `masonry`, this listener is used to schedule a resize
+     * of the masonry grid when the child elements load. This is useful for when
+     * images take time to load.
+     */
+    onChildLoad(ev) {
+        if (this.layout !== 'masonry') {
+            return;
+        }
+        const target = ev.target;
+        if (target instanceof Node && this.el.contains(target)) {
+            this.scheduleMasonryResize();
+        }
+    }
+    /**
+     * Recompute the gallery column and gap variables and masonry placement when
+     * columns, gap, layout, or order change.
+     */
+    syncResponsiveLayout() {
+        this.updateResponsiveStyles(true);
+        this.scheduleMasonryResize();
+    }
+    /**
+     * Batch masonry measurements to a single animation frame.
+     * This avoids repeated sync layouts during rapid resize/load/slot changes.
+     */
+    scheduleMasonryResize() {
+        if (this.layout !== 'masonry') {
+            this.clearMasonryStyles();
+            return;
+        }
+        if (this.masonryRaf !== undefined) {
+            cancelAnimationFrame(this.masonryRaf);
+        }
+        this.masonryRaf = requestAnimationFrame(this.resizeMasonryGrid);
+    }
+    /**
+     * Normalize a single column value (`columns` as a number, string, or one entry from
+     * a `columns` breakpoint map) to a positive integer. Returns `undefined` when
+     * the input cannot be interpreted as a finite number.
+     */
+    sanitizeColumns(columns) {
+        if (columns === undefined) {
+            return undefined;
+        }
+        const numericColumns = typeof columns === 'number' ? columns : Number(columns);
+        if (!Number.isFinite(numericColumns) || !Number.isInteger(numericColumns) || numericColumns <= 0) {
+            return undefined;
+        }
+        return numericColumns;
+    }
+    /**
+     * Normalize a single gap value (`gap` as a number, a string such as a CSS
+     * length-percentage or `var()` reference, or one entry from a `gap`
+     * breakpoint map) to a CSS length string. Returns `undefined` when the
+     * input cannot be interpreted as a valid CSS length or `var()` reference.
+     */
+    sanitizeGap(gap) {
+        if (gap === undefined) {
+            return undefined;
+        }
+        const normalizedGap = typeof gap === 'string' ? gap.trim() : gap;
+        if (normalizedGap === '' || typeof normalizedGap === 'object') {
+            return undefined;
+        }
+        const numericGap = Number(normalizedGap);
+        if (Number.isFinite(numericGap)) {
+            return numericGap < 0 ? undefined : `${numericGap}px`;
+        }
+        if (typeof normalizedGap !== 'string') {
+            return undefined;
+        }
+        if (isCssVariable(normalizedGap)) {
+            return normalizedGap;
+        }
+        const isValidCssLength = isValidLengthPercentage(normalizedGap);
+        return isValidCssLength ? normalizedGap : undefined;
+    }
+    /**
+     * Check if the value is a breakpoint map object.
+     */
+    isBreakpointMap(value) {
+        return typeof value === 'object' && value !== null && !Array.isArray(value);
+    }
+    /**
+     * Check if the breakpoint map has any invalid values for the provided
+     * sanitizer. A breakpoint map is invalid when there are no valid breakpoint
+     * keys set (e.g. `{}` or `{ colums: 3 }`), or when a value under a
+     * breakpoint key fails the sanitizer (e.g. `{ xs: -3 }`, `{ sm: 'foo' }`).
+     */
+    hasInvalidBreakpointMap(breakpointMap, sanitizeValue) {
+        let hasBreakpointEntry = false;
+        for (const breakpoint of BREAKPOINT_ORDER) {
+            const value = breakpointMap[breakpoint];
+            if (value !== undefined) {
+                hasBreakpointEntry = true;
+                if (sanitizeValue(value) === undefined) {
+                    return true;
+                }
+            }
+        }
+        return !hasBreakpointEntry;
+    }
+    /**
+     * Resolve a responsive value from a breakpoint map.
+     * Uses a breakpoint-specific default when custom values are missing/invalid.
+     */
+    resolveFromBreakpoints(width, breakpointMap, sanitizeProvided, getSanitizedDefault) {
+        let resolvedValue;
+        for (const bp of BREAKPOINT_ORDER) {
+            const providedValue = breakpointMap[bp];
+            const sanitizedProvided = sanitizeProvided(providedValue);
+            const sanitizedDefault = getSanitizedDefault(bp);
+            const resolved = providedValue === undefined || sanitizedProvided === undefined ? sanitizedDefault : sanitizedProvided;
+            if (resolved !== undefined && width >= BREAKPOINTS[bp]) {
+                resolvedValue = resolved;
+            }
+        }
+        return resolvedValue;
+    }
+    /**
+     * Get the columns from a responsive breakpoint map.
+     * Returns the columns for the last matching breakpoint.
+     */
+    getColumnsFromBreakpointMap(width, breakpointMap) {
+        return this.resolveFromBreakpoints(width, breakpointMap, (value) => this.sanitizeColumns(value), (bp) => this.sanitizeColumns(DEFAULT_COLUMNS[bp]));
+    }
+    /**
+     * Get the gap from a responsive breakpoint map.
+     * Returns the gap for the last matching breakpoint.
+     */
+    getGapFromBreakpointMap(width, breakpointMap) {
+        return this.resolveFromBreakpoints(width, breakpointMap, (value) => this.sanitizeGap(value), () => this.sanitizeGap(DEFAULT_GAP));
+    }
+    /**
+     * Warn about an invalid columns value when it is set to a negative number,
+     * an empty breakpoint map, a map with no supported breakpoint keys,
+     * or a map with invalid breakpoint values.
+     */
+    warnInvalidColumns(columns) {
+        if (this.hasWarnedInvalidColumns) {
+            return;
+        }
+        printIonWarning(`[ion-gallery] - Invalid "columns" value (${JSON.stringify(columns)}). Expected a positive integer or breakpoint map object (e.g. { xs: 2, md: 4 }). Falling back to default responsive columns.`, this.el);
+        this.hasWarnedInvalidColumns = true;
+    }
+    /**
+     * Warn about an invalid gap value when it is set to a negative number,
+     * an empty breakpoint map, a map with no supported breakpoint keys,
+     * or a map with invalid breakpoint values.
+     */
+    warnInvalidGap(gap) {
+        if (this.hasWarnedInvalidGap) {
+            return;
+        }
+        printIonWarning(`[ion-gallery] - Invalid "gap" value (${JSON.stringify(gap)}). Expected a non-negative number, CSS length string, CSS variable (e.g. var(--app-gap)), or breakpoint map object (e.g. { xs: 8, md: "1rem" }).`, this.el);
+        this.hasWarnedInvalidGap = true;
+    }
+    /**
+     * Warn when `order` is explicitly set while layout is `uniform`.
+     */
+    warnUnusedOrder() {
+        const { layout } = this;
+        const order = this.order == null ? undefined : this.order;
+        if (this.hasWarnedUnusedOrder || layout !== 'uniform' || order === undefined) {
+            return;
+        }
+        printIonWarning(`[ion-gallery] - "order" has no effect when "layout" is "uniform". Set "layout" to "masonry" for "order" to apply.`, this.el);
+        this.hasWarnedUnusedOrder = true;
+    }
+    /**
+     * Resolve the active columns value for the current width. Falls back to
+     * the default responsive columns when the provided prop is invalid.
+     */
+    getColumnsForWidth(width) {
+        const { columns } = this;
+        const isBreakpointColumns = this.isBreakpointMap(columns);
+        const hasInvalidBreakpointColumns = isBreakpointColumns && this.hasInvalidBreakpointMap(columns, (value) => this.sanitizeColumns(value));
+        const sanitizedColumns = isBreakpointColumns
+            ? this.getColumnsFromBreakpointMap(width, columns)
+            : this.sanitizeColumns(columns);
+        if (hasInvalidBreakpointColumns || (!isBreakpointColumns && sanitizedColumns === undefined)) {
+            this.warnInvalidColumns(columns);
+        }
+        if (sanitizedColumns !== undefined) {
+            return sanitizedColumns;
+        }
+        return this.getColumnsFromBreakpointMap(width, DEFAULT_COLUMNS);
+    }
+    /**
+     * Resolve the active gap value for the current width.
+     */
+    getGapForWidth(width) {
+        const { gap } = this;
+        const providedGap = gap !== null && gap !== void 0 ? gap : DEFAULT_GAP;
+        const isBreakpointGap = this.isBreakpointMap(providedGap);
+        const hasInvalidBreakpointGap = isBreakpointGap && this.hasInvalidBreakpointMap(providedGap, (value) => this.sanitizeGap(value));
+        const sanitizedGap = isBreakpointGap
+            ? this.getGapFromBreakpointMap(width, providedGap)
+            : this.sanitizeGap(providedGap);
+        if (hasInvalidBreakpointGap || (!isBreakpointGap && sanitizedGap === undefined)) {
+            this.warnInvalidGap(providedGap);
+        }
+        if (sanitizedGap !== undefined) {
+            return sanitizedGap;
+        }
+        return this.sanitizeGap(DEFAULT_GAP);
+    }
+    /**
+     * Update the responsive styles for the gallery. This is used to update
+     * the columns and gap when the component width changes.
+     */
+    updateResponsiveStyles(force = false) {
+        const width = this.el.getBoundingClientRect().width;
+        // Only update the columns if the component width has changed by more than
+        // 1px or if the force flag is true. This prevents unnecessary re-renders
+        // when the component width has not changed.
+        if (!width || (!force && this.lastWidth !== undefined && Math.abs(this.lastWidth - width) < 1)) {
+            return;
+        }
+        this.lastWidth = width;
+        const columns = this.getColumnsForWidth(width);
+        this.el.style.setProperty('--internal-gallery-columns', `${columns}`);
+        const gap = this.getGapForWidth(width);
+        this.el.style.setProperty('--internal-gallery-gap', `${gap}`);
+    }
+    /**
+     * Return the `ion-gallery-item` elements to place in the grid. Each item is a
+     * direct grid cell, whether a direct child or nested inside a pass-through
+     * wrapper (e.g. a layout `<div>`). Items belonging to a nested `ion-gallery`
+     * are excluded.
+     */
+    getItems() {
+        return Array.from(this.el.querySelectorAll(GALLERY_ITEM_SELECTOR)).filter((item) => item.closest('ion-gallery') === this.el);
+    }
+    /**
+     * Collapse each pass-through wrapper's box with `display: contents` so its
+     * items participate in the gallery grid. Restore the box of a wrapper that
+     * no longer contains items, and warn about children that contain none.
+     */
+    collapseWrappers() {
+        const items = this.getItems();
+        Array.from(this.el.children).forEach((child) => {
+            if (child.matches(GALLERY_ITEM_SELECTOR)) {
+                return;
+            }
+            if (!items.some((item) => child.contains(item))) {
+                // If the wrapper was previously collapsed with `display: contents`
+                // but now contains no items, clear the display style.
+                if (child.style.display === 'contents') {
+                    child.style.display = '';
+                }
+                this.warnInvalidItems();
+                return;
+            }
+            // Collapse the wrapper's box so its items sit directly in the grid.
+            child.style.display = 'contents';
+        });
+    }
+    /**
+     * Warn when the gallery has content that is not wrapped in an
+     * `ion-gallery-item` component. Items belonging to a nested
+     * gallery are considered invalid content for the parent gallery.
+     */
+    warnInvalidItems() {
+        if (this.hasWarnedInvalidItems) {
+            return;
+        }
+        printIonWarning(`[ion-gallery] - Gallery items must be wrapped in "ion-gallery-item" components. Direct children that are not "ion-gallery-item" (and do not contain one) are ignored.`, this.el);
+        this.hasWarnedInvalidItems = true;
+    }
+    /**
+     * Clear the item styles for the given item element.
+     * This is used to switch between uniform and masonry layouts.
+     */
+    clearItemStyles(itemEl) {
+        itemEl.style.gridRowStart = '';
+        itemEl.style.gridRowEnd = '';
+        itemEl.style.gridColumn = '';
+        itemEl.style.marginBottom = '';
+    }
+    /**
+     * Clear placement styles for all items when leaving masonry mode.
+     */
+    clearMasonryStyles() {
+        this.getItems().forEach((itemEl) => this.clearItemStyles(itemEl));
+    }
+    /**
+     * Whether the item contains any images that have not finished loading.
+     * Used to defer masonry placement until the rendered height is final.
+     */
+    hasUnloadedImages(itemEl) {
+        return Array.from(itemEl.querySelectorAll('img')).some((img) => !img.complete || img.naturalHeight === 0);
+    }
+    /**
+     * Convert a rendered item height to the number of grid rows it should span.
+     * Returns undefined when the item has images that are not fully loaded yet.
+     */
+    calculateRowSpan(itemEl, rowHeight, rowGap) {
+        if (this.hasUnloadedImages(itemEl)) {
+            return undefined;
+        }
+        const height = itemEl.getBoundingClientRect().height;
+        const itemStyles = getComputedStyle(itemEl);
+        const marginBottom = parseFloat(itemStyles.getPropertyValue('margin-bottom')) || 0;
+        const denominator = rowHeight + rowGap;
+        if (!denominator || !Number.isFinite(denominator)) {
+            return 1;
+        }
+        return Math.ceil((height + marginBottom + rowGap) / denominator) || 1;
+    }
+    /**
+     * Get the index of the column to position the item in.
+     * When the order is `best-fit`, the column with the shortest height is
+     * returned. Otherwise, items are placed in the column that matches their
+     * natural DOM order.
+     */
+    getColumnIndex(index, columnHeights, columns) {
+        const order = this.getOrder();
+        if (order === 'best-fit') {
+            let columnIndex = 0;
+            for (let i = 1; i < columns; i++) {
+                if (columnHeights[i] < columnHeights[columnIndex]) {
+                    columnIndex = i;
+                }
+            }
+            return columnIndex;
+        }
+        return index % columns;
+    }
+    /**
+     * Apply masonry placement by assigning each item a column and row span.
+     */
+    layoutMasonry(items, rowHeight, rowGap, columns) {
+        const columnHeights = new Array(columns).fill(0);
+        const lastItemsByColumn = new Array(columns).fill(undefined);
+        items.forEach((itemEl, i) => {
+            itemEl.style.marginBottom = '';
+            const span = this.calculateRowSpan(itemEl, rowHeight, rowGap);
+            if (span === undefined) {
+                this.clearItemStyles(itemEl);
+                return;
+            }
+            const columnIndex = this.getColumnIndex(i, columnHeights, columns);
+            const start = columnHeights[columnIndex] + 1;
+            itemEl.style.gridColumn = `${columnIndex + 1}`;
+            itemEl.style.gridRowStart = `${start}`;
+            itemEl.style.gridRowEnd = `span ${span}`;
+            columnHeights[columnIndex] = start + span - 1;
+            lastItemsByColumn[columnIndex] = itemEl;
+        });
+        // Remove trailing space from the final item in each column while preserving
+        // spacing between all non-final items.
+        lastItemsByColumn.forEach((itemEl) => {
+            if (itemEl === undefined) {
+                return;
+            }
+            itemEl.style.marginBottom = '0px';
+            const spanWithoutTrailingGap = this.calculateRowSpan(itemEl, rowHeight, rowGap);
+            if (spanWithoutTrailingGap === undefined) {
+                this.clearItemStyles(itemEl);
+                return;
+            }
+            itemEl.style.gridRowEnd = `span ${spanWithoutTrailingGap}`;
+        });
+    }
+    /**
+     * Resolved order for layout and CSS. Order should be `undefined` for
+     * the uniform layout. When order is not set, it should be `"sequential"`
+     * for the masonry layout.
+     */
+    getOrder() {
+        const { layout } = this;
+        const order = this.order == null ? undefined : this.order;
+        if (layout === 'uniform') {
+            return undefined;
+        }
+        if (layout === 'masonry' && order === undefined) {
+            return 'sequential';
+        }
+        return order;
+    }
+    render() {
+        const { layout } = this;
+        const order = this.getOrder();
+        const theme = getIonTheme(this);
+        return (h(Host, { key: '4a0a9cdd0da106ac0bd2c188a4c6612edab43b33', class: {
+                [theme]: true,
+                [`gallery-layout-${layout}`]: true,
+                [`gallery-order-${order}`]: layout === 'masonry' && order !== undefined,
+            } }, h("slot", { key: 'dc6414ce9762ad7daaedc1583db35e0613a76e11', onSlotchange: this.onSlotChange })));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "columns": [{
+                "onColumnsOrGapChanged": 0
+            }],
+        "gap": [{
+                "onColumnsOrGapChanged": 0
+            }],
+        "layout": [{
+                "onLayoutOrOrderChanged": 0
+            }],
+        "order": [{
+                "onLayoutOrOrderChanged": 0
+            }]
+    }; }
+};
+Gallery.style = galleryCss();
+
+export { Gallery as ion_gallery };

package/dist/esm/ion-img.entry.js

@@ -1,9 +1,10 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { r as registerInstance, c as createEvent, h, d as Host, g as getElement } from './index-tcQvqkiX.js';
-import { b as inheritAttributes } from './helpers-DkCLSLI9.js';
-import { b as getIonMode } from './ionic-global-Cp_eT4sZ.js';
+import { r as registerInstance, c as createEvent, h, d as Host, g as getElement } from './index-C0EQceqV.js';
+import { b as inheritAttributes } from './helpers-ChPZH7zh.js';
+import { c as getIonTheme } from './ionic-global-BJDU78B6.js';
+import './focus-visible-vXpMhGrs.js';
 import './dir-o8OKV5aD.js';
 
 const imgCss = () => `:host{display:block;-o-object-fit:contain;object-fit:contain}img{display:block;width:100%;height:100%;-o-object-fit:inherit;object-fit:inherit;-o-object-position:inherit;object-position:inherit}`;
@@ -81,7 +82,10 @@ const Img = class {
     render() {
         const { loadSrc, alt, onLoad, loadError, inheritedAttributes } = this;
         const { draggable } = inheritedAttributes;
-        return (h(Host, { key: '9bfaa659b0680189fd29f3acb2fdce7f70be6060', class: getIonMode(this) }, h("img", { key: 'd484beae0d5cbe0406958bfad40cdd6c05625340', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
+        const theme = getIonTheme(this);
+        return (h(Host, { key: 'ba84621055567b2a35387709d9d89b97ad853274', class: {
+                [theme]: true,
+            } }, h("img", { key: '9d6118bbf69e2cccbb0603802c03b9a0d101e2c3', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {