@ionic/core 8.3.4 → 8.3.5-dev.11730311720.151cb777

package/dist/collection/components/list/list.ionic.css

@@ -0,0 +1,193 @@
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
+/*
+Do not edit directly, this file was auto-generated.
+*/ /**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+ * A heuristic that applies CSS to mobile
+ * viewports (i.e. phones, not tablets).
+ *
+ * Usage:
+ * @include mobile-viewport() {
+ *   :host {
+ *     background-color: blue;
+ *   }
+ * }
+ */
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+ion-list {
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  display: block;
+  background: var(--ion-primitives-base-white, #ffffff);
+  contain: content;
+  list-style-type: none;
+}
+
+.list-ionic.list-inset {
+  -webkit-margin-start: var(--ion-space-100, 4px);
+  margin-inline-start: var(--ion-space-100, 4px);
+  -webkit-margin-end: var(--ion-space-100, 4px);
+  margin-inline-end: var(--ion-space-100, 4px);
+  margin-top: var(--ion-space-100, 4px);
+  margin-bottom: var(--ion-space-100, 4px);
+}
+
+.list-ionic-lines-none .item-lines-default {
+  --inner-border-width: 0px;
+  --border-width: 0px;
+}
+
+.list-ionic:has(ion-list-header) {
+  /* Round */
+  /* Soft */
+  /* Rectangular */
+}
+.list-ionic:has(ion-list-header).list-round {
+  /**
+   * Only apply the border radius to the bottom of the list.
+   * The top of the list should not have a border radius because
+   * that would include the header.
+   */
+  border-start-start-radius: initial;
+  border-start-end-radius: initial;
+  border-end-end-radius: var(--ion-border-radius-400, 16px);
+  border-end-start-radius: var(--ion-border-radius-400, 16px);
+}
+.list-ionic:has(ion-list-header).list-round ion-list-header + * {
+  /**
+   * Only apply the border radius to the top of the first element.
+   * The bottom of the first element should not have a border radius
+   * because that would not look connected to the rest.
+   */
+  border-start-start-radius: var(--ion-border-radius-400, 16px);
+  border-start-end-radius: var(--ion-border-radius-400, 16px);
+  border-end-end-radius: initial;
+  border-end-start-radius: initial;
+}
+.list-ionic:has(ion-list-header).list-soft {
+  /**
+   * Only apply the border radius to the bottom of the list.
+   * The top of the list should not have a border radius because
+   * that would include the header.
+   */
+  border-start-start-radius: initial;
+  border-start-end-radius: initial;
+  border-end-end-radius: var(--ion-border-radius-200, 8px);
+  border-end-start-radius: var(--ion-border-radius-200, 8px);
+}
+.list-ionic:has(ion-list-header).list-soft ion-list-header + * {
+  /**
+   * Only apply the border radius to the top of the first element.
+   * The bottom of the first element should not have a border radius
+   * because that would not look connected to the rest.
+   */
+  border-start-start-radius: var(--ion-border-radius-200, 8px);
+  border-start-end-radius: var(--ion-border-radius-200, 8px);
+  border-end-end-radius: initial;
+  border-end-start-radius: initial;
+}
+.list-ionic:has(ion-list-header).list-rectangular {
+  /**
+   * Only apply the border radius to the bottom of the list.
+   * The top of the list should not have a border radius because
+   * that would include the header.
+   */
+  border-start-start-radius: initial;
+  border-start-end-radius: initial;
+  border-end-end-radius: var(--ion-border-radius-0, 0px);
+  border-end-start-radius: var(--ion-border-radius-0, 0px);
+}
+.list-ionic:has(ion-list-header).list-rectangular ion-list-header + * {
+  /**
+   * Only apply the border radius to the top of the first element.
+   * The bottom of the first element should not have a border radius
+   * because that would not look connected to the rest.
+   */
+  border-start-start-radius: var(--ion-border-radius-0, 0px);
+  border-start-end-radius: var(--ion-border-radius-0, 0px);
+  border-end-end-radius: initial;
+  border-end-start-radius: initial;
+}
+
+.list-ionic:not(:has(ion-list-header)) {
+  /* Round */
+  /* Soft */
+  /* Rectangular */
+}
+.list-ionic:not(:has(ion-list-header)).list-round {
+  border-radius: var(--ion-border-radius-400, 16px);
+}
+.list-ionic:not(:has(ion-list-header)).list-soft {
+  border-radius: var(--ion-border-radius-200, 8px);
+}
+.list-ionic:not(:has(ion-list-header)).list-rectangular {
+  border-radius: var(--ion-border-radius-0, 0px);
+}
+
+.list-ionic-lines-none .item-lines-default {
+  --inner-border-width: var(--ion-border-size-0, 0px);
+  --border-width: var(--ion-border-size-0, 0px);
+}
+
+.list-ionic-lines-full .item-lines-default {
+  --inner-border-width: var(--ion-border-size-0, 0px);
+  --border-width: var(--ion-border-size-0, 0px) var(--ion-border-size-0, 0px) var(--ion-border-size-025, 1px) var(--ion-border-size-0, 0px);
+}
+
+.list-ionic-lines-inset .item-lines-default {
+  --inner-border-width: var(--ion-border-size-0, 0px) var(--ion-border-size-0, 0px) var(--ion-border-size-025, 1px) var(--ion-border-size-0, 0px);
+  --border-width: var(--ion-border-size-0, 0px);
+}

package/dist/collection/components/list/list.ios.css

@@ -1,3 +1,9 @@
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -72,6 +78,12 @@ ion-list.list-inset {
   overflow: hidden;
 }
 
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -127,6 +139,12 @@ ion-list.list-inset {
  *   }
  * }
  */
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

