voyager-ionic-core 7.2.3-tweak

package/dist/cjs/ion-card_5.cjs.entry.js

@@ -0,0 +1,164 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-b358eb23.js');
+const helpers = require('./helpers-77560954.js');
+const theme = require('./theme-e6fec71e.js');
+const ionicGlobal = require('./ionic-global-5e671da5.js');
+
+const cardIosCss = ":host{--ion-safe-area-left:0px;--ion-safe-area-right:0px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;position:relative;background:var(--background);color:var(--color);font-family:var(--ion-font-family, inherit);contain:content;overflow:hidden}:host(.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.card-disabled){cursor:default;opacity:0.3;pointer-events:none}.card-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;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:block;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:inherit}.card-native::-moz-focus-inner{border:0}button,a{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none}ion-ripple-effect{color:var(--ripple-color)}:host{--background:var(--ion-card-background, var(--ion-item-background, var(--ion-background-color, #fff)));--color:var(--ion-card-color, var(--ion-item-color, var(--ion-color-step-600, #666666)));-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:24px;margin-bottom:24px;border-radius:8px;-webkit-transition:-webkit-transform 500ms cubic-bezier(0.12, 0.72, 0.29, 1);transition:-webkit-transform 500ms cubic-bezier(0.12, 0.72, 0.29, 1);transition:transform 500ms cubic-bezier(0.12, 0.72, 0.29, 1);transition:transform 500ms cubic-bezier(0.12, 0.72, 0.29, 1), -webkit-transform 500ms cubic-bezier(0.12, 0.72, 0.29, 1);font-size:14px;-webkit-box-shadow:0 4px 16px rgba(0, 0, 0, 0.12);box-shadow:0 4px 16px rgba(0, 0, 0, 0.12)}:host(.ion-activated){-webkit-transform:scale3d(0.97, 0.97, 1);transform:scale3d(0.97, 0.97, 1)}";
+
+const cardMdCss = ":host{--ion-safe-area-left:0px;--ion-safe-area-right:0px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;position:relative;background:var(--background);color:var(--color);font-family:var(--ion-font-family, inherit);contain:content;overflow:hidden}:host(.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.card-disabled){cursor:default;opacity:0.3;pointer-events:none}.card-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;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:block;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:inherit}.card-native::-moz-focus-inner{border:0}button,a{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none}ion-ripple-effect{color:var(--ripple-color)}:host{--background:var(--ion-card-background, var(--ion-item-background, var(--ion-background-color, #fff)));--color:var(--ion-card-color, var(--ion-item-color, var(--ion-color-step-550, #737373)));-webkit-margin-start:10px;margin-inline-start:10px;-webkit-margin-end:10px;margin-inline-end:10px;margin-top:10px;margin-bottom:10px;border-radius:4px;font-size:14px;-webkit-box-shadow:0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);box-shadow:0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)}";
+
+const Card = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.inheritedAriaAttributes = {};
+    this.color = undefined;
+    this.button = false;
+    this.type = 'button';
+    this.disabled = false;
+    this.download = undefined;
+    this.href = undefined;
+    this.rel = undefined;
+    this.routerDirection = 'forward';
+    this.routerAnimation = undefined;
+    this.target = undefined;
+  }
+  componentWillLoad() {
+    this.inheritedAriaAttributes = helpers.inheritAttributes(this.el, ['aria-label']);
+  }
+  isClickable() {
+    return this.href !== undefined || this.button;
+  }
+  renderCard(mode) {
+    const clickable = this.isClickable();
+    if (!clickable) {
+      return [index.h("slot", null)];
+    }
+    const { href, routerAnimation, routerDirection, inheritedAriaAttributes } = this;
+    const TagType = clickable ? (href === undefined ? 'button' : 'a') : 'div';
+    const attrs = TagType === 'button'
+      ? { type: this.type }
+      : {
+        download: this.download,
+        href: this.href,
+        rel: this.rel,
+        target: this.target,
+      };
+    return (index.h(TagType, Object.assign({}, attrs, inheritedAriaAttributes, { class: "card-native", part: "native", disabled: this.disabled, onClick: (ev) => theme.openURL(href, ev, routerDirection, routerAnimation) }), index.h("slot", null), clickable && mode === 'md' && index.h("ion-ripple-effect", null)));
+  }
+  render() {
+    const mode = ionicGlobal.getIonMode(this);
+    return (index.h(index.Host, { class: theme.createColorClasses(this.color, {
+        [mode]: true,
+        'card-disabled': this.disabled,
+        'ion-activatable': this.isClickable(),
+      }) }, this.renderCard(mode)));
+  }
+  get el() { return index.getElement(this); }
+};
+Card.style = {
+  ios: cardIosCss,
+  md: cardMdCss
+};
+
+const cardContentIosCss = "ion-card-content{display:block;position:relative}.card-content-ios{-webkit-padding-start:20px;padding-inline-start:20px;-webkit-padding-end:20px;padding-inline-end:20px;padding-top:20px;padding-bottom:20px;font-size:16px;line-height:1.4}.card-content-ios h1{margin-left:0;margin-right:0;margin-top:0;margin-bottom:2px;font-size:24px;font-weight:normal}.card-content-ios h2{margin-left:0;margin-right:0;margin-top:2px;margin-bottom:2px;font-size:16px;font-weight:normal}.card-content-ios h3,.card-content-ios h4,.card-content-ios h5,.card-content-ios h6{margin-left:0;margin-right:0;margin-top:2px;margin-bottom:2px;font-size:14px;font-weight:normal}.card-content-ios p{margin-left:0;margin-right:0;margin-top:0;margin-bottom:2px;font-size:14px}ion-card-header+.card-content-ios{padding-top:0}";
+
+const cardContentMdCss = "ion-card-content{display:block;position:relative}.card-content-md{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:13px;padding-bottom:13px;font-size:14px;line-height:1.5}.card-content-md h1{margin-left:0;margin-right:0;margin-top:0;margin-bottom:2px;font-size:24px;font-weight:normal}.card-content-md h2{margin-left:0;margin-right:0;margin-top:2px;margin-bottom:2px;font-size:16px;font-weight:normal}.card-content-md h3,.card-content-md h4,.card-content-md h5,.card-content-md h6{margin-left:0;margin-right:0;margin-top:2px;margin-bottom:2px;font-size:14px;font-weight:normal}.card-content-md p{margin-left:0;margin-right:0;margin-top:0;margin-bottom:2px;font-size:14px;font-weight:normal;line-height:1.5}ion-card-header+.card-content-md{padding-top:0}";
+
+const CardContent = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    const mode = ionicGlobal.getIonMode(this);
+    return (index.h(index.Host, { class: {
+        [mode]: true,
+        // Used internally for styling
+        [`card-content-${mode}`]: true,
+      } }));
+  }
+};
+CardContent.style = {
+  ios: cardContentIosCss,
+  md: cardContentMdCss
+};
+
+const cardHeaderIosCss = ":host{--background:transparent;--color:inherit;display:-ms-flexbox;display:flex;position:relative;-ms-flex-direction:column;flex-direction:column;background:var(--background);color:var(--color)}:host(.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}:host{-webkit-padding-start:20px;padding-inline-start:20px;-webkit-padding-end:20px;padding-inline-end:20px;padding-top:20px;padding-bottom:16px;-ms-flex-direction:column-reverse;flex-direction:column-reverse}@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){:host(.card-header-translucent){background-color:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.9);-webkit-backdrop-filter:saturate(180%) blur(30px);backdrop-filter:saturate(180%) blur(30px)}}";
+
+const cardHeaderMdCss = ":host{--background:transparent;--color:inherit;display:-ms-flexbox;display:flex;position:relative;-ms-flex-direction:column;flex-direction:column;background:var(--background);color:var(--color)}:host(.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}:host{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:16px;padding-bottom:16px}::slotted(ion-card-title:not(:first-child)),::slotted(ion-card-subtitle:not(:first-child)){margin-top:8px}";
+
+const CardHeader = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.color = undefined;
+    this.translucent = false;
+  }
+  render() {
+    const mode = ionicGlobal.getIonMode(this);
+    return (index.h(index.Host, { class: theme.createColorClasses(this.color, {
+        'card-header-translucent': this.translucent,
+        'ion-inherit-color': true,
+        [mode]: true,
+      }) }, index.h("slot", null)));
+  }
+};
+CardHeader.style = {
+  ios: cardHeaderIosCss,
+  md: cardHeaderMdCss
+};
+
+const cardSubtitleIosCss = ":host{display:block;position:relative;color:var(--color)}:host(.ion-color){color:var(--ion-color-base)}:host{--color:var(--ion-color-step-600, #666666);margin-left:0;margin-right:0;margin-top:0;margin-bottom:4px;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;font-size:12px;font-weight:700;letter-spacing:0.4px;text-transform:uppercase}";
+
+const cardSubtitleMdCss = ":host{display:block;position:relative;color:var(--color)}:host(.ion-color){color:var(--ion-color-base)}:host{--color:var(--ion-color-step-550, #737373);margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;font-size:14px;font-weight:500}";
+
+const CardSubtitle = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.color = undefined;
+  }
+  render() {
+    const mode = ionicGlobal.getIonMode(this);
+    return (index.h(index.Host, { role: "heading", "aria-level": "3", class: theme.createColorClasses(this.color, {
+        'ion-inherit-color': true,
+        [mode]: true,
+      }) }, index.h("slot", null)));
+  }
+};
+CardSubtitle.style = {
+  ios: cardSubtitleIosCss,
+  md: cardSubtitleMdCss
+};
+
+const cardTitleIosCss = ":host{display:block;position:relative;color:var(--color)}:host(.ion-color){color:var(--ion-color-base)}:host{--color:var(--ion-text-color, #000);margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;font-size:28px;font-weight:700;line-height:1.2}";
+
+const cardTitleMdCss = ":host{display:block;position:relative;color:var(--color)}:host(.ion-color){color:var(--ion-color-base)}:host{--color:var(--ion-color-step-850, #262626);margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;font-size:20px;font-weight:500;line-height:1.2}";
+
+const CardTitle = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.color = undefined;
+  }
+  render() {
+    const mode = ionicGlobal.getIonMode(this);
+    return (index.h(index.Host, { role: "heading", "aria-level": "2", class: theme.createColorClasses(this.color, {
+        'ion-inherit-color': true,
+        [mode]: true,
+      }) }, index.h("slot", null)));
+  }
+};
+CardTitle.style = {
+  ios: cardTitleIosCss,
+  md: cardTitleMdCss
+};
+
+exports.ion_card = Card;
+exports.ion_card_content = CardContent;
+exports.ion_card_header = CardHeader;
+exports.ion_card_subtitle = CardSubtitle;
+exports.ion_card_title = CardTitle;

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

