@ionic/core 8.8.18 → 8.8.19-dev.11786730389.1a1927bf

package/dist/esm/ion-item-option_3.entry.js

@@ -1,11 +1,11 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { r as registerInstance, h, d as Host, g as getElement, c as createEvent, f as printIonWarning } from './index-tcQvqkiX.js';
-import { c as createColorClasses } from './theme-DiVJyqlX.js';
-import { b as getIonMode } from './ionic-global-Cp_eT4sZ.js';
-import { o as isEndSide } from './helpers-HEqiOzXb.js';
-import { a as findClosestIonContent, d as disableContentScrollY, r as resetContentScrollY } from './index-Dw-wN0Ja.js';
+import { r as registerInstance, g as getElement, h, d as Host, c as createEvent, f as printIonWarning } from './index-ChhhtsGZ.js';
+import { c as createColorClasses } from './theme-byZM6qHV.js';
+import { b as getIonMode } from './ionic-global-BVB7BrLT.js';
+import { o as isEndSide } from './helpers-DexiPLIC.js';
+import { a as findClosestIonContent, d as disableContentScrollY, r as resetContentScrollY } from './index-_Za5VB9w.js';
 import { w as watchForOptions } from './watch-options-Dtdm8lKC.js';
 
 const itemOptionIosCss = () => `:host{--background:var(--ion-color-primary, #0054e9);--color:var(--ion-color-primary-contrast, #fff);background:var(--background);color:var(--color);font-family:var(--ion-font-family, inherit)}:host(.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}.button-native{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;-webkit-padding-start:0.7em;padding-inline-start:0.7em;-webkit-padding-end:0.7em;padding-inline-end:0.7em;padding-top:0;padding-bottom:0;display:inline-block;position:relative;width:100%;height:100%;border:0;outline:none;background:transparent;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box}.button-inner{display:-ms-flexbox;display:flex;-ms-flex-flow:column nowrap;flex-flow:column nowrap;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%}.horizontal-wrapper{display:-ms-flexbox;display:flex;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%}::slotted(*){-ms-flex-negative:0;flex-shrink:0}::slotted([slot=start]){-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:5px;margin-inline-end:5px;margin-top:0;margin-bottom:0}::slotted([slot=end]){-webkit-margin-start:5px;margin-inline-start:5px;-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0}::slotted([slot=icon-only]){padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;-webkit-margin-start:10px;margin-inline-start:10px;-webkit-margin-end:10px;margin-inline-end:10px;margin-top:0;margin-bottom:0;min-width:0.9em;font-size:1.8em}:host(.item-option-expandable){-ms-flex-negative:0;flex-shrink:0;-webkit-transition-duration:0;transition-duration:0;-webkit-transition-property:none;transition-property:none;-webkit-transition-timing-function:cubic-bezier(0.65, 0.05, 0.36, 1);transition-timing-function:cubic-bezier(0.65, 0.05, 0.36, 1)}:host(.item-option-disabled){pointer-events:none}:host(.item-option-disabled) .button-native{cursor:default;opacity:0.5;pointer-events:none}:host{font-size:clamp(16px, 1rem, 35.2px)}:host(.ion-activated){background:var(--ion-color-primary-shade, #004acd)}:host(.ion-color.ion-activated){background:var(--ion-color-shade)}`;
