@ionic/core 8.8.19 → 8.8.20-dev.11787158518.168a2fea

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

@@ -1,13 +1,13 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { r as registerInstance, c as createEvent, h, d as Host, g as getElement, i as forceUpdate } from './index-tcQvqkiX.js';
-import { i as inheritAriaAttributes, a as renderHiddenInput } from './helpers-DkCLSLI9.js';
-import { c as createItemMultipleInputsObserver } from './item-multiple-inputs-DlNuqNJm.js';
+import { r as registerInstance, c as createEvent, g as getElement, h, d as Host, i as forceUpdate } from './index-ChhhtsGZ.js';
+import { i as inheritAriaAttributes, a as renderHiddenInput } from './helpers-CAGf8Wgp.js';
+import { c as createItemMultipleInputsObserver } from './item-multiple-inputs-rU8VaNNg.js';
 import { c as checkInvalidState } from './validity-DJztqcrH.js';
-import { h as hostContext, c as createColorClasses } from './theme-DiVJyqlX.js';
-import { b as getIonMode } from './ionic-global-Cp_eT4sZ.js';
-import './dir-o8OKV5aD.js';
+import { h as hostContext, c as createColorClasses } from './theme-byZM6qHV.js';
+import { b as getIonMode } from './ionic-global-BVB7BrLT.js';
+import './dir-Dojwmvde.js';
 
 const checkboxIosCss = () => `:host{--checkbox-background-checked:var(--ion-color-primary, #0054e9);--border-color-checked:var(--ion-color-primary, #0054e9);--checkmark-color:var(--ion-color-primary-contrast, #fff);--transition:none;display:inline-block;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2}:host(.in-item){-ms-flex:1 1 0px;flex:1 1 0;width:100%;height:100%}:host([slot=start]),:host([slot=end]){-ms-flex:initial;flex:initial;width:auto}:host(.ion-color){--checkbox-background-checked:var(--ion-color-base);--border-color-checked:var(--ion-color-base);--checkmark-color:var(--ion-color-contrast)}.checkbox-wrapper{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:inherit;cursor:inherit}.label-text-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.in-item) .label-text-wrapper,:host(.in-item:not(.checkbox-label-placement-stacked):not([slot])) .native-wrapper{margin-top:10px;margin-bottom:10px}:host(.in-item.checkbox-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.checkbox-label-placement-stacked) .native-wrapper{margin-bottom:10px}.label-text-wrapper-hidden{display:none}input{display:none}:host(:focus){outline:none}.native-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center}.checkbox-icon{border-radius:var(--border-radius);position:relative;width:var(--size);height:var(--size);-webkit-transition:var(--transition);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--checkbox-background);-webkit-box-sizing:border-box;box-sizing:border-box}.checkbox-icon path{fill:none;stroke:var(--checkmark-color);stroke-width:var(--checkmark-width);opacity:0}:host(.ion-focused) .native-wrapper::after{border-radius:50%;display:block;position:absolute;width:36px;height:36px;background:var(--ion-color-primary-tint, #1a65eb);content:"";opacity:0.2;inset-block-start:calc(50% - 36px / 2);inset-inline-start:calc(50% - 36px / 2)}.checkbox-bottom{padding-top:4px;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;font-size:0.75rem;white-space:normal}:host(.checkbox-label-placement-stacked) .checkbox-bottom{font-size:1rem}.checkbox-bottom .error-text{display:none;color:var(--ion-color-danger, #c5000f)}.checkbox-bottom .helper-text{display:block;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d))}:host(.ion-touched.ion-invalid) .checkbox-bottom .error-text{display:block}:host(.ion-touched.ion-invalid) .checkbox-bottom .helper-text{display:none}:host(.checkbox-label-placement-start) .checkbox-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.checkbox-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.checkbox-label-placement-end) .checkbox-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse;-ms-flex-pack:start;justify-content:start}:host(.checkbox-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host(.checkbox-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.checkbox-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.checkbox-label-placement-stacked) .checkbox-wrapper{-ms-flex-direction:column;flex-direction:column;text-align:center}:host(.checkbox-label-placement-stacked) .label-text-wrapper{-webkit-transform:scale(0.75);transform:scale(0.75);margin-left:0;margin-right:0;margin-bottom:16px;max-width:calc(100% / 0.75)}:host(.checkbox-label-placement-stacked.checkbox-alignment-start) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top}:host-context([dir=rtl]):host(.checkbox-label-placement-stacked.checkbox-alignment-start) .label-text-wrapper,:host-context([dir=rtl]).checkbox-label-placement-stacked.checkbox-alignment-start .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){:host(.checkbox-label-placement-stacked.checkbox-alignment-start:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}}:host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper{-webkit-transform-origin:center top;transform-origin:center top}:host-context([dir=rtl]):host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper,:host-context([dir=rtl]).checkbox-label-placement-stacked.checkbox-alignment-center .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}@supports selector(:dir(rtl)){:host(.checkbox-label-placement-stacked.checkbox-alignment-center:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}}:host(.checkbox-justify-space-between) .checkbox-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.checkbox-justify-start) .checkbox-wrapper{-ms-flex-pack:start;justify-content:start}:host(.checkbox-justify-end) .checkbox-wrapper{-ms-flex-pack:end;justify-content:end}:host(.checkbox-alignment-start) .checkbox-wrapper{-ms-flex-align:start;align-items:start}:host(.checkbox-alignment-center) .checkbox-wrapper{-ms-flex-align:center;align-items:center}:host(.checkbox-justify-space-between),:host(.checkbox-justify-start),:host(.checkbox-justify-end),:host(.checkbox-alignment-start),:host(.checkbox-alignment-center){display:block}:host(.checkbox-checked) .checkbox-icon,:host(.checkbox-indeterminate) .checkbox-icon{border-color:var(--border-color-checked);background:var(--checkbox-background-checked)}:host(.checkbox-checked) .checkbox-icon path,:host(.checkbox-indeterminate) .checkbox-icon path{opacity:1}:host(.checkbox-disabled){pointer-events:none}:host{--border-radius:50%;--border-width:0.125rem;--border-style:solid;--border-color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.23);--checkbox-background:var(--ion-item-background, var(--ion-background-color, #fff));--size:min(1.375rem, 55.836px);--checkmark-width:1.5px}:host(.checkbox-disabled){opacity:0.3}`;
 