@@ -0,0 +1,168 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-b358eb23.js');
+const formController = require('./form-controller-d42b8c05.js');
+const helpers = require('./helpers-77560954.js');
+const index$1 = require('./index-79605113.js');
+const theme = require('./theme-e6fec71e.js');
+const ionicGlobal = require('./ionic-global-5e671da5.js');
+
+const checkboxIosCss = ":host{--checkbox-background-checked:var(--ion-color-primary, #3880ff);--border-color-checked:var(--ion-color-primary, #3880ff);--checkmark-color:var(--ion-color-primary-contrast, #fff);--checkmark-width:1;--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){width:100%;height:100%}:host([slot=start]:not(.legacy-checkbox)),:host([slot=end]:not(.legacy-checkbox)){width:auto}:host(.legacy-checkbox){width:var(--size);height:var(--size)}:host(.ion-color){--checkbox-background-checked:var(--ion-color-base);--border-color-checked:var(--ion-color-base);--checkmark-color:var(--ion-color-contrast)}:host(.legacy-checkbox) label{top:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;position:absolute;width:100%;height:100%;border:0;background:transparent;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;opacity:0}@supports (inset-inline-start: 0){:host(.legacy-checkbox) label{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host(.legacy-checkbox) label{left:0}:host-context([dir=rtl]):host(.legacy-checkbox) label,:host-context([dir=rtl]).legacy-checkbox label{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host(.legacy-checkbox) label:dir(rtl){left:unset;right:unset;right:0}}}:host(.legacy-checkbox) label::-moz-focus-inner{border:0}.checkbox-wrapper{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;height:inherit;cursor:inherit}.label-text-wrapper{pointer-events:none;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.in-item:not(.legacy-checkbox)) .label-text-wrapper{margin-top:10px;margin-bottom:10px}.label-text-wrapper-hidden{display:none}input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.checkbox-icon{border-radius:var(--border-radius);position:relative;-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}:host(.legacy-checkbox) .checkbox-icon{display:block;width:100%;height:100%}:host(:not(.legacy-checkbox)) .checkbox-icon{width:var(--size);height:var(--size)}.checkbox-icon path{fill:none;stroke:var(--checkmark-color);stroke-width:var(--checkmark-width);opacity:0}: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-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}: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-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:1px;--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:26px}:host(.checkbox-disabled){opacity:0.3}:host(.in-item.legacy-checkbox){-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:8px;margin-inline-end:8px;margin-top:10px;margin-bottom:9px;display:block;position:static}:host(.in-item.legacy-checkbox[slot=start]){-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:8px;margin-bottom:8px}";
+
+const checkboxMdCss = ":host{--checkbox-background-checked:var(--ion-color-primary, #3880ff);--border-color-checked:var(--ion-color-primary, #3880ff);--checkmark-color:var(--ion-color-primary-contrast, #fff);--checkmark-width:1;--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){width:100%;height:100%}:host([slot=start]:not(.legacy-checkbox)),:host([slot=end]:not(.legacy-checkbox)){width:auto}:host(.legacy-checkbox){width:var(--size);height:var(--size)}:host(.ion-color){--checkbox-background-checked:var(--ion-color-base);--border-color-checked:var(--ion-color-base);--checkmark-color:var(--ion-color-contrast)}:host(.legacy-checkbox) label{top:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;position:absolute;width:100%;height:100%;border:0;background:transparent;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;opacity:0}@supports (inset-inline-start: 0){:host(.legacy-checkbox) label{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host(.legacy-checkbox) label{left:0}:host-context([dir=rtl]):host(.legacy-checkbox) label,:host-context([dir=rtl]).legacy-checkbox label{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host(.legacy-checkbox) label:dir(rtl){left:unset;right:unset;right:0}}}:host(.legacy-checkbox) label::-moz-focus-inner{border:0}.checkbox-wrapper{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;height:inherit;cursor:inherit}.label-text-wrapper{pointer-events:none;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.in-item:not(.legacy-checkbox)) .label-text-wrapper{margin-top:10px;margin-bottom:10px}.label-text-wrapper-hidden{display:none}input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.checkbox-icon{border-radius:var(--border-radius);position:relative;-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}:host(.legacy-checkbox) .checkbox-icon{display:block;width:100%;height:100%}:host(:not(.legacy-checkbox)) .checkbox-icon{width:var(--size);height:var(--size)}.checkbox-icon path{fill:none;stroke:var(--checkmark-color);stroke-width:var(--checkmark-width);opacity:0}: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-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}: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-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:calc(var(--size) * .125);--border-width:2px;--border-style:solid;--border-color:rgb(var(--ion-text-color-rgb, 0, 0, 0), 0.6);--checkmark-width:3;--checkbox-background:var(--ion-item-background, var(--ion-background-color, #fff));--transition:background 180ms cubic-bezier(0.4, 0, 0.2, 1);--size:18px}.checkbox-icon path{stroke-dasharray:30;stroke-dashoffset:30}:host(.checkbox-checked) .checkbox-icon path,:host(.checkbox-indeterminate) .checkbox-icon path{stroke-dashoffset:0;-webkit-transition:stroke-dashoffset 90ms linear 90ms;transition:stroke-dashoffset 90ms linear 90ms}:host(.legacy-checkbox.checkbox-disabled),:host(.checkbox-disabled) .label-text-wrapper{opacity:0.38}:host(.checkbox-disabled) .native-wrapper{opacity:0.63}:host(.in-item.legacy-checkbox){margin-left:0;margin-right:0;margin-top:18px;margin-bottom:18px;display:block;position:static}:host(.in-item.legacy-checkbox[slot=start]){-webkit-margin-start:4px;margin-inline-start:4px;-webkit-margin-end:36px;margin-inline-end:36px;margin-top:18px;margin-bottom:18px}";
+
+const Checkbox = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ionChange = index.createEvent(this, "ionChange", 7);
+    this.ionFocus = index.createEvent(this, "ionFocus", 7);
+    this.ionBlur = index.createEvent(this, "ionBlur", 7);
+    this.ionStyle = index.createEvent(this, "ionStyle", 7);
+    this.inputId = `ion-cb-${checkboxIds++}`;
+    this.inheritedAttributes = {};
+    // TODO(FW-3100): remove this
+    // This flag ensures we log the deprecation warning at most once.
+    this.hasLoggedDeprecationWarning = 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.setFocus();
+      this.setChecked(!this.checked);
+      this.indeterminate = false;
+    };
+    this.onFocus = () => {
+      this.ionFocus.emit();
+    };
+    this.onBlur = () => {
+      this.ionBlur.emit();
+    };
+    this.color = undefined;
+    this.name = this.inputId;
+    this.checked = false;
+    this.indeterminate = false;
+    this.disabled = false;
+    this.value = 'on';
+    this.labelPlacement = 'start';
+    this.justify = 'space-between';
+    this.legacy = undefined;
+  }
+  // TODO(FW-3100): remove this
+  connectedCallback() {
+    this.legacyFormController = formController.createLegacyFormController(this.el);
+  }
+  componentWillLoad() {
+    this.emitStyle();
+    // TODO(FW-3100): remove check
+    if (!this.legacyFormController.hasLegacyControl()) {
+      this.inheritedAttributes = Object.assign({}, helpers.inheritAriaAttributes(this.el));
+    }
+  }
+  styleChanged() {
+    this.emitStyle();
+  }
+  emitStyle() {
+    const style = {
+      'interactive-disabled': this.disabled,
+    };
+    // TODO(FW-3100): remove this
+    if (this.legacyFormController.hasLegacyControl()) {
+      style['checkbox-checked'] = this.checked;
+    }
+    this.ionStyle.emit(style);
+  }
+  setFocus() {
+    if (this.focusEl) {
+      this.focusEl.focus();
+    }
+  }
+  // TODO(FW-3100): run contents of renderCheckbox directly instead
+  render() {
+    const { legacyFormController } = this;
+    return legacyFormController.hasLegacyControl() ? this.renderLegacyCheckbox() : this.renderCheckbox();
+  }
+  renderCheckbox() {
+    const { color, checked, disabled, el, getSVGPath, indeterminate, inheritedAttributes, inputId, justify, labelPlacement, name, value, } = this;
+    const mode = ionicGlobal.getIonMode(this);
+    const path = getSVGPath(mode, indeterminate);
+    helpers.renderHiddenInput(true, el, name, checked ? value : '', disabled);
+    return (index.h(index.Host, { class: theme.createColorClasses(color, {
+        [mode]: true,
+        'in-item': theme.hostContext('ion-item', el),
+        'checkbox-checked': checked,
+        'checkbox-disabled': disabled,
+        'checkbox-indeterminate': indeterminate,
+        interactive: true,
+        [`checkbox-justify-${justify}`]: true,
+        [`checkbox-label-placement-${labelPlacement}`]: true,
+      }) }, index.h("label", { class: "checkbox-wrapper" }, index.h("input", Object.assign({ type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, inheritedAttributes)), index.h("div", { class: {
+        'label-text-wrapper': true,
+        'label-text-wrapper-hidden': el.textContent === '',
+      } }, index.h("slot", null)), index.h("div", { class: "native-wrapper" }, index.h("svg", { class: "checkbox-icon", viewBox: "0 0 24 24", part: "container" }, path)))));
+  }
+  // TODO(FW-3100): remove this
+  renderLegacyCheckbox() {
+    if (!this.hasLoggedDeprecationWarning) {
+      index$1.printIonWarning(`ion-checkbox now requires providing a label with either the default slot or the "aria-label" attribute. To migrate, remove any usage of "ion-label" and pass the label text to either the component or the "aria-label" attribute.
+
+Example: <ion-checkbox>Label</ion-checkbox>
+Example with aria-label: <ion-checkbox aria-label="Label"></ion-checkbox>
+
+Developers can use the "legacy" property to continue using the legacy form markup. This property will be removed in an upcoming major release of Ionic where this form control will use the modern form markup.`, this.el);
+      if (this.legacy) {
+        index$1.printIonWarning(`ion-checkbox is being used with the "legacy" property enabled which will forcibly enable the legacy form markup. This property will be removed in an upcoming major release of Ionic where this form control will use the modern form markup.
+Developers can dismiss this warning by removing their usage of the "legacy" property and using the new checkbox syntax.`, this.el);
+      }
+      this.hasLoggedDeprecationWarning = true;
+    }
+    const { color, checked, disabled, el, getSVGPath, indeterminate, inputId, name, value } = this;
+    const mode = ionicGlobal.getIonMode(this);
+    const { label, labelId, labelText } = helpers.getAriaLabel(el, inputId);
+    const path = getSVGPath(mode, indeterminate);
+    helpers.renderHiddenInput(true, el, name, checked ? value : '', disabled);
+    return (index.h(index.Host, { "aria-labelledby": label ? labelId : null, "aria-checked": `${checked}`, "aria-hidden": disabled ? 'true' : null, role: "checkbox", class: theme.createColorClasses(color, {
+        [mode]: true,
+        'in-item': theme.hostContext('ion-item', el),
+        'checkbox-checked': checked,
+        'checkbox-disabled': disabled,
+        'checkbox-indeterminate': indeterminate,
+        'legacy-checkbox': true,
+        interactive: true,
+      }) }, index.h("svg", { class: "checkbox-icon", viewBox: "0 0 24 24", part: "container" }, path), index.h("label", { htmlFor: inputId }, labelText), index.h("input", { type: "checkbox", "aria-checked": `${checked}`, disabled: disabled, id: inputId, onChange: this.toggleChecked, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) })));
+  }
+  getSVGPath(mode, indeterminate) {
+    let path = indeterminate ? (index.h("path", { d: "M6 12L18 12", part: "mark" })) : (index.h("path", { d: "M5.9,12.5l3.8,3.8l8.8-8.8", part: "mark" }));
+    if (mode === 'md') {
+      path = indeterminate ? (index.h("path", { d: "M2 12H22", part: "mark" })) : (index.h("path", { d: "M1.73,12.91 8.1,19.28 22.79,4.59", part: "mark" }));
+    }
+    return path;
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "checked": ["styleChanged"],
+    "disabled": ["styleChanged"]
+  }; }
+};
+let checkboxIds = 0;
+Checkbox.style = {
+  ios: checkboxIosCss,
+  md: checkboxMdCss
+};
+
+exports.ion_checkbox = Checkbox;

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