@@ -15,25 +15,55 @@ const itemOptionMdCss = () => `:host{--background:var(--ion-color-primary, #0054
 const ItemOption = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        /**
-         * If `true`, the user cannot interact with the item option.
-         */
-        this.disabled = false;
-        /**
-         * If `true`, the option will expand to take up the available width and cover any other options.
-         */
-        this.expandable = false;
-        /**
-         * The type of the button.
-         */
-        this.type = 'button';
-        this.onClick = (ev) => {
-            const el = ev.target.closest('ion-item-option');
-            if (el) {
-                ev.preventDefault();
-            }
-        };
     }
+    get el() { return getElement(this); }
+    /**
+     * The color to use from your application's color palette.
+     * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+     * For more information on colors, see [theming](/docs/theming/basics).
+     */
+    color;
+    /**
+     * If `true`, the user cannot interact with the item option.
+     */
+    disabled = false;
+    /**
+     * This attribute instructs browsers to download a URL instead of navigating to
+     * it, so the user will be prompted to save it as a local file. If the attribute
+     * has a value, it is used as the pre-filled file name in the Save prompt
+     * (the user can still change the file name if they want).
+     */
+    download;
+    /**
+     * If `true`, the option will expand to take up the available width and cover any other options.
+     */
+    expandable = false;
+    /**
+     * Contains a URL or a URL fragment that the hyperlink points to.
+     * If this property is set, an anchor tag will be rendered.
+     */
+    href;
+    /**
+     * Specifies the relationship of the target object to the link object.
+     * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
+     */
+    rel;
+    /**
+     * Specifies where to display the linked URL.
+     * Only applies when an `href` is provided.
+     * Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
+     */
+    target;
+    /**
+     * The type of the button.
+     */
+    type = 'button';
+    onClick = (ev) => {
+        const el = ev.target.closest('ion-item-option');
+        if (el) {
+            ev.preventDefault();
+        }
+    };
     render() {
         const { disabled, expandable, href } = this;
         const TagType = href === undefined ? 'button' : 'a';
@@ -50,9 +80,8 @@ const ItemOption = class {
                 'item-option-disabled': disabled,
                 'item-option-expandable': expandable,
                 'ion-activatable': true,
-            }) }, h(TagType, Object.assign({ key: '568c7de194ecef7d1efec2abdf855b3fce71aa03' }, attrs, { class: "button-native", part: "native", disabled: disabled }), h("span", { key: 'fe1a494a40febc5c415098d8c9b2edad9fac02c9', class: "button-inner", part: "inner" }, h("slot", { key: '8e4ec73c1a9c047a29dac8ad09ff1cce94a751c7', name: "top" }), h("div", { key: '7828c6413d2cab692a3a2e5aa2a17240e0dcb230', class: "horizontal-wrapper", part: "container" }, h("slot", { key: 'c8eb9881db296280ba895ab249e5d1bb3fc27206', name: "start" }), h("slot", { key: '144b18f7ea90a45abbe0b1fa878c87e623897b7b', name: "icon-only" }), h("slot", { key: '6c63ebad29552a32e1ed9ca3c95aa005b35b9b86' }), h("slot", { key: '99478d52600bf32342649a2f74ed8e1eb07407d4', name: "end" })), h("slot", { key: '00247fc54e61cface4e6ac6e8ea05a0685f5e26e', name: "bottom" })), mode === 'md' && h("ion-ripple-effect", { key: 'dc5057f2ff0926b2e5fd1520fed6cf7dc3197cf8' }))));
+            }) }, h(TagType, { key: '568c7de194ecef7d1efec2abdf855b3fce71aa03', ...attrs, class: "button-native", part: "native", disabled: disabled }, h("span", { key: 'fe1a494a40febc5c415098d8c9b2edad9fac02c9', class: "button-inner", part: "inner" }, h("slot", { key: '8e4ec73c1a9c047a29dac8ad09ff1cce94a751c7', name: "top" }), h("div", { key: '7828c6413d2cab692a3a2e5aa2a17240e0dcb230', class: "horizontal-wrapper", part: "container" }, h("slot", { key: 'c8eb9881db296280ba895ab249e5d1bb3fc27206', name: "start" }), h("slot", { key: '144b18f7ea90a45abbe0b1fa878c87e623897b7b', name: "icon-only" }), h("slot", { key: '6c63ebad29552a32e1ed9ca3c95aa005b35b9b86' }), h("slot", { key: '99478d52600bf32342649a2f74ed8e1eb07407d4', name: "end" })), h("slot", { key: '00247fc54e61cface4e6ac6e8ea05a0685f5e26e', name: "bottom" })), mode === 'md' && h("ion-ripple-effect", { key: 'dc5057f2ff0926b2e5fd1520fed6cf7dc3197cf8' }))));
     }
-    get el() { return getElement(this); }
 };
 ItemOption.style = {
     ios: itemOptionIosCss(),
@@ -67,12 +96,17 @@ const ItemOptions = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.ionSwipe = createEvent(this, "ionSwipe", 7);
-        /**
-         * The side the option button should be on. Possible values: `"start"` and `"end"`. If you have multiple `ion-item-options`, a side must be provided for each.
-         *
-         */
-        this.side = 'end';
     }
+    get el() { return getElement(this); }
+    /**
+     * The side the option button should be on. Possible values: `"start"` and `"end"`. If you have multiple `ion-item-options`, a side must be provided for each.
+     *
+     */
+    side = 'end';
+    /**
+     * Emitted when the item has been fully swiped.
+     */
+    ionSwipe; // TODO(FW-2832): type
     /** @internal */
     async fireSwipeEvent() {
         this.ionSwipe.emit({
@@ -98,7 +132,6 @@ const ItemOptions = class {
                 'item-options-end': isEnd,
             } }));
     }
-    get el() { return getElement(this); }
 };
 ItemOptions.style = {
     ios: itemOptionsIosCss(),
@@ -114,26 +147,36 @@ const ItemSliding = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.ionDrag = createEvent(this, "ionDrag", 7);
-        this.item = null;
-        this.openAmount = 0;
-        this.initialOpenAmount = 0;
-        this.optsWidthRightSide = 0;
-        this.optsWidthLeftSide = 0;
-        this.sides = 0 /* ItemSide.None */;
-        this.optsDirty = true;
-        this.contentEl = null;
-        this.initialContentScrollY = true;
-        this.state = 2 /* SlidingState.Disabled */;
-        /**
-         * If `true`, the user cannot interact with the sliding item.
-         */
-        this.disabled = false;
     }
+    item = null;
+    openAmount = 0;
+    initialOpenAmount = 0;
+    optsWidthRightSide = 0;
+    optsWidthLeftSide = 0;
+    sides = 0 /* ItemSide.None */;
+    tmr;
+    leftOptions;
+    rightOptions;
+    optsDirty = true;
+    gesture;
+    contentEl = null;
+    initialContentScrollY = true;
+    mutationObserver;
+    get el() { return getElement(this); }
+    state = 2 /* SlidingState.Disabled */;
+    /**
+     * If `true`, the user cannot interact with the sliding item.
+     */
+    disabled = false;
     disabledChanged() {
         if (this.gesture) {
             this.gesture.enable(!this.disabled);
         }
     }
+    /**
+     * Emitted when the sliding position changes.
+     */
+    ionDrag;
     async connectedCallback() {
         const { el } = this;
         this.item = el.querySelector('ion-item');
@@ -149,7 +192,7 @@ const ItemSliding = class {
             await this.updateOptions();
         });
         await this.updateOptions();
-        this.gesture = (await import('./index-CfgBF1SE.js')).createGesture({
+        this.gesture = (await import('./index-DppOcPFQ.js')).createGesture({
             el,
             gestureName: 'item-swipe',
             gesturePriority: 100,
@@ -198,7 +241,6 @@ const ItemSliding = class {
      * @param side The side of the options to open. If a side is not provided, it will open the first set of options it finds within the item.
      */
     async open(side) {
-        var _a;
         /**
          * It is possible for the item to be added to the DOM
          * after the item-sliding component was created. As a result,
@@ -207,7 +249,7 @@ const ItemSliding = class {
          * However, if the item is already defined then
          * we do not query for it again.
          */
-        const item = (this.item = (_a = this.item) !== null && _a !== void 0 ? _a : this.el.querySelector('ion-item'));
+        const item = (this.item = this.item ?? this.el.querySelector('ion-item'));
         if (item === null) {
             return;
         }
@@ -281,7 +323,6 @@ const ItemSliding = class {
         }
     }
     async updateOptions() {
-        var _a;
         const options = this.el.querySelectorAll('ion-item-options');
         let sides = 0;
         // Reset left and right options in case they were removed
@@ -295,7 +336,7 @@ const ItemSliding = class {
              */
             // eslint-disable-next-line custom-rules/no-component-on-ready-method
             const option = item.componentOnReady !== undefined ? await item.componentOnReady() : item;
-            const side = isEndSide((_a = option.side) !== null && _a !== void 0 ? _a : option.getAttribute('side')) ? 'end' : 'start';
+            const side = isEndSide(option.side ?? option.getAttribute('side')) ? 'end' : 'start';
             if (side === 'start') {
                 this.leftOptions = option;
                 sides |= 1 /* ItemSide.Start */;
@@ -502,7 +543,6 @@ const ItemSliding = class {
                 'item-sliding-active-swipe-start': (this.state & 64 /* SlidingState.SwipeStart */) !== 0,
             } }));
     }
-    get el() { return getElement(this); }
     static get watchers() { return {
         "disabled": [{
                 "disabledChanged": 0

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

@@ -1,11 +1,11 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { r as registerInstance, i as forceUpdate, h, d as Host, g as getElement, c as createEvent, e as config } from './index-tcQvqkiX.js';
-import { b as inheritAttributes, r as raf } from './helpers-HEqiOzXb.js';
-import { h as hostContext, c as createColorClasses, o as openURL } from './theme-DiVJyqlX.js';
-import { p as chevronForward } from './index-DV3sJJW8.js';
-import { b as getIonMode } from './ionic-global-Cp_eT4sZ.js';
+import { r as registerInstance, g as getElement, i as forceUpdate, h, d as Host, c as createEvent, e as config } from './index-ChhhtsGZ.js';
+import { b as inheritAttributes, r as raf } from './helpers-DexiPLIC.js';
+import { h as hostContext, c as createColorClasses, o as openURL } from './theme-byZM6qHV.js';
+import { e as chevronForward } from './index-BvabGprD.js';
+import { b as getIonMode } from './ionic-global-BVB7BrLT.js';
 
 const itemIosCss = () => `:host{--border-radius:0px;--border-width:0px;--border-style:solid;--padding-top:0px;--padding-bottom:0px;--padding-end:0px;--padding-start:0px;--inner-border-width:0px;--inner-padding-top:0px;--inner-padding-bottom:0px;--inner-padding-start:0px;--inner-padding-end:0px;--inner-box-shadow:none;--detail-icon-color:initial;--detail-icon-font-size:1.25em;--detail-icon-opacity:0.25;--color-activated:var(--color);--color-focused:var(--color);--color-hover:var(--color);--ripple-color:currentColor;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;outline:none;color:var(--color);font-family:var(--ion-font-family, inherit);text-align:initial;text-decoration:none;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box}:host(.ion-color) .item-native{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.ion-color) .item-native,:host(.ion-color) .item-inner{border-color:var(--ion-color-shade)}:host(.ion-activated) .item-native{color:var(--color-activated)}:host(.ion-activated) .item-native::after{background:var(--background-activated);opacity:var(--background-activated-opacity)}:host(.ion-color.ion-activated) .item-native{color:var(--ion-color-contrast)}:host(.ion-focused) .item-native{color:var(--color-focused)}:host(.ion-focused) .item-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}:host(.ion-color.ion-focused) .item-native{color:var(--ion-color-contrast)}:host(.ion-color.ion-focused) .item-native::after{background:var(--ion-color-contrast)}@media (any-hover: hover){:host(.ion-activatable:not(.ion-focused):hover) .item-native{color:var(--color-hover)}:host(.ion-activatable:not(.ion-focused):hover) .item-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity)}:host(.ion-color.ion-activatable:not(.ion-focused):hover) .item-native{color:var(--ion-color-contrast)}:host(.ion-color.ion-activatable:not(.ion-focused):hover) .item-native::after{background:var(--ion-color-contrast)}}:host(.item-control-needs-pointer-cursor){cursor:pointer}:host(.item-interactive-disabled:not(.item-multiple-inputs)){cursor:default;pointer-events:none}:host(.item-disabled){cursor:default;opacity:0.3;pointer-events:none}.item-native{border-radius:var(--border-radius);margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-right:var(--padding-end);padding-left:calc(var(--padding-start) + var(--ion-safe-area-left, 0px));display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:inherit;align-items:inherit;-ms-flex-pack:inherit;justify-content:inherit;width:100%;min-height:var(--min-height);-webkit-transition:var(--transition);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);outline:none;background:var(--background);overflow:inherit;z-index:1;-webkit-box-sizing:border-box;box-sizing:border-box}:host-context([dir=rtl]) .item-native{padding-right:calc(var(--padding-start) + var(--ion-safe-area-right, 0px));padding-left:var(--padding-end)}[dir=rtl] .item-native{padding-right:calc(var(--padding-start) + var(--ion-safe-area-right, 0px));padding-left:var(--padding-end)}@supports selector(:dir(rtl)){.item-native:dir(rtl){padding-right:calc(var(--padding-start) + var(--ion-safe-area-right, 0px));padding-left:var(--padding-end)}}.item-native::-moz-focus-inner{border:0}.item-native::after{left:0;right:0;top:0;bottom:0;position:absolute;content:"";opacity:0;-webkit-transition:var(--transition);transition:var(--transition);z-index:-1}button,a{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none}.item-inner{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-top:var(--inner-padding-top);padding-bottom:var(--inner-padding-bottom);padding-right:calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end));padding-left:var(--inner-padding-start);display:-ms-flexbox;display:flex;position:relative;-ms-flex:1;flex:1;-ms-flex-direction:inherit;flex-direction:inherit;-ms-flex-align:inherit;align-items:inherit;-ms-flex-item-align:stretch;align-self:stretch;min-height:inherit;border-width:var(--inner-border-width);border-style:var(--border-style);border-color:var(--border-color);-webkit-box-shadow:var(--inner-box-shadow);box-shadow:var(--inner-box-shadow);overflow:inherit;-webkit-box-sizing:border-box;box-sizing:border-box}:host-context([dir=rtl]) .item-inner{padding-right:var(--inner-padding-start);padding-left:calc(var(--ion-safe-area-left, 0px) + var(--inner-padding-end))}[dir=rtl] .item-inner{padding-right:var(--inner-padding-start);padding-left:calc(var(--ion-safe-area-left, 0px) + var(--inner-padding-end))}@supports selector(:dir(rtl)){.item-inner:dir(rtl){padding-right:var(--inner-padding-start);padding-left:calc(var(--ion-safe-area-left, 0px) + var(--inner-padding-end))}}.item-detail-icon{-webkit-margin-start:calc(var(--inner-padding-end) / 2);margin-inline-start:calc(var(--inner-padding-end) / 2);-webkit-margin-end:-6px;margin-inline-end:-6px;color:var(--detail-icon-color);font-size:var(--detail-icon-font-size);opacity:var(--detail-icon-opacity)}::slotted(ion-icon){font-size:1.6em}::slotted(ion-button){--margin-top:0;--margin-bottom:0;--margin-start:0;--margin-end:0;z-index:1}::slotted(ion-label:not([slot=end])){-ms-flex:1;flex:1;width:-webkit-min-content;width:-moz-min-content;width:min-content;max-width:100%}:host(.item-input){-ms-flex-align:center;align-items:center}.input-wrapper{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:inherit;flex-direction:inherit;-ms-flex-align:inherit;align-items:inherit;-ms-flex-item-align:stretch;align-self:stretch;text-overflow:ellipsis;overflow:inherit;-webkit-box-sizing:border-box;box-sizing:border-box}:host(.item-label-stacked),:host(.item-label-floating){-ms-flex-align:start;align-items:start}:host(.item-label-stacked) .input-wrapper,:host(.item-label-floating) .input-wrapper{-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column}:host(.item-focus-indicator-room) .input-wrapper{-webkit-margin-start:-12px;margin-inline-start:-12px;-webkit-margin-end:-12px;margin-inline-end:-12px;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px}:host(.item-multiple-inputs) ::slotted(ion-checkbox),:host(.item-multiple-inputs) ::slotted(ion-datetime),:host(.item-multiple-inputs) ::slotted(ion-radio){position:relative}:host(.item-textarea){-ms-flex-align:stretch;align-items:stretch}::slotted(ion-reorder[slot]){margin-top:0;margin-bottom:0}ion-ripple-effect{color:var(--ripple-color)}:host{--min-height:44px;--transition:background-color 200ms linear, opacity 200ms linear;--padding-start:16px;--inner-padding-end:16px;--inner-border-width:0px 0px 0.55px 0px;--background:var(--ion-item-background, var(--ion-background-color, #fff));--background-activated:var(--ion-text-color, #000);--background-focused:var(--ion-text-color, #000);--background-hover:currentColor;--background-activated-opacity:.12;--background-focused-opacity:.15;--background-hover-opacity:.04;--border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))));--color:var(--ion-item-color, var(--ion-text-color, #000));font-size:1rem}:host(.ion-activated){--transition:none}:host(.ion-color.ion-focused) .item-native::after{background:#000;opacity:0.15}:host(.ion-color.ion-activated) .item-native::after{background:#000;opacity:0.12}:host(.item-lines-full){--border-width:0px 0px 0.55px 0px}:host(.item-lines-inset){--inner-border-width:0px 0px 0.55px 0px}:host(.item-lines-inset),:host(.item-lines-none){--border-width:0px}:host(.item-lines-full),:host(.item-lines-none){--inner-border-width:0px}::slotted([slot=start]){-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:2px;margin-bottom:2px}::slotted(ion-icon[slot=start]),::slotted(ion-icon[slot=end]){margin-top:7px;margin-bottom:7px}::slotted(ion-toggle[slot=start]),::slotted(ion-toggle[slot=end]){margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}:host(.item-label-stacked) ::slotted([slot=end]),:host(.item-label-floating) ::slotted([slot=end]){margin-top:7px;margin-bottom:7px}::slotted(.button-small){--padding-top:1px;--padding-bottom:1px;--padding-start:.5em;--padding-end:.5em;min-height:24px;font-size:0.8125rem}::slotted(ion-avatar){width:36px;height:36px}::slotted(ion-thumbnail){--size:56px}::slotted(ion-avatar[slot=end]),::slotted(ion-thumbnail[slot=end]){-webkit-margin-start:8px;margin-inline-start:8px;-webkit-margin-end:8px;margin-inline-end:8px;margin-top:8px;margin-bottom:8px}:host(.item-radio) ::slotted(ion-label),:host(.item-toggle) ::slotted(ion-label){-webkit-margin-start:0px;margin-inline-start:0px}::slotted(ion-label){-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:8px;margin-inline-end:8px;margin-top:10px;margin-bottom:10px}:host(.item-label-floating),:host(.item-label-stacked){--min-height:68px}`;
 
@@ -15,42 +15,81 @@ const INDICATOR_CONTROL_SELECTOR = 'ion-checkbox, ion-radio, ion-toggle';
 const Item = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.labelColorStyles = {};
-        this.itemStyles = new Map();
-        this.inheritedAriaAttributes = {};
-        this.didLoad = false;
-        this.multipleInputs = false;
-        this.focusable = true;
-        this.isInteractive = false;
-        this.hasSlottedIndicatorControl = false;
-        /**
-         * If `true`, a button tag will be rendered and the item will be tappable.
-         */
-        this.button = false;
-        /**
-         * The icon to use when `detail` is set to `true`.
-         */
-        this.detailIcon = chevronForward;
-        /**
-         * If `true`, the user cannot interact with the item.
-         */
-        this.disabled = false;
-        /**
-         * When using a router, it specifies the transition direction when navigating to
-         * another page using `href`.
-         */
-        this.routerDirection = 'forward';
-        /**
-         * The type of the button. Only used when an `onclick` or `button` property is present.
-         */
-        this.type = 'button';
-        // slot change listener updates state to reflect how/if item should be interactive
-        this.updateInteractivityOnSlotChange = () => {
-            this.setIsInteractive();
-            this.setMultipleInputs();
-            this.setHasSlottedIndicatorControl();
-        };
     }
+    labelColorStyles = {};
+    itemStyles = new Map();
+    inheritedAriaAttributes = {};
+    indicatorControlObserver;
+    didLoad = false;
+    get el() { return getElement(this); }
+    multipleInputs = false;
+    focusable = true;
+    isInteractive = false;
+    hasSlottedIndicatorControl = false;
+    /**
+     * The color to use from your application's color palette.
+     * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+     * For more information on colors, see [theming](/docs/theming/basics).
+     */
+    color;
+    /**
+     * If `true`, a button tag will be rendered and the item will be tappable.
+     */
+    button = false;
+    /**
+     * If `true`, a detail arrow will appear on the item. Defaults to `false` unless the `mode`
+     * is `ios` and an `href` or `button` property is present.
+     */
+    detail;
+    /**
+     * The icon to use when `detail` is set to `true`.
+     */
+    detailIcon = chevronForward;
+    /**
+     * If `true`, the user cannot interact with the item.
+     */
+    disabled = false;
+    /**
+     * This attribute instructs browsers to download a URL instead of navigating to
+     * it, so the user will be prompted to save it as a local file. If the attribute
+     * has a value, it is used as the pre-filled file name in the Save prompt
+     * (the user can still change the file name if they want).
+     */
+    download;
+    /**
+     * Contains a URL or a URL fragment that the hyperlink points to.
+     * If this property is set, an anchor tag will be rendered.
+     */
+    href;
+    /**
+     * Specifies the relationship of the target object to the link object.
+     * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
+     */
+    rel;
+    /**
+     * How the bottom border should be displayed on the item.
+     */
+    lines;
+    /**
+     * When using a router, it specifies the transition animation when navigating to
+     * another page using `href`.
+     */
+    routerAnimation;
+    /**
+     * When using a router, it specifies the transition direction when navigating to
+     * another page using `href`.
+     */
+    routerDirection = 'forward';
+    /**
+     * Specifies where to display the linked URL.
+     * Only applies when an `href` is provided.
+     * Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
+     */
+    target;
+    /**
+     * The type of the button. Only used when an `onclick` or `button` property is present.
+     */
+    type = 'button';
     buttonChanged() {
         // Update the focusable option when the button option is changed
         this.focusable = this.isFocusable();
@@ -164,13 +203,12 @@ const Item = class {
      * in Android WebView. Worth revisiting when FW-6106 closes.
      */
     watchForIndicatorControls() {
-        var _a;
         if (typeof MutationObserver === 'undefined') {
             return;
         }
         // `Node.moveBefore` relocates the item without either callback firing, so
         // never leave a previous observer behind
-        (_a = this.indicatorControlObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.indicatorControlObserver?.disconnect();
         this.indicatorControlObserver = new MutationObserver((records) => {
             // The subtree observer also fires for text and hidden input churn, so only
             // re-read the DOM when a control was added or removed
@@ -194,6 +232,12 @@ const Item = class {
             return slotted !== null && !slotted.getAttribute('slot');
         });
     }
+    // slot change listener updates state to reflect how/if item should be interactive
+    updateInteractivityOnSlotChange = () => {
+        this.setIsInteractive();
+        this.setMultipleInputs();
+        this.setHasSlottedIndicatorControl();
+    };
     // If the item contains an input including a checkbox, datetime, select, or radio
     // then the item will have a clickable input cover that covers the item
     // that should get the hover, focused and activated states UNLESS it has multiple
@@ -301,22 +345,25 @@ const Item = class {
          * multi-input item, and in a clickable item, which is a second tab stop.
          */
         const slottedIndicatorNeedsRoom = this.hasSlottedIndicatorControl && (multipleInputs || this.isClickable());
-        return (h(Host, { key: '0dc161ad7ac2fdedc5005015fceb34ed176010a6', "aria-disabled": ariaDisabled, class: Object.assign(Object.assign(Object.assign({}, childStyles), labelColorStyles), createColorClasses(this.color, {
-                item: true,
-                [mode]: true,
-                'item-lines-default': lines === undefined,
-                [`item-lines-${lines}`]: lines !== undefined,
-                'item-control-needs-pointer-cursor': firstInteractiveNeedsPointerCursor,
-                'item-disabled': disabled,
-                'in-list': inList,
-                'item-multiple-inputs': this.multipleInputs,
-                'item-focus-indicator-room': slottedIndicatorNeedsRoom,
-                'ion-activatable': canActivate,
-                'ion-focusable': this.focusable,
-                'item-rtl': document.dir === 'rtl',
-            })), role: inList ? 'listitem' : null }, h(TagType, Object.assign({ key: 'd42583cf62133b2553de2e7a5357168640bb1834' }, attrs, inheritedAriaAttributes, { class: "item-native", part: "native", disabled: disabled }, clickFn), h("slot", { key: 'bd805ce49946cd52280d1c4b370104ee2472f1e2', name: "start", onSlotchange: this.updateInteractivityOnSlotChange }), h("div", { key: '0de589f9c5c13c31b6c8838566a7ad6f78f81028', class: "item-inner", part: "inner" }, h("div", { key: 'faaf6a39e072fb352753c645736ab1f47c2d7d25', class: "input-wrapper", part: "container" }, h("slot", { key: '70a34c31de29a0786a14b4a7d3156ba8d4d92eb4', onSlotchange: this.updateInteractivityOnSlotChange })), h("slot", { key: 'c8e764b62c5c30f67750896741ca266b741d5999', name: "end", onSlotchange: this.updateInteractivityOnSlotChange }), showDetail && (h("ion-icon", { key: 'af006856d8c4ed69174534261344215957cc751a', icon: detailIcon, lazy: false, class: "item-detail-icon", part: "detail-icon", "aria-hidden": "true", "flip-rtl": detailIcon === chevronForward }))), canActivate && mode === 'md' && h("ion-ripple-effect", { key: 'e5e151bafedd38feb8f71a387a0059aa1e9e90de' }))));
+        return (h(Host, { key: '0dc161ad7ac2fdedc5005015fceb34ed176010a6', "aria-disabled": ariaDisabled, class: {
+                ...childStyles,
+                ...labelColorStyles,
+                ...createColorClasses(this.color, {
+                    item: true,
+                    [mode]: true,
+                    'item-lines-default': lines === undefined,
+                    [`item-lines-${lines}`]: lines !== undefined,
+                    'item-control-needs-pointer-cursor': firstInteractiveNeedsPointerCursor,
+                    'item-disabled': disabled,
+                    'in-list': inList,
+                    'item-multiple-inputs': this.multipleInputs,
+                    'item-focus-indicator-room': slottedIndicatorNeedsRoom,
+                    'ion-activatable': canActivate,
+                    'ion-focusable': this.focusable,
+                    'item-rtl': document.dir === 'rtl',
+                }),
+            }, role: inList ? 'listitem' : null }, h(TagType, { key: 'd42583cf62133b2553de2e7a5357168640bb1834', ...attrs, ...inheritedAriaAttributes, class: "item-native", part: "native", disabled: disabled, ...clickFn }, h("slot", { key: 'bd805ce49946cd52280d1c4b370104ee2472f1e2', name: "start", onSlotchange: this.updateInteractivityOnSlotChange }), h("div", { key: '0de589f9c5c13c31b6c8838566a7ad6f78f81028', class: "item-inner", part: "inner" }, h("div", { key: 'faaf6a39e072fb352753c645736ab1f47c2d7d25', class: "input-wrapper", part: "container" }, h("slot", { key: '70a34c31de29a0786a14b4a7d3156ba8d4d92eb4', onSlotchange: this.updateInteractivityOnSlotChange })), h("slot", { key: 'c8e764b62c5c30f67750896741ca266b741d5999', name: "end", onSlotchange: this.updateInteractivityOnSlotChange }), showDetail && (h("ion-icon", { key: 'af006856d8c4ed69174534261344215957cc751a', icon: detailIcon, lazy: false, class: "item-detail-icon", part: "detail-icon", "aria-hidden": "true", "flip-rtl": detailIcon === chevronForward }))), canActivate && mode === 'md' && h("ion-ripple-effect", { key: 'e5e151bafedd38feb8f71a387a0059aa1e9e90de' }))));
     }
-    get el() { return getElement(this); }
     static get watchers() { return {
         "button": [{
                 "buttonChanged": 0
@@ -343,15 +390,22 @@ const itemDividerMdCss = () => `:host{--padding-top:0px;--padding-end:0px;--padd
 const ItemDivider = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        /**
-         * When it's set to `true`, the item-divider will stay visible when it reaches the top
-         * of the viewport until the next `ion-item-divider` replaces it.
-         *
-         * This feature relies in `position:sticky`:
-         * https://caniuse.com/#feat=css-sticky
-         */
-        this.sticky = false;
     }
+    get el() { return getElement(this); }
+    /**
+     * The color to use from your application's color palette.
+     * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+     * For more information on colors, see [theming](/docs/theming/basics).
+     */
+    color;
+    /**
+     * When it's set to `true`, the item-divider will stay visible when it reaches the top
+     * of the viewport until the next `ion-item-divider` replaces it.
+     *
+     * This feature relies in `position:sticky`:
+     * https://caniuse.com/#feat=css-sticky
+     */
+    sticky = false;
     render() {
         const mode = getIonMode(this);
         return (h(Host, { key: 'ff2ae8eee7704ca28e3f25a39fc3d910f57b1879', class: createColorClasses(this.color, {
@@ -360,7 +414,6 @@ const ItemDivider = class {
                 item: true,
             }) }, h("slot", { key: '9747421ee3c6b8012ad5a71091aa9775d002885e', name: "start" }), h("div", { key: '0ad8e1355c70efcc095b954c29af497a18b35b37', class: "item-divider-inner", part: "inner" }, h("div", { key: '7562f4f033e786b620ef2bd62d7c35f1013b4905', class: "item-divider-wrapper", part: "container" }, h("slot", { key: '013a0c58ca93afa395a52df30020d1b9e86ffc3a' })), h("slot", { key: 'a08f7b7a133110cbb51b1f4843133bacc306d3a1', name: "end" }))));
     }
-    get el() { return getElement(this); }
 };
 ItemDivider.style = {
     ios: itemDividerIosCss(),
@@ -399,9 +452,31 @@ const Label = class {
         registerInstance(this, hostRef);
         this.ionColor = createEvent(this, "ionColor", 7);
         this.ionStyle = createEvent(this, "ionStyle", 7);
-        this.inRange = false;
-        this.noAnimate = false;
     }
+    inRange = false;
+    loadTimeout;
+    get el() { return getElement(this); }
+    /**
+     * The color to use from your application's color palette.
+     * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+     * For more information on colors, see [theming](/docs/theming/basics).
+     */
+    color;
+    /**
+     * The position determines where and how the label behaves inside an item.
+     */
+    position;
+    /**
+     * Emitted when the color changes.
+     * @internal
+     */
+    ionColor;
+    /**
+     * Emitted when the styles change.
+     * @internal
+     */
+    ionStyle;
+    noAnimate = false;
     componentWillLoad() {
         this.inRange = !!this.el.closest('ion-range');
         this.noAnimate = this.position === 'floating';
@@ -456,7 +531,6 @@ const Label = class {
                 'label-rtl': document.dir === 'rtl',
             }) }, h("slot", { key: 'a8c3aed240a20ee5856c423662878481a1e6d4cf' })));
     }
-    get el() { return getElement(this); }
     static get watchers() { return {
         "color": [{
                 "colorChanged": 0
@@ -478,11 +552,16 @@ const listMdCss = () => `ion-list{margin-left:0;margin-right:0;margin-top:0;marg
 const List = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        /**
-         * If `true`, the list will have margin around it and rounded corners.
-         */
-        this.inset = false;
     }
+    get el() { return getElement(this); }
+    /**
+     * How the bottom border should be displayed on all items.
+     */
+    lines;
+    /**
+     * If `true`, the list will have margin around it and rounded corners.
+     */
+    inset = false;
     /**
      * If `ion-item-sliding` are used inside the list, this method closes
      * any open sliding item.
@@ -491,7 +570,7 @@ const List = class {
      */
     async closeSlidingItems() {
         const item = this.el.querySelector('ion-item-sliding');
-        if (item === null || item === void 0 ? void 0 : item.closeOpened) {
+        if (item?.closeOpened) {
             return item.closeOpened();
         }
         return false;
@@ -508,7 +587,6 @@ const List = class {
                 [`list-${mode}-lines-${lines}`]: lines !== undefined,
             } }));
     }
-    get el() { return getElement(this); }
 };
 List.style = {
     ios: listIosCss(),
@@ -523,6 +601,16 @@ const ListHeader = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
     }
+    /**
+     * The color to use from your application's color palette.
+     * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+     * For more information on colors, see [theming](/docs/theming/basics).
+     */
+    color;
+    /**
+     * How the bottom border should be displayed on the list header.
+     */
+    lines;
     render() {
         const { lines } = this;
         const mode = getIonMode(this);
@@ -545,6 +633,12 @@ const Note = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
     }
+    /**
+     * The color to use from your application's color palette.
+     * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+     * For more information on colors, see [theming](/docs/theming/basics).
+     */
+    color;
     render() {
         const mode = getIonMode(this);
         return (h(Host, { key: 'b86a6acc9274df6528d224d4c11ab826a0f84dbc', class: createColorClasses(this.color, {
@@ -563,11 +657,17 @@ const SkeletonText = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.ionStyle = createEvent(this, "ionStyle", 7);
-        /**
-         * If `true`, the skeleton text will animate.
-         */
-        this.animated = false;
     }
+    get el() { return getElement(this); }
+    /**
+     * If `true`, the skeleton text will animate.
+     */
+    animated = false;
+    /**
+     * Emitted when the styles change.
+     * @internal
+     */
+    ionStyle;
     componentWillLoad() {
         this.emitStyle();
     }
@@ -584,13 +684,12 @@ const SkeletonText = class {
         const animated = this.animated && config.getBoolean('animated', true);
         const inMedia = hostContext('ion-avatar', this.el) || hostContext('ion-thumbnail', this.el);
         const mode = getIonMode(this);
-        return (h(Host, { key: 'cb8da9aba121811b9a4ffdae60ed88105897cb3c', class: {
+        return (h(Host, { key: '887d958d982345ce610730ab5c9ae35010430f75', class: {
                 [mode]: true,
                 'skeleton-text-animated': animated,
                 'in-media': inMedia,
-            } }, h("span", { key: '5379deee3c76d46d615be0cba14b4f60129ffa25' }, "\u00A0")));
+            } }, h("span", { key: 'a184f4b9780a2aada0a16729109ac81436e9c9e1' }, "\u00A0")));
     }
-    get el() { return getElement(this); }
 };
 SkeletonText.style = skeletonTextCss();