@@ -19,100 +19,105 @@ const Checkbox = class {
         this.ionChange = createEvent(this, "ionChange", 7);
         this.ionFocus = createEvent(this, "ionFocus", 7);
         this.ionBlur = createEvent(this, "ionBlur", 7);
-        this.inputId = `ion-cb-${checkboxIds++}`;
-        this.inputLabelId = `${this.inputId}-lbl`;
-        this.helperTextId = `${this.inputId}-helper-text`;
-        this.errorTextId = `${this.inputId}-error-text`;
-        this.inheritedAttributes = {};
-        /**
-         * The name of the control, which is submitted with the form data.
-         */
-        this.name = this.inputId;
-        /**
-         * If `true`, the checkbox is selected.
-         */
-        this.checked = false;
-        /**
-         * If `true`, the checkbox will visually appear as indeterminate.
-         */
-        this.indeterminate = false;
-        /**
-         * If `true`, the user cannot interact with the checkbox.
-         */
-        this.disabled = false;
-        /**
-         * The value of the checkbox does not mean if it's checked or not, use the `checked`
-         * property for that.
-         *
-         * The value of a checkbox is analogous to the value of an `<input type="checkbox">`,
-         * it's only used when the checkbox participates in a native `<form>`.
-         */
-        this.value = 'on';
-        /**
-         * Where to place the label relative to the checkbox.
-         * `"start"`: The label will appear to the left of the checkbox in LTR and to the right in RTL.
-         * `"end"`: The label will appear to the right of the checkbox in LTR and to the left in RTL.
-         * `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
-         * `"stacked"`: The label will appear above the checkbox regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
-         */
-        this.labelPlacement = 'start';
-        /**
-         * If true, screen readers will announce it as a required field. This property
-         * works only for accessibility purposes, it will not prevent the form from
-         * submitting if the value is invalid.
-         */
-        this.required = false;
-        /**
-         * Track validation state for proper aria-live announcements.
-         */
-        this.isInvalid = false;
-        this.hasLabelContent = false;
-        /**
-         * Sets the checked property and emits
-         * the ionChange event. Use this to update the
-         * checked state in response to user-generated
-         * actions such as a click.
-         */
-        this.setChecked = (state) => {
-            const isChecked = (this.checked = state);
-            this.ionChange.emit({
-                checked: isChecked,
-                value: this.value,
-            });
-        };
-        this.toggleChecked = (ev) => {
-            ev.preventDefault();
-            this.setChecked(!this.checked);
-            this.indeterminate = false;
-        };
-        this.onFocus = () => {
-            this.ionFocus.emit();
-        };
-        this.onBlur = () => {
-            this.ionBlur.emit();
-        };
-        this.onKeyDown = (ev) => {
-            if (ev.key === ' ') {
-                ev.preventDefault();
-                if (!this.disabled) {
-                    this.toggleChecked(ev);
-                }
-            }
-        };
-        this.onClick = (ev) => {
-            if (this.disabled) {
-                return;
-            }
-            this.toggleChecked(ev);
-        };
-        /**
-         * Stops propagation when the display label is clicked,
-         * otherwise, two clicks will be triggered.
-         */
-        this.onDivLabelClick = (ev) => {
-            ev.stopPropagation();
-        };
     }