@@ -0,0 +1,33 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-b358eb23.js');
+const theme = require('./theme-e6fec71e.js');
+const ionicGlobal = require('./ionic-global-5e671da5.js');
+
+const chipCss = ":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:7px;padding-bottom:7px;display:-ms-inline-flexbox;display:inline-flex;position:relative;-ms-flex-align:center;align-items:center;height:32px;background:var(--background);color:var(--color);font-family:var(--ion-font-family, inherit);font-size:14px;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:20px}: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){width:24px;height:24px}::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)}}";
+
+const Chip = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.color = undefined;
+    this.outline = false;
+    this.disabled = false;
+  }
+  render() {
+    const mode = ionicGlobal.getIonMode(this);
+    return (index.h(index.Host, { "aria-disabled": this.disabled ? 'true' : null, class: theme.createColorClasses(this.color, {
+        [mode]: true,
+        'chip-outline': this.outline,
+        'chip-disabled': this.disabled,
+        'ion-activatable': true,
+      }) }, index.h("slot", null), mode === 'md' && index.h("ion-ripple-effect", null)));
+  }
+};
+Chip.style = chipCss;
+
+exports.ion_chip = Chip;

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

@@ -0,0 +1,180 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-b358eb23.js');
+const ionicGlobal = require('./ionic-global-5e671da5.js');
+
+const SIZE_TO_MEDIA = {
+  xs: '(min-width: 0px)',
+  sm: '(min-width: 576px)',
+  md: '(min-width: 768px)',
+  lg: '(min-width: 992px)',
+  xl: '(min-width: 1200px)',
+};
+// Check if the window matches the media query
+// at the breakpoint passed
+// e.g. matchBreakpoint('sm') => true if screen width exceeds 576px
+const matchBreakpoint = (breakpoint) => {
+  if (breakpoint === undefined || breakpoint === '') {
+    return true;
+  }
+  if (window.matchMedia) {
+    const mediaQuery = SIZE_TO_MEDIA[breakpoint];
+    return window.matchMedia(mediaQuery).matches;
+  }
+  return false;
+};
+
+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) {
+    index.registerInstance(this, hostRef);
+    this.offset = undefined;
+    this.offsetXs = undefined;
+    this.offsetSm = undefined;
+    this.offsetMd = undefined;
+    this.offsetLg = undefined;
+    this.offsetXl = undefined;
+    this.pull = undefined;
+    this.pullXs = undefined;
+    this.pullSm = undefined;
+    this.pullMd = undefined;
+    this.pullLg = undefined;
+    this.pullXl = undefined;
+    this.push = undefined;
+    this.pushXs = undefined;
+    this.pushSm = undefined;
+    this.pushMd = undefined;
+    this.pushLg = undefined;
+    this.pushXl = undefined;
+    this.size = undefined;
+    this.sizeXs = undefined;
+    this.sizeSm = undefined;
+    this.sizeMd = undefined;
+    this.sizeLg = undefined;
+    this.sizeXl = undefined;
+  }
+  onResize() {
+    index.forceUpdate(this);
+  }
+  // Loop through all of the breakpoints to see if the media query
+  // matches and grab the column value from the relevant prop if so
+  getColumns(property) {
+    let matched;
+    for (const breakpoint of BREAKPOINTS) {
+      const matches = matchBreakpoint(breakpoint);
+      // Grab the value of the property, if it exists and our
+      // media query matches we return the value
+      const columns = this[property + breakpoint.charAt(0).toUpperCase() + breakpoint.slice(1)];
+      if (matches && columns !== undefined) {
+        matched = columns;
+      }
+    }
+    // Return the last matched columns since the breakpoints
+    // increase in size and we want to return the largest match
+    return matched;
+  }
+  calculateSize() {
+    const columns = this.getColumns('size');
+    // If size wasn't set for any breakpoint
+    // or if the user set the size without a value
+    // it means we need to stick with the default and return
+    // e.g. <ion-col size-md>
+    if (!columns || columns === '') {
+      return;
+    }
+    // If the size is set to auto then don't calculate a size
+    const colSize = columns === 'auto'
+      ? 'auto'
+      : // If CSS supports variables we should use the grid columns var
+        SUPPORTS_VARS
+          ? `calc(calc(${columns} / var(--ion-grid-columns, 12)) * 100%)`
+          : // Convert the columns to a percentage by dividing by the total number
+            // of columns (12) and then multiplying by 100
+            (columns / 12) * 100 + '%';
+    return {
+      flex: `0 0 ${colSize}`,
+      width: `${colSize}`,
+      'max-width': `${colSize}`,
+    };
+  }
+  // Called by push, pull, and offset since they use the same calculations
+  calculatePosition(property, modifier) {
+    const columns = this.getColumns(property);
+    if (!columns) {
+      return;
+    }
+    // If the number of columns passed are greater than 0 and less than
+    // 12 we can position the column, else default to auto
+    const amount = SUPPORTS_VARS
+      ? // If CSS supports variables we should use the grid columns var
+        `calc(calc(${columns} / var(--ion-grid-columns, 12)) * 100%)`
+      : // Convert the columns to a percentage by dividing by the total number
+        // of columns (12) and then multiplying by 100
+        columns > 0 && columns < 12
+          ? (columns / 12) * 100 + '%'
+          : 'auto';
+    return {
+      [modifier]: amount,
+    };
+  }
+  calculateOffset(isRTL) {
+    return this.calculatePosition('offset', isRTL ? 'margin-right' : 'margin-left');
+  }
+  calculatePull(isRTL) {
+    return this.calculatePosition('pull', isRTL ? 'left' : 'right');
+  }
+  calculatePush(isRTL) {
+    return this.calculatePosition('push', isRTL ? 'right' : 'left');
+  }
+  render() {
+    const isRTL = document.dir === 'rtl';
+    const mode = ionicGlobal.getIonMode(this);
+    return (index.h(index.Host, { class: {
+        [mode]: true,
+      }, style: Object.assign(Object.assign(Object.assign(Object.assign({}, this.calculateOffset(isRTL)), this.calculatePull(isRTL)), this.calculatePush(isRTL)), this.calculateSize()) }, index.h("slot", null)));
+  }
+};
+Col.style = colCss;
+
+const gridCss = ":host{-webkit-padding-start:var(--ion-grid-padding-xs, var(--ion-grid-padding, 5px));padding-inline-start:var(--ion-grid-padding-xs, var(--ion-grid-padding, 5px));-webkit-padding-end:var(--ion-grid-padding-xs, var(--ion-grid-padding, 5px));padding-inline-end:var(--ion-grid-padding-xs, var(--ion-grid-padding, 5px));padding-top:var(--ion-grid-padding-xs, var(--ion-grid-padding, 5px));padding-bottom:var(--ion-grid-padding-xs, var(--ion-grid-padding, 5px));-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;display:block;-ms-flex:1;flex:1}@media (min-width: 576px){:host{-webkit-padding-start:var(--ion-grid-padding-sm, var(--ion-grid-padding, 5px));padding-inline-start:var(--ion-grid-padding-sm, var(--ion-grid-padding, 5px));-webkit-padding-end:var(--ion-grid-padding-sm, var(--ion-grid-padding, 5px));padding-inline-end:var(--ion-grid-padding-sm, var(--ion-grid-padding, 5px));padding-top:var(--ion-grid-padding-sm, var(--ion-grid-padding, 5px));padding-bottom:var(--ion-grid-padding-sm, var(--ion-grid-padding, 5px))}}@media (min-width: 768px){:host{-webkit-padding-start:var(--ion-grid-padding-md, var(--ion-grid-padding, 5px));padding-inline-start:var(--ion-grid-padding-md, var(--ion-grid-padding, 5px));-webkit-padding-end:var(--ion-grid-padding-md, var(--ion-grid-padding, 5px));padding-inline-end:var(--ion-grid-padding-md, var(--ion-grid-padding, 5px));padding-top:var(--ion-grid-padding-md, var(--ion-grid-padding, 5px));padding-bottom:var(--ion-grid-padding-md, var(--ion-grid-padding, 5px))}}@media (min-width: 992px){:host{-webkit-padding-start:var(--ion-grid-padding-lg, var(--ion-grid-padding, 5px));padding-inline-start:var(--ion-grid-padding-lg, var(--ion-grid-padding, 5px));-webkit-padding-end:var(--ion-grid-padding-lg, var(--ion-grid-padding, 5px));padding-inline-end:var(--ion-grid-padding-lg, var(--ion-grid-padding, 5px));padding-top:var(--ion-grid-padding-lg, var(--ion-grid-padding, 5px));padding-bottom:var(--ion-grid-padding-lg, var(--ion-grid-padding, 5px))}}@media (min-width: 1200px){:host{-webkit-padding-start:var(--ion-grid-padding-xl, var(--ion-grid-padding, 5px));padding-inline-start:var(--ion-grid-padding-xl, var(--ion-grid-padding, 5px));-webkit-padding-end:var(--ion-grid-padding-xl, var(--ion-grid-padding, 5px));padding-inline-end:var(--ion-grid-padding-xl, var(--ion-grid-padding, 5px));padding-top:var(--ion-grid-padding-xl, var(--ion-grid-padding, 5px));padding-bottom:var(--ion-grid-padding-xl, var(--ion-grid-padding, 5px))}}:host(.grid-fixed){width:var(--ion-grid-width-xs, var(--ion-grid-width, 100%));max-width:100%}@media (min-width: 576px){:host(.grid-fixed){width:var(--ion-grid-width-sm, var(--ion-grid-width, 540px))}}@media (min-width: 768px){:host(.grid-fixed){width:var(--ion-grid-width-md, var(--ion-grid-width, 720px))}}@media (min-width: 992px){:host(.grid-fixed){width:var(--ion-grid-width-lg, var(--ion-grid-width, 960px))}}@media (min-width: 1200px){:host(.grid-fixed){width:var(--ion-grid-width-xl, var(--ion-grid-width, 1140px))}}:host(.ion-no-padding){--ion-grid-column-padding:0;--ion-grid-column-padding-xs:0;--ion-grid-column-padding-sm:0;--ion-grid-column-padding-md:0;--ion-grid-column-padding-lg:0;--ion-grid-column-padding-xl:0}";
+
+const Grid = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.fixed = false;
+  }
+  render() {
+    const mode = ionicGlobal.getIonMode(this);
+    return (index.h(index.Host, { class: {
+        [mode]: true,
+        'grid-fixed': this.fixed,
+      } }, index.h("slot", null)));
+  }
+};
+Grid.style = gridCss;
+
+const rowCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}";
+
+const Row = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h(index.Host, { class: ionicGlobal.getIonMode(this) }, index.h("slot", null)));
+  }
+};
+Row.style = rowCss;
+
+exports.ion_col = Col;
+exports.ion_grid = Grid;
+exports.ion_row = Row;