@ionic/core 8.8.9-dev.11780493937.17fe092d → 8.8.9-dev.11780683233.1c5e9d9b

package/dist/collection/components/footer/footer.js

@@ -6,15 +6,13 @@ import { findIonContent, getScrollElement, printIonContentErrorMsg } from "../..
 import { createKeyboardController } from "../../utils/keyboard/keyboard-controller";
 import { config } from "../../global/config";
 import { getIonTheme } from "../../global/ionic-global";
-import { handleFooterFade, createFooterHideInteraction } from "./footer.utils";
+import { handleFooterFade } from "./footer.utils";
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
  * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
  */
 export class Footer {
     constructor() {
-        this.didLoad = false;
-        this.setupToken = 0;
         this.keyboardCtrl = null;
         this.keyboardCtrlPromise = null;
         this.keyboardVisible = false;
@@ -29,45 +27,25 @@ export class Footer {
         this.translucent = false;
         this.checkCollapsibleFooter = () => {
             const theme = getIonTheme(this);
-            const { collapse } = this;
-            const hasFade = collapse === 'fade';
-            const hasHide = collapse === 'hide';
-            const runIosFade = theme === 'ios' && hasFade;
-            if (!runIosFade && !hasHide) {
-                this.destroyCollapsibleFooter();
-                return;
-            }
-            // Skip teardown/rebuild when the collapse mode and theme have not changed
-            // since the last setup — avoids thrashing listeners and resetting scroll
-            // accumulators on unrelated re-renders (e.g. keyboardVisible state flips).
-            const activeMode = hasHide ? 'hide' : 'fade';
-            if (this.appliedCollapse === activeMode && this.appliedTheme === theme) {
+            if (theme !== 'ios') {
                 return;
             }
+            const { collapse } = this;
+            const hasFade = collapse === 'fade';
             this.destroyCollapsibleFooter();
-            const appRootSelector = config.get('appRootSelector', 'ion-app');
-            const pageEl = this.el.closest(`${appRootSelector},ion-page,.ion-page,page-inner`);
-            const contentEl = pageEl ? findIonContent(pageEl) : null;
-            if (!contentEl) {
-                printIonContentErrorMsg(this.el);
-                return;
-            }
-            this.appliedCollapse = activeMode;
-            this.appliedTheme = theme;
-            if (runIosFade) {
+            if (hasFade) {
+                const appRootSelector = config.get('appRootSelector', 'ion-app');
+                const pageEl = this.el.closest(`${appRootSelector},ion-page,.ion-page,page-inner`);
+                const contentEl = pageEl ? findIonContent(pageEl) : null;
+                if (!contentEl) {
+                    printIonContentErrorMsg(this.el);
+                    return;
+                }
                 this.setupFadeFooter(contentEl);
             }
-            else if (hasHide) {
-                void this.setupHideFooter(contentEl);
-            }
         };
         this.setupFadeFooter = async (contentEl) => {
-            const token = ++this.setupToken;
-            const scrollEl = await getScrollElement(contentEl);
-            if (token !== this.setupToken) {
-                return;
-            }
-            this.scrollEl = scrollEl;
+            const scrollEl = (this.scrollEl = await getScrollElement(contentEl));
             /**
              * Handle fading of toolbars on scroll
              */
@@ -79,18 +57,12 @@ export class Footer {
         };
     }
     componentDidLoad() {
-        this.didLoad = true;
         this.checkCollapsibleFooter();
     }
     componentDidUpdate() {
         this.checkCollapsibleFooter();
     }
     async connectedCallback() {
-        // On re-attach (didLoad already true but disconnectedCallback ran since),
-        // componentDidLoad will not fire again — re-run setup here.
-        if (this.didLoad) {
-            this.checkCollapsibleFooter();
-        }
         const promise = createKeyboardController(async (keyboardOpen, waitForResize) => {
             /**
              * If the keyboard is hiding, then we need to wait
@@ -118,7 +90,6 @@ export class Footer {
         }
     }
     disconnectedCallback() {
-        this.destroyCollapsibleFooter();
         if (this.keyboardCtrlPromise) {
             this.keyboardCtrlPromise.then((ctrl) => ctrl.destroy());
             this.keyboardCtrlPromise = null;
@@ -128,36 +99,18 @@ export class Footer {
             this.keyboardCtrl = null;
         }
     }
-    async setupHideFooter(contentEl) {
-        const token = ++this.setupToken;
-        const scrollEl = await getScrollElement(contentEl);
-        // A newer checkCollapsibleFooter ran while we were awaiting — abandon.
-        if (token !== this.setupToken) {
-            return;
-        }
-        this.scrollEl = scrollEl;
-        this.footerHideCleanup = createFooterHideInteraction(this.el, scrollEl);
-    }
     destroyCollapsibleFooter() {
-        // Invalidate any in-flight setupHideFooter/setupFadeFooter awaits.
-        this.setupToken++;
-        if (this.footerHideCleanup) {
-            this.footerHideCleanup();
-            this.footerHideCleanup = undefined;
-        }
         if (this.scrollEl && this.contentScrollCallback) {
             this.scrollEl.removeEventListener('scroll', this.contentScrollCallback);
             this.contentScrollCallback = undefined;
         }
-        this.appliedCollapse = undefined;
-        this.appliedTheme = undefined;
     }
     render() {
         const { translucent, collapse } = this;
         const theme = getIonTheme(this);
         const tabs = this.el.closest('ion-tabs');
         const tabBar = tabs === null || tabs === void 0 ? void 0 : tabs.querySelector(':scope > ion-tab-bar');
-        return (h(Host, { key: '5df79a31f36febfad49c5858727e93c7ba5734f8', role: "contentinfo", class: {
+        return (h(Host, { key: '4a2989a177b47ee26ffa23e2c9f5418773584796', role: "contentinfo", class: {
                 [theme]: true,
                 // Used internally for styling
                 [`footer-${theme}`]: true,
@@ -165,7 +118,7 @@ export class Footer {
                 [`footer-translucent-${theme}`]: translucent,
                 ['footer-toolbar-padding']: !this.keyboardVisible && (!tabBar || tabBar.slot !== 'bottom'),
                 [`footer-collapse-${collapse}`]: collapse !== undefined,
-            } }, theme === 'ios' && translucent && h("div", { key: '9175ae4f6576d82dff2a00a36e91f4b633d8c9ad', class: "footer-background" }), h("slot", { key: 'd6d618cdae4726822d8e82edb782c5c86fc7b77b' })));
+            } }, theme === 'ios' && translucent && h("div", { key: 'c644963db3e06254014e398ea02189d6127ccf61', class: "footer-background" }), h("slot", { key: '839e33c6c30f5c1c703239a19458ff10da9a5e76' })));
     }
     static get is() { return "ion-footer"; }
     static get originalStyleUrls() {
@@ -188,15 +141,15 @@ export class Footer {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'fade' | 'hide'",
-                    "resolved": "\"fade\" | \"hide\" | undefined",
+                    "original": "'fade'",
+                    "resolved": "\"fade\" | undefined",
                     "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Describes the scroll effect that will be applied to the footer.\n\n- `\"fade\"` only applies when the theme is `\"ios\"`.\n- `\"hide\"` applies to all themes (`\"ios\"`, `\"md\"`, and `\"ionic\"`): the footer\n  slides down and fades out after cumulative downward scrolling on the page content,\n  and returns on any upward scroll (same behavior as `ion-header[collapse=\"hide\"]`)."
+                    "text": "Describes the scroll effect that will be applied to the footer.\nOnly applies when the theme is `\"ios\"`."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/footer/footer.md.css

@@ -71,19 +71,6 @@ ion-footer.footer-toolbar-padding ion-toolbar:last-of-type {
   padding-bottom: var(--ion-safe-area-bottom, 0);
 }
 
-ion-footer.footer-collapse-hide {
-  transform: translateY(0);
-  transition: transform 300ms cubic-bezier(0, 0, 0.2, 1), opacity 300ms cubic-bezier(0, 0, 0.2, 1);
-  opacity: 1;
-}
-
-ion-footer.footer-collapse-hide.footer-collapse-hide-hidden {
-  transform: translateY(var(--footer-hide-slide-y, 0px));
-  pointer-events: none;
-  transition: transform 200ms cubic-bezier(0.4, 0, 1, 1), opacity 300ms cubic-bezier(0.4, 0, 1, 1);
-  opacity: 0;
-}
-
 /**
  * Convert a pixels given value into rem
  * 

package/dist/collection/components/footer/footer.utils.js

@@ -3,7 +3,6 @@
  */
 import { readTask, writeTask } from "@stencil/core";
 import { clamp } from "../../utils/helpers";
-import { createCollapseHideInteraction } from "../../utils/on-scroll/collapse-hide.utils";
 export const handleFooterFade = (scrollEl, baseEl) => {
     readTask(() => {
         const scrollTop = scrollEl.scrollTop;
@@ -32,11 +31,3 @@ export const handleFooterFade = (scrollEl, baseEl) => {
         });
     });
 };
-export const createFooterHideInteraction = (footerEl, scrollEl) => createCollapseHideInteraction({
-    regionEl: footerEl,
-    scrollEl,
-    slideCssVar: '--footer-hide-slide-y',
-    contentPartnerClass: 'content-footer-hide-scroll-partner',
-    contentHiddenClass: 'content-footer-hide-scroll-hidden',
-    regionHiddenClass: 'footer-collapse-hide-hidden',
-});

package/dist/collection/components/gallery/gallery.css

@@ -1,64 +1,3 @@
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
-/**
- * Convert a font size to a dynamic font size.
- * Fonts that participate in Dynamic Type should use
- * dynamic font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param unit (optional) - The unit to convert to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a maximum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a minimum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * maximum and minimum font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * A heuristic that applies CSS to tablet
- * viewports.
- *
- * Usage:
- * @include tablet-viewport() {
- *   :host {
- *     background-color: green;
- *   }
- * }
- */
-/**
- * A heuristic that applies CSS to mobile
- * viewports (i.e. phones, not tablets).
- *
- * Usage:
- * @include mobile-viewport() {
- *   :host {
- *     background-color: blue;
- *   }
- * }
- */
 :host {
   display: grid;
   grid-template-columns: repeat(var(--internal-gallery-columns, 2), minmax(0, 1fr));
@@ -68,33 +7,9 @@
   gap: var(--internal-gallery-gap, 16px);
 }
 
-:host(.gallery-layout-uniform) ::slotted(*) {
-  aspect-ratio: 1/1;
-}
-
 :host(.gallery-layout-masonry) {
   align-items: start;
   column-gap: var(--internal-gallery-gap, 16px);
   row-gap: 0;
-  grid-auto-rows: 2px;
-}
-
-:host(.gallery-layout-masonry) ::slotted(*) {
-  display: block;
-  min-height: unset;
-  margin-bottom: var(--internal-gallery-gap, 16px);
-}
-
-::slotted(*) {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  margin-bottom: 0;
-  width: 100%;
-}
-
-::slotted(img) {
-  display: block;
-  object-fit: cover;
-  object-position: center;
+  grid-auto-rows: 1px;
 }

package/dist/collection/components/gallery/gallery.js

@@ -2,7 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, h } from "@stencil/core";
-import { isValidLengthPercentage } from "../../utils/css-value-validation";
+import { isCssVariable, isValidLengthPercentage } from "../../utils/css-value-validation";
 import { raf } from "../../utils/helpers";
 import { printIonWarning } from "../../utils/logging/index";
 import { getIonTheme } from "../../global/ionic-global";
@@ -17,11 +17,16 @@ const BREAKPOINTS = {
     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';
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
  * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
  *
- * @slot - Content is placed in a responsive gallery layout.
+ * @slot - One or more `ion-gallery-item` components, placed in a responsive
+ * gallery layout.
  */
 export class Gallery {
     constructor() {
@@ -30,6 +35,7 @@ export class Gallery {
         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,
@@ -46,7 +52,8 @@ export class Gallery {
         /**
          * 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%)`,
-         * or numbers (treated as pixel values). Can also be set as a breakpoint map
+         * 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.
          */
@@ -58,6 +65,9 @@ export class Gallery {
          * are added or removed from the gallery.
          */
         this.onSlotChange = () => {
+            // Re-observe so newly added items are watched for size changes (e.g. a
+            // freshly appended item finishing hydration), then recompute placement.
+            this.observeResizes();
             this.scheduleMasonryResize();
         };
         /**
@@ -101,7 +111,7 @@ export class Gallery {
             this.updateResponsiveStyles();
             this.scheduleMasonryResize();
         });
-        this.resizeObserver.observe(this.el);
+        this.observeResizes();
         this.scheduleMasonryResize();
         this.warnUnusedOrder();
     }
@@ -114,6 +124,22 @@ export class Gallery {
         (_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
@@ -167,9 +193,10 @@ export class Gallery {
         return numericColumns;
     }
     /**
-     * Normalize a single gap value (`gap` as a number, string, 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.
+     * 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) {
@@ -186,6 +213,9 @@ export class Gallery {
         if (typeof normalizedGap !== 'string') {
             return undefined;
         }
+        if (isCssVariable(normalizedGap)) {
+            return normalizedGap;
+        }
         const isValidCssLength = isValidLengthPercentage(normalizedGap);
         return isValidCssLength ? normalizedGap : undefined;
     }
@@ -266,7 +296,7 @@ export class Gallery {
         if (this.hasWarnedInvalidGap) {
             return;
         }
-        printIonWarning(`[ion-gallery] - Invalid "gap" value (${JSON.stringify(gap)}). Expected a non-negative number, CSS length string, or breakpoint map object (e.g. { xs: 8, md: "1rem" }).`, this.el);
+        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;
     }
     /**
@@ -338,11 +368,43 @@ export class Gallery {
         this.el.style.setProperty('--internal-gallery-gap', `${gap}`);
     }
     /**
-     * Return all directly slotted children of the gallery that can be grid items
-     * with inline placement styles (HTML elements and SVG elements).
+     * Return the `ion-gallery-item` elements to place in the grid. Each item is a
+     * direct grid cell. A direct child that is not an `ion-gallery-item` is
+     * treated as a pass-through wrapper (e.g. a layout `<div>`): its box is
+     * collapsed with `display: contents` so the nested items participate in the
+     * gallery grid. Children that contain no `ion-gallery-item` are ignored.
      */
     getItems() {
-        return Array.from(this.el.children).filter((child) => { var _a; return typeof ((_a = child.style) === null || _a === void 0 ? void 0 : _a.setProperty) === 'function'; });
+        const items = [];
+        Array.from(this.el.children).forEach((child) => {
+            // Standard path: <ion-gallery-item> is a direct child of <ion-gallery>.
+            if (child.matches(GALLERY_ITEM_SELECTOR)) {
+                items.push(child);
+                return;
+            }
+            // Compatibility path: a wrapper element may contain <ion-gallery-item>
+            // components. Collapse the wrapper's box so the items participate in the
+            // gallery grid.
+            const nestedItems = Array.from(child.querySelectorAll(GALLERY_ITEM_SELECTOR));
+            if (nestedItems.length === 0) {
+                this.warnInvalidItems();
+                return;
+            }
+            child.style.display = 'contents';
+            items.push(...nestedItems);
+        });
+        return items;
+    }
+    /**
+     * Warn when the gallery has content that is not wrapped in an
+     * `ion-gallery-item` component.
+     */
+    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.
@@ -360,12 +422,19 @@ export class Gallery {
     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 for images that are not fully loaded yet.
+     * Returns undefined when the item has images that are not fully loaded yet.
      */
     calculateRowSpan(itemEl, rowHeight, rowGap) {
-        if (itemEl instanceof HTMLImageElement && (!itemEl.complete || itemEl.naturalHeight === 0)) {
+        if (this.hasUnloadedImages(itemEl)) {
             return undefined;
         }
         const height = itemEl.getBoundingClientRect().height;
@@ -452,11 +521,11 @@ export class Gallery {
         const { layout } = this;
         const order = this.getOrder();
         const theme = getIonTheme(this);
-        return (h(Host, { key: '1bf2973d22835c0dbddf3214b602f8c08b95e421', class: {
+        return (h(Host, { key: '2063823917f4ab8430aee0e17ae0f3a2b53341d1', class: {
                 [theme]: true,
                 [`gallery-layout-${layout}`]: true,
                 [`gallery-order-${order}`]: layout === 'masonry' && order !== undefined,
-            } }, h("slot", { key: '0dea31f609f6afdb1d73ecb2d873909ffe49203f', onSlotchange: this.onSlotChange })));
+            } }, h("slot", { key: '1378f489afb6b05181d2513f664c4efe24ad3598', onSlotchange: this.onSlotChange })));
     }
     static get is() { return "ion-gallery"; }
     static get encapsulation() { return "shadow"; }
@@ -557,7 +626,7 @@ export class Gallery {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The space between gallery items. Accepts valid CSS [length-percentage](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/length-percentage)\nvalues like `16px`, `1rem`, `20%`, math functions like `calc(10px + 20%)`,\nor numbers (treated as pixel values). Can also be set as a breakpoint map\n(e.g. `{ xs: '8px', sm: '1rem', md: '24px' }`). Does not accept\nspace-separated values or CSS keyword values like `inherit`, `auto`, etc."
+                    "text": "The space between gallery items. Accepts valid CSS [length-percentage](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/length-percentage)\nvalues like `16px`, `1rem`, `20%`, math functions like `calc(10px + 20%)`,\nCSS variables like `var(--app-gallery-gap)`, or numbers (treated as pixel\nvalues). Can also be set as a breakpoint map\n(e.g. `{ xs: '8px', sm: '1rem', md: '24px' }`). Does not accept\nspace-separated values or CSS keyword values like `inherit`, `auto`, etc."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/gallery/test/utils.js

@@ -6,57 +6,57 @@ export const sharedStyles = `
     width: 343px;
   }
 
-  div {
+  ion-gallery-item div {
     color: #fff;
     height: 150px;
   }
 
-  div:nth-child(1) {
+  ion-gallery-item:nth-child(1) div {
     background: #ff6b6b;
   }
 
-  div:nth-child(2) {
+  ion-gallery-item:nth-child(2) div {
     background: #4ecdc4;
   }
 
-  div:nth-child(3) {
+  ion-gallery-item:nth-child(3) div {
     background: #ffe66d;
     color: #333;
   }
 
-  div:nth-child(4) {
+  ion-gallery-item:nth-child(4) div {
     background: #5f27cd;
   }
 
-  div:nth-child(5) {
+  ion-gallery-item:nth-child(5) div {
     background: #7f8c8d;
   }
 
-  div:nth-child(6) {
+  ion-gallery-item:nth-child(6) div {
     background: #ff9f43;
   }
 
-  div:nth-child(7) {
+  ion-gallery-item:nth-child(7) div {
     background: #ff3f34;
   }
 
-  div:nth-child(8) {
+  ion-gallery-item:nth-child(8) div {
     background: #2ecc71;
   }
 
-  div:nth-child(9) {
+  ion-gallery-item:nth-child(9) div {
     background: #34495e;
   }
 
-  div:nth-child(10) {
+  ion-gallery-item:nth-child(10) div {
     background: #1abc9c;
   }
 
-  div:nth-child(11) {
+  ion-gallery-item:nth-child(11) div {
     background: #e67e22;
   }
 
-  div:nth-child(12) {
+  ion-gallery-item:nth-child(12) div {
     background: #9b59b6;
   }
 `;

package/dist/collection/components/gallery-item/gallery-item.css

@@ -0,0 +1,87 @@
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+ * A heuristic that applies CSS to mobile
+ * viewports (i.e. phones, not tablets).
+ *
+ * Usage:
+ * @include mobile-viewport() {
+ *   :host {
+ *     background-color: blue;
+ *   }
+ * }
+ */
+:host {
+  display: block;
+}
+
+::slotted(*) {
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  width: 100%;
+}
+
+::slotted(img) {
+  display: block;
+  object-fit: cover;
+  object-position: center;
+}
+
+:host(.in-gallery-layout-uniform) ::slotted(*) {
+  aspect-ratio: 1/1;
+}
+
+:host(.in-gallery-layout-masonry) {
+  min-height: unset;
+  margin-bottom: var(--internal-gallery-gap, 16px);
+}