+    inputId = `ion-cb-${checkboxIds++}`;
+    inputLabelId = `${this.inputId}-lbl`;
+    helperTextId = `${this.inputId}-helper-text`;
+    errorTextId = `${this.inputId}-error-text`;
+    inheritedAttributes = {};
+    validationObserver;
+    itemFocusObserver;
+    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 name of the control, which is submitted with the form data.
+     */
+    name = this.inputId;
+    /**
+     * If `true`, the checkbox is selected.
+     */
+    checked = false;
+    /**
+     * If `true`, the checkbox will visually appear as indeterminate.
+     */
+    indeterminate = false;
+    /**
+     * If `true`, the user cannot interact with the checkbox.
+     */
+    disabled = false;
+    /**
+     * Text that is placed under the checkbox label and displayed when an error is detected.
+     */
+    errorText;
+    /**
+     * Text that is placed under the checkbox label and displayed when no error is detected.
+     */
+    helperText;
+    /**
+     * The value of the checkbox does not mean if it's checked or not, use the `checked`
+     * property for that.
+     *
+     * The value of a checkbox is analogous to the value of an `<input type="checkbox">`,
+     * it's only used when the checkbox participates in a native `<form>`.
+     */
+    value = 'on';
+    /**
+     * Where to place the label relative to the checkbox.
+     * `"start"`: The label will appear to the left of the checkbox in LTR and to the right in RTL.
+     * `"end"`: The label will appear to the right of the checkbox in LTR and to the left in RTL.
+     * `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+     * `"stacked"`: The label will appear above the checkbox regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
+     */
+    labelPlacement = 'start';
+    /**
+     * How to pack the label and checkbox within a line.
+     * `"start"`: The label and checkbox will appear on the left in LTR and
+     * on the right in RTL.
+     * `"end"`: The label and checkbox will appear on the right in LTR and
+     * on the left in RTL.
+     * `"space-between"`: The label and checkbox will appear on opposite
+     * ends of the line with space between the two elements.
+     * Setting this property will change the checkbox `display` to `block`.
+     */
+    justify;
+    /**
+     * How to control the alignment of the checkbox and label on the cross axis.
+     * `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL.
+     * `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
+     * Setting this property will change the checkbox `display` to `block`.
+     */
+    alignment;
+    /**
+     * If true, screen readers will announce it as a required field. This property
+     * works only for accessibility purposes, it will not prevent the form from
+     * submitting if the value is invalid.
+     */
+    required = false;
+    /**
+     * Track validation state for proper aria-live announcements.
+     */
+    isInvalid = false;
+    hasLabelContent = false;
+    hintTextId;
+    /**
+     * Emitted when the checked property has changed as a result of a user action such as a click.
+     *
+     * This event will not emit when programmatically setting the `checked` property.
+     */
+    ionChange;
+    /**
+     * Emitted when the checkbox has focus.
+     */
+    ionFocus;
+    /**
+     * Emitted when the checkbox loses focus.
+     */
+    ionBlur;
     connectedCallback() {
         const { el } = this;
         if (typeof MutationObserver !== 'undefined') {
@@ -164,7 +169,9 @@ const Checkbox = class {
         this.itemFocusObserver = createItemMultipleInputsObserver(el, () => forceUpdate(this));
     }
     componentWillLoad() {
-        this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
+        this.inheritedAttributes = {
+            ...inheritAriaAttributes(this.el),
+        };
         this.hintTextId = this.getHintTextId();
     }
     disconnectedCallback() {
@@ -181,6 +188,51 @@ const Checkbox = class {
     async setFocus() {
         this.el.focus();
     }
+    /**
+     * Sets the checked property and emits
+     * the ionChange event. Use this to update the
+     * checked state in response to user-generated
+     * actions such as a click.
+     */
+    setChecked = (state) => {
+        const isChecked = (this.checked = state);
+        this.ionChange.emit({
+            checked: isChecked,
+            value: this.value,
+        });
+    };
+    toggleChecked = (ev) => {
+        ev.preventDefault();
+        this.setChecked(!this.checked);
+        this.indeterminate = false;
+    };
+    onFocus = () => {
+        this.ionFocus.emit();
+    };
+    onBlur = () => {
+        this.ionBlur.emit();
+    };
+    onKeyDown = (ev) => {
+        if (ev.key === ' ') {
+            ev.preventDefault();
+            if (!this.disabled) {
+                this.toggleChecked(ev);
+            }
+        }
+    };
+    onClick = (ev) => {
+        if (this.disabled) {
+            return;
+        }
+        this.toggleChecked(ev);
+    };
+    /**
+     * Stops propagation when the display label is clicked,
+     * otherwise, two clicks will be triggered.
+     */
+    onDivLabelClick = (ev) => {
+        ev.stopPropagation();
+    };
     getHintTextId() {
         const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
         if (isInvalid && errorText) {
@@ -229,7 +281,7 @@ const Checkbox = class {
                 [`checkbox-justify-${justify}`]: justify !== undefined,
                 [`checkbox-alignment-${alignment}`]: alignment !== undefined,
                 [`checkbox-label-placement-${labelPlacement}`]: true,
-            }) }, h("label", { key: 'acca2f5b0a37aa70930b2f74ff4857939b2be2b0', class: "checkbox-wrapper", htmlFor: inputId }, h("input", Object.assign({ key: 'f46e409383e9d3ffc3daae8e7cd4159427d4c8fe', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, required: required }, inheritedAttributes)), h("div", { key: '69d8bf21c781cd9b1f56ceae40ff7911e6f5adfe', class: {
+            }) }, h("label", { key: 'acca2f5b0a37aa70930b2f74ff4857939b2be2b0', class: "checkbox-wrapper", htmlFor: inputId }, h("input", { key: 'f46e409383e9d3ffc3daae8e7cd4159427d4c8fe', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, required: required, ...inheritedAttributes }), h("div", { key: '69d8bf21c781cd9b1f56ceae40ff7911e6f5adfe', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !this.hasLabelContent,
             }, part: "label", id: this.inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: '3c444ab897456c522588fc6cee616030f16b0586' }), this.renderHintText()), h("div", { key: '0a18dfe7a68a8eec08ce8764bd2c8a59c4a38802', class: "native-wrapper" }, h("svg", { key: '56b298b54ebc88a429a9dd67b8dabd7063759b3a', class: "checkbox-icon", viewBox: "0 0 24 24", part: "container", "aria-hidden": "true" }, path)))));
@@ -241,7 +293,6 @@ const Checkbox = class {
         }
         return path;
     }