package/dist/collection/components/list/list.js

@@ -2,14 +2,16 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, h } from "@stencil/core";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
+ * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
  */
 export class List {
     constructor() {
         this.lines = undefined;
         this.inset = false;
+        this.shape = undefined;
     }
     /**
      * If `ion-item-sliding` are used inside the list, this method closes
@@ -24,29 +26,48 @@ export class List {
         }
         return false;
     }
+    getShape() {
+        const theme = getIonTheme(this);
+        const { shape, inset } = this;
+        // TODO(ROU-10831): Remove theme check when shapes are defined for all themes.
+        if (theme !== 'ionic') {
+            return undefined;
+        }
+        if (shape === undefined && inset) {
+            return 'round';
+        }
+        if (shape === undefined) {
+            return 'rectangular';
+        }
+        return shape;
+    }
     render() {
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
+        const shape = this.getShape();
         const { lines, inset } = this;
-        return (h(Host, { key: '8bde220025a7eeca6da075379c6487c4c9bdddc1', role: "list", class: {
-                [mode]: true,
+        return (h(Host, { key: '9dc48461bc98a22e3592ea35af053016a4ace586', role: "list", class: {
+                [theme]: true,
                 // Used internally for styling
-                [`list-${mode}`]: true,
+                [`list-${theme}`]: true,
                 'list-inset': inset,
                 [`list-lines-${lines}`]: lines !== undefined,
-                [`list-${mode}-lines-${lines}`]: lines !== undefined,
+                [`list-${theme}-lines-${lines}`]: lines !== undefined,
+                [`list-${shape}`]: shape !== undefined,
             } }));
     }
     static get is() { return "ion-list"; }
     static get originalStyleUrls() {
         return {
             "ios": ["list.ios.scss"],
-            "md": ["list.md.scss"]
+            "md": ["list.md.scss"],
+            "ionic": ["list.ionic.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["list.ios.css"],
-            "md": ["list.md.css"]
+            "md": ["list.md.css"],
+            "ionic": ["list.ionic.css"]
         };
     }
     static get properties() {
@@ -85,6 +106,23 @@ export class List {
                 "attribute": "inset",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "shape": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'soft' | 'round' | 'rectangular'",
+                    "resolved": "\"rectangular\" | \"round\" | \"soft\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to `\"soft\"` for slightly rounded corners,\n`\"round\"` for fully rounded corners,\nor `\"rectangular\"` for no rounded corners.\n\nDefaults to `\"round\"` for the `ionic` theme\nwhen inset is `true`\ndefaults to `\"rectangular\"` for the `ionic`\ntheme when inset is `false`,\nundefined for all other themes."
+                },
+                "attribute": "shape",
+                "reflect": false
             }
         };
     }

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

@@ -1,3 +1,9 @@
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -72,6 +78,12 @@ ion-list.list-inset {
   overflow: hidden;
 }
 
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -127,6 +139,12 @@ ion-list.list-inset {
  *   }
  * }
  */
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -212,8 +230,8 @@ ion-list.list-inset {
  * These selectors ensure the last item in the list
  * has the correct border.
  * We need to consider the following scenarios:
- 1. The last item in a list as long as it is not the only item.
- 2. The item in the last item-sliding in a list.
+ * 1. The last item in a list as long as it is not the only item.
+ * 2. The item in the last item-sliding in a list.
  * Note that we do not select "ion-item-sliding ion-item:last-of-type"
  * because that will cause the borders to disappear on
  * items in an item-sliding when the item is the last

package/dist/collection/components/list-header/list-header.ionic.css

@@ -0,0 +1,236 @@
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
+/*
+Do not edit directly, this file was auto-generated.
+*/ /**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+ * A heuristic that applies CSS to mobile
+ * viewports (i.e. phones, not tablets).
+ *
+ * Usage:
+ * @include mobile-viewport() {
+ *   :host {
+ *     background-color: blue;
+ *   }
+ * }
+ */
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+ * A heuristic that applies CSS to mobile
+ * viewports (i.e. phones, not tablets).
+ *
+ * Usage:
+ * @include mobile-viewport() {
+ *   :host {
+ *     background-color: blue;
+ *   }
+ * }
+ */
+:host {
+  /**
+   * @prop --background: Background of the list header
+   * @prop --color: Color of the list header text
+   *
+   * @prop --border-color: Color of the list header border
+   * @prop --border-width: Width of the list header border
+   * @prop --border-style: Style of the list header border
+   *
+   * @prop --inner-border-width: Width of the inner list header border
+   */
+  --border-style: solid;
+  --border-width: 0;
+  --inner-border-width: 0;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  min-height: 40px;
+  border-width: var(--border-width);
+  border-style: var(--border-style);
+  border-color: var(--border-color);
+  background: var(--background);
+  color: var(--color);
+  overflow: hidden;
+}
+
+:host(.ion-color) {
+  background: var(--ion-color-base);
+  color: var(--ion-color-contrast);
+}
+
+.list-header-inner {
+  display: flex;
+  position: relative;
+  flex: 1;
+  flex-direction: inherit;
+  align-items: inherit;
+  align-self: stretch;
+  min-height: inherit;
+  border-width: var(--inner-border-width);
+  border-style: var(--border-style);
+  border-color: var(--border-color);
+  overflow: inherit;
+  box-sizing: border-box;
+}
+
+::slotted(ion-label) {
+  flex: 1 1 auto;
+}
+
+:host(.list-header-lines-inset),
+:host(.list-header-lines-none) {
+  --border-width: 0;
+}
+
+:host(.list-header-lines-full),
+:host(.list-header-lines-none) {
+  --inner-border-width: 0;
+}
+
+:host {
+  --background: transparent;
+  --color: var(--ion-primitives-neutral-1200, #242424);
+  font-size: var(--ion-font-size-350, 0.875rem);
+  font-weight: var(--ion-font-weight-medium, 500);
+  letter-spacing: var(--ion-font-letter-spacing-0, 0%);
+  line-height: var(--ion-font-line-height-600, 24px);
+  text-decoration: none;
+  text-transform: none;
+  min-height: 58px;
+  /** 
+   * The focus rings from components like buttons and links
+   * are being cut off. This style ensures that the focus ring
+   * is completely visible.
+   */
+  overflow: visible;
+  /* stylelint-disable */
+  padding-right: calc(var(--ion-safe-area-right, 0px) + var(--ion-space-400, 16px));
+  padding-left: calc(var(--ion-safe-area-left, 0px) + var(--ion-space-400, 16px));
+  /* stylelint-enable */
+}
+:host-context([dir=rtl]) {
+  padding-right: calc(var(--ion-safe-area-right, 0px) + var(--ion-space-400, 16px));
+  padding-left: calc(var(--ion-safe-area-left, 0px) + var(--ion-space-400, 16px));
+}
+
+@supports selector(:dir(rtl)) {
+  :host(:dir(rtl)) {
+    padding-right: calc(var(--ion-safe-area-right, 0px) + var(--ion-space-400, 16px));
+    padding-left: calc(var(--ion-safe-area-left, 0px) + var(--ion-space-400, 16px));
+  }
+}
+
+::slotted(ion-label) ::slotted(p) {
+  font-weight: var(--ion-font-weight-regular, 400);
+}
+
+::slotted(a.ionic-link) {
+  /* stylelint-disable declaration-no-important */
+  color: var(--ion-semantics-primary-base, #105cef) !important;
+}

package/dist/collection/components/list-header/list-header.ios.css

@@ -1,3 +1,9 @@
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -124,6 +130,12 @@
   --inner-border-width: 0;
 }
 
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -179,6 +191,12 @@
  *   }
  * }
  */
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

package/dist/collection/components/list-header/list-header.js

@@ -3,9 +3,10 @@
  */
 import { Host, h } from "@stencil/core";
 import { createColorClasses } from "../../utils/theme";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
+ * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
  */
 export class ListHeader {
     constructor() {
@@ -14,24 +15,26 @@ export class ListHeader {
     }
     render() {
         const { lines } = this;
-        const mode = getIonMode(this);
-        return (h(Host, { key: '7e2e050f13722f2b870a2415d99a9e631e9ca267', class: createColorClasses(this.color, {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        return (h(Host, { key: '325e56e818b60c1d4342350b12df9ecce46c5705', class: createColorClasses(this.color, {
+                [theme]: true,
                 [`list-header-lines-${lines}`]: lines !== undefined,
-            }) }, h("div", { key: '6117bebc45800d874e9b75355476fbced5cc8398', class: "list-header-inner" }, h("slot", { key: '9165fb274cd2c45a5a65c271d8b1f30e8a00c890' }))));
+            }) }, h("div", { key: '38c6c022882c4119214c539cf2b88df3bdff2bb2', class: "list-header-inner" }, h("slot", { key: 'b3c24db071c7317ff06d1ef35d6b415f15ec7b9d' }))));
     }
     static get is() { return "ion-list-header"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["list-header.ios.scss"],
-            "md": ["list-header.md.scss"]
+            "md": ["list-header.md.scss"],
+            "ionic": ["list-header.ionic.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["list-header.ios.css"],
-            "md": ["list-header.md.css"]
+            "md": ["list-header.md.css"],
+            "ionic": ["list-header.ionic.css"]
         };
     }
     static get properties() {