-    get el() { return getElement(this); }
 };
 let checkboxIds = 0;
 Checkbox.style = {

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

@@ -1,9 +1,9 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { r as registerInstance, h, d as Host } from './index-tcQvqkiX.js';
-import { c as createColorClasses } from './theme-DiVJyqlX.js';
-import { b as getIonMode } from './ionic-global-Cp_eT4sZ.js';
+import { r as registerInstance, h, d as Host } from './index-ChhhtsGZ.js';
+import { c as createColorClasses } from './theme-byZM6qHV.js';
+import { b as getIonMode } from './ionic-global-BVB7BrLT.js';
 
 const chipIosCss = () => `:host{--background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.12);--color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.87);border-radius:16px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-margin-start:4px;margin-inline-start:4px;-webkit-margin-end:4px;margin-inline-end:4px;margin-top:4px;margin-bottom:4px;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:6px;padding-bottom:6px;display:-ms-inline-flexbox;display:inline-flex;position:relative;-ms-flex-align:center;align-items:center;min-height:32px;background:var(--background);color:var(--color);font-family:var(--ion-font-family, inherit);cursor:pointer;overflow:hidden;vertical-align:middle;-webkit-box-sizing:border-box;box-sizing:border-box}:host(.chip-disabled){cursor:default;opacity:0.4;pointer-events:none}:host(.ion-color){background:rgba(var(--ion-color-base-rgb), 0.08);color:var(--ion-color-shade)}:host(.ion-color:focus){background:rgba(var(--ion-color-base-rgb), 0.12)}:host(.ion-color.ion-activated){background:rgba(var(--ion-color-base-rgb), 0.16)}:host(.chip-outline){border-width:1px;border-style:solid}:host(.chip-outline){border-color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.32);background:transparent}:host(.chip-outline.ion-color){border-color:rgba(var(--ion-color-base-rgb), 0.32)}:host(.chip-outline:not(.ion-color):focus){background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.04)}:host(.chip-outline.ion-activated:not(.ion-color)){background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.08)}::slotted(ion-icon){font-size:1.4285714286em}:host(:not(.ion-color)) ::slotted(ion-icon){color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54)}::slotted(ion-icon:first-child){-webkit-margin-start:-4px;margin-inline-start:-4px;-webkit-margin-end:8px;margin-inline-end:8px;margin-top:-4px;margin-bottom:-4px}::slotted(ion-icon:last-child){-webkit-margin-start:8px;margin-inline-start:8px;-webkit-margin-end:-4px;margin-inline-end:-4px;margin-top:-4px;margin-bottom:-4px}::slotted(ion-avatar){-ms-flex-negative:0;flex-shrink:0;width:1.7142857143em;height:1.7142857143em}::slotted(ion-avatar:first-child){-webkit-margin-start:-8px;margin-inline-start:-8px;-webkit-margin-end:8px;margin-inline-end:8px;margin-top:-4px;margin-bottom:-4px}::slotted(ion-avatar:last-child){-webkit-margin-start:8px;margin-inline-start:8px;-webkit-margin-end:-8px;margin-inline-end:-8px;margin-top:-4px;margin-bottom:-4px}:host(:focus){outline:none}:host(:focus){--background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.16)}:host(.ion-activated){--background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2)}@media (any-hover: hover){:host(:hover){--background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.16)}:host(.ion-color:hover){background:rgba(var(--ion-color-base-rgb), 0.12)}:host(.chip-outline:not(.ion-color):hover){background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.04)}}:host{font-size:clamp(13px, 0.875rem, 22px)}`;
 
@@ -12,15 +12,21 @@ const chipMdCss = () => `:host{--background:rgba(var(--ion-text-color-rgb, 0, 0,
 const Chip = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        /**
-         * Display an outline style button.
-         */
-        this.outline = false;
-        /**
-         * If `true`, the user cannot interact with the chip.
-         */
-        this.disabled = 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;
+    /**
+     * Display an outline style button.
+     */
+    outline = false;
+    /**
+     * If `true`, the user cannot interact with the chip.
+     */
+    disabled = false;
     render() {
         const mode = getIonMode(this);
         return (h(Host, { key: 'fa2e9a4837ef87a17ef10f388e8caa7f604d9145', "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {

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

@@ -1,8 +1,8 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { r as registerInstance, i as forceUpdate, h, d as Host } from './index-tcQvqkiX.js';
-import { b as getIonMode } from './ionic-global-Cp_eT4sZ.js';
+import { r as registerInstance, i as forceUpdate, h, d as Host } from './index-ChhhtsGZ.js';
+import { b as getIonMode } from './ionic-global-BVB7BrLT.js';
 
 const SIZE_TO_MEDIA = {
     xs: '(min-width: 0px)',
@@ -28,13 +28,132 @@ const matchBreakpoint = (breakpoint) => {
 const colCss = () => `:host{-webkit-padding-start:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));padding-inline-start:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));-webkit-padding-end:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));padding-inline-end:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));padding-top:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));padding-bottom:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;width:100%;max-width:100%;min-height:1px}@media (min-width: 576px){:host{-webkit-padding-start:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));padding-inline-start:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));-webkit-padding-end:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));padding-inline-end:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));padding-top:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));padding-bottom:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px))}}@media (min-width: 768px){:host{-webkit-padding-start:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));padding-inline-start:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));-webkit-padding-end:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));padding-inline-end:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));padding-top:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));padding-bottom:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px))}}@media (min-width: 992px){:host{-webkit-padding-start:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));padding-inline-start:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));-webkit-padding-end:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));padding-inline-end:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));padding-top:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));padding-bottom:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px))}}@media (min-width: 1200px){:host{-webkit-padding-start:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));padding-inline-start:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));-webkit-padding-end:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));padding-inline-end:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));padding-top:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));padding-bottom:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px))}}`;
 
 const win = typeof window !== 'undefined' ? window : undefined;
-// eslint-disable-next-line @typescript-eslint/prefer-optional-chain
 const SUPPORTS_VARS = win && !!(win.CSS && win.CSS.supports && win.CSS.supports('--a: 0'));
 const BREAKPOINTS = ['', 'xs', 'sm', 'md', 'lg', 'xl'];
 const Col = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
     }
+    /**
+     * The amount to offset the column, in terms of how many columns it should shift to the end
+     * of the total available.
+     */
+    offset;
+    /**
+     * The amount to offset the column for xs screens, in terms of how many columns it should shift
+     * to the end of the total available.
+     */
+    offsetXs;
+    /**
+     * The amount to offset the column for sm screens, in terms of how many columns it should shift
+     * to the end of the total available.
+     */
+    offsetSm;
+    /**
+     * The amount to offset the column for md screens, in terms of how many columns it should shift
+     * to the end of the total available.
+     */
+    offsetMd;
+    /**
+     * The amount to offset the column for lg screens, in terms of how many columns it should shift
+     * to the end of the total available.
+     */
+    offsetLg;
+    /**
+     * The amount to offset the column for xl screens, in terms of how many columns it should shift
+     * to the end of the total available.
+     */
+    offsetXl;
+    /**
+     * The amount to pull the column, in terms of how many columns it should shift to the start of
+     * the total available.
+     */
+    pull;
+    /**
+     * The amount to pull the column for xs screens, in terms of how many columns it should shift
+     * to the start of the total available.
+     */
+    pullXs;
+    /**
+     * The amount to pull the column for sm screens, in terms of how many columns it should shift
+     * to the start of the total available.
+     */
+    pullSm;
+    /**
+     * The amount to pull the column for md screens, in terms of how many columns it should shift
+     * to the start of the total available.
+     */
+    pullMd;
+    /**
+     * The amount to pull the column for lg screens, in terms of how many columns it should shift
+     * to the start of the total available.
+     */
+    pullLg;
+    /**
+     * The amount to pull the column for xl screens, in terms of how many columns it should shift
+     * to the start of the total available.
+     */
+    pullXl;
+    /**
+     * The amount to push the column, in terms of how many columns it should shift to the end
+     * of the total available.
+     */
+    push;
+    /**
+     * The amount to push the column for xs screens, in terms of how many columns it should shift
+     * to the end of the total available.
+     */
+    pushXs;
+    /**
+     * The amount to push the column for sm screens, in terms of how many columns it should shift
+     * to the end of the total available.
+     */
+    pushSm;
+    /**
+     * The amount to push the column for md screens, in terms of how many columns it should shift
+     * to the end of the total available.
+     */
+    pushMd;
+    /**
+     * The amount to push the column for lg screens, in terms of how many columns it should shift
+     * to the end of the total available.
+     */
+    pushLg;
+    /**
+     * The amount to push the column for xl screens, in terms of how many columns it should shift
+     * to the end of the total available.
+     */
+    pushXl;
+    /**
+     * The size of the column, in terms of how many columns it should take up out of the total
+     * available. If `"auto"` is passed, the column will be the size of its content.
+     */
+    size;
+    /**
+     * The size of the column for xs screens, in terms of how many columns it should take up out
+     * of the total available. If `"auto"` is passed, the column will be the size of its content.
+     */
+    sizeXs;
+    /**
+     * The size of the column for sm screens, in terms of how many columns it should take up out
+     * of the total available. If `"auto"` is passed, the column will be the size of its content.
+     */
+    sizeSm;
+    /**
+     * The size of the column for md screens, in terms of how many columns it should take up out
+     * of the total available. If `"auto"` is passed, the column will be the size of its content.
+     */
+    sizeMd;
+    /**
+     * The size of the column for lg screens, in terms of how many columns it should take up out
+     * of the total available. If `"auto"` is passed, the column will be the size of its content.
+     */
+    sizeLg;
+    /**
+     * The size of the column for xl screens, in terms of how many columns it should take up out
+     * of the total available. If `"auto"` is passed, the column will be the size of its content.
+     */
+    sizeXl;
     onResize() {
         forceUpdate(this);
     }
@@ -111,9 +230,14 @@ const Col = class {
     render() {
         const isRTL = document.dir === 'rtl';
         const mode = getIonMode(this);
-        return (h(Host, { key: '32ed75d81dd09d9bc8999f6d42e5b3cb99c84d91', class: {
+        return (h(Host, { key: 'e12293a4315cb474bbde73421dd0b4129f1df1cc', class: {
                 [mode]: true,
-            }, style: Object.assign(Object.assign(Object.assign(Object.assign({}, this.calculateOffset(isRTL)), this.calculatePull(isRTL)), this.calculatePush(isRTL)), this.calculateSize()) }, h("slot", { key: '38f8d0440c20cc6d1b1d6a654d07f16de61d8134' })));
+            }, style: {
+                ...this.calculateOffset(isRTL),
+                ...this.calculatePull(isRTL),
+                ...this.calculatePush(isRTL),
+                ...this.calculateSize(),
+            } }, h("slot", { key: '869317ea6574111a57a7a9d096c53d264c335d28' })));
     }
 };
 Col.style = colCss();
@@ -123,11 +247,11 @@ const gridCss = () => `:host{-webkit-padding-start:var(--ion-grid-padding-xs, va
 const Grid = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        /**
-         * If `true`, the grid will have a fixed width based on the screen size.
-         */
-        this.fixed = false;
     }
+    /**
+     * If `true`, the grid will have a fixed width based on the screen size.
+     */
+    fixed = false;
     render() {
         const mode = getIonMode(this);
         return (h(Host, { key: '617127ecfabf9bf615bef1dda1be3fed5a065949', class: {
@@ -145,7 +269,7 @@ const Row = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '8ba906a8cbea060a79ed658c9bf34906f0c11d38', class: getIonMode(this) }, h("slot", { key: 'd1009176f45b588fa52c7d9eb336f3c6d3214bb8' })));
+        return (h(Host, { key: '12b7419dd67ff18dd00e1bf5093299bd94c75503', class: getIonMode(this) }, h("slot", { key: '43fc76a289ecaf398a77a90034ee576003a826fd' })));
     }
 };
 Row.style = rowCss();