@ionic/core 8.2.3-dev.11718879673.1a3f486b → 8.2.3-dev.11719301373.17616928

package/dist/collection/components/menu-button/menu-button.ionic.css

@@ -0,0 +1,240 @@
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
+/**
+ * This is an auto-generated file, please do not change it directly.
+ * Ionic Design System
+ */
+/**
+ * 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.
+ */
+/**
+ * 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 --border-radius: Border radius of the menu button
+   *
+   * @prop --background: Background of the menu button
+   * @prop --background-hover: Background of the menu button on hover
+   * @prop --background-hover-opacity: Opacity of the background on hover
+   * @prop --background-focused: Background of the menu button when focused with the tab key
+   * @prop --background-focused-opacity: Opacity of the menu button background when focused with the tab key
+   *
+   * @prop --color: Color of the menu button
+   * @prop --color-hover: Color of the menu button on hover
+   * @prop --color-focused: Color of the menu button when focused with the tab key
+   *
+   * @prop --padding-top: Top padding of the button
+   * @prop --padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button
+   * @prop --padding-bottom: Bottom padding of the button
+   * @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button
+   */
+  --background: transparent;
+  --color-focused: currentColor;
+  --border-radius: initial;
+  --padding-top: 0;
+  --padding-bottom: 0;
+  color: var(--color);
+  text-align: center;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  text-transform: none;
+  white-space: nowrap;
+  font-kerning: none;
+}
+
+.button-native {
+  border-radius: var(--border-radius);
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  font-style: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+  text-align: inherit;
+  text-decoration: inherit;
+  text-indent: inherit;
+  text-overflow: inherit;
+  text-transform: inherit;
+  white-space: inherit;
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  -webkit-padding-start: var(--padding-start);
+  padding-inline-start: var(--padding-start);
+  -webkit-padding-end: var(--padding-end);
+  padding-inline-end: var(--padding-end);
+  padding-top: var(--padding-top);
+  padding-bottom: var(--padding-bottom);
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  display: flex;
+  position: relative;
+  flex-flow: row nowrap;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  min-height: inherit;
+  border: 0;
+  outline: none;
+  background: var(--background);
+  line-height: 1;
+  cursor: pointer;
+  overflow: hidden;
+  user-select: none;
+  z-index: 0;
+  appearance: none;
+}
+
+.button-inner {
+  display: flex;
+  position: relative;
+  flex-flow: row nowrap;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  min-height: inherit;
+  z-index: 1;
+}
+
+ion-icon {
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  pointer-events: none;
+}
+
+:host(.menu-button-hidden) {
+  display: none;
+}
+
+:host(.ion-focused) .button-native {
+  color: var(--color-focused);
+}
+:host(.ion-focused) .button-native::after {
+  background: var(--background-focused);
+  opacity: var(--background-focused-opacity);
+}
+
+.button-native::after {
+  right: 0;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  position: absolute;
+  content: "";
+  opacity: 0;
+}
+
+@media (any-hover: hover) {
+  :host(:hover) .button-native {
+    color: var(--color-hover);
+  }
+  :host(:hover) .button-native::after {
+    background: var(--background-hover);
+    opacity: var(--background-hover-opacity, 0);
+  }
+}
+:host(.in-toolbar:not(.in-toolbar-color)) {
+  color: var(--ion-toolbar-color, var(--color));
+}
+
+:host {
+  --background-focused: currentColor;
+  --background-focused-opacity: 0.12;
+  --background-hover: currentColor;
+  --background-hover-opacity: 0.04;
+  --border-radius: var(--ionic-border-radius-full, 999px);
+  --color: initial;
+  --padding-start: 0;
+  --padding-end: 0;
+  position: relative;
+  width: var(--ionic-scale-1000, 40px);
+  height: var(--ionic-scale-1000, 40px);
+  font-size: var(--ionic-font-size-600, 1.5rem);
+}

package/dist/collection/components/menu-button/menu-button.ios.css

@@ -120,6 +120,28 @@
  *   }
  * }
  */
+/**
+ * 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 --border-radius: Border radius of the menu button
@@ -228,12 +250,6 @@ ion-icon {
   display: none;
 }
 
-:host(.menu-button-disabled) {
-  cursor: default;
-  opacity: 0.5;
-  pointer-events: none;
-}
-
 :host(.ion-focused) .button-native {
   color: var(--color-focused);
 }
@@ -261,14 +277,20 @@ ion-icon {
     opacity: var(--background-hover-opacity, 0);
   }
 }
-:host(.ion-color) .button-native {
-  color: var(--ion-color-base);
-}
-
 :host(.in-toolbar:not(.in-toolbar-color)) {
   color: var(--ion-toolbar-color, var(--color));
 }
 
+:host(.menu-button-disabled) {
+  cursor: default;
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+:host(.ion-color) .button-native {
+  color: var(--ion-color-base);
+}
+
 :host {
   --background-focused: currentColor;
   --background-focused-opacity: 0.1;

package/dist/collection/components/menu-button/menu-button.js

@@ -47,7 +47,7 @@ export class MenuButton {
             type: this.type,
         };
         const ariaLabel = inheritedAttributes['aria-label'] || 'menu';
-        return (h(Host, { key: '8102c6e4a0d8e618e12fb390ca7acb9bccea888a', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, "aria-hidden": hidden ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: 'dc7af6b49fe4f1603d8b1909ddfeb0e3a13bc71f', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, "aria-hidden": hidden ? 'true' : null, class: createColorClasses(color, {
                 [theme]: true,
                 button: true, // ion-buttons target .button
                 'menu-button-hidden': hidden,
@@ -56,7 +56,7 @@ export class MenuButton {
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'ion-activatable': true,
                 'ion-focusable': true,
-            }) }, h("button", Object.assign({ key: '730c71e65bb2361bb8d2d372a43ed3869af34875' }, attrs, { disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }), h("span", { key: '00b474f3495c800f70821b039ba48aa4faddb9e0', class: "button-inner" }, h("slot", { key: '0e8f7528ab9be81721bf1630cc0f92fb9b110ccd' }, h("ion-icon", { key: '3364f0ebf82500fe47c8f501c87ba93d207bed8e', part: "icon", icon: menuIcon, lazy: false, "aria-hidden": "true" }))), theme === 'md' && h("ion-ripple-effect", { key: 'ecc816724db1d419da5377ceee6557c9c6e1a4b0', type: "unbounded" }))));
+            }) }, h("button", Object.assign({ key: '470a5e29e1535fe37f1dbfb561d9dc79ce6e13d7' }, attrs, { disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }), h("span", { key: '62d94fd184257cf021bc7b71a9d68d7722b12b1c', class: "button-inner" }, h("slot", { key: '49cb73d8c63853cef58ef8c4106053878407d239' }, h("ion-icon", { key: 'b26e656d335962c528b4180a49e1fc55e8331174', part: "icon", icon: menuIcon, lazy: false, "aria-hidden": "true" }))), theme === 'md' && h("ion-ripple-effect", { key: 'c99d120c6d0630f81e1b274750037f65c7d730ed', type: "unbounded" }))));
     }
     static get is() { return "ion-menu-button"; }
     static get encapsulation() { return "shadow"; }
@@ -64,14 +64,14 @@ export class MenuButton {
         return {
             "ios": ["menu-button.ios.scss"],
             "md": ["menu-button.md.scss"],
-            "ionic": ["menu-button.md.scss"]
+            "ionic": ["menu-button.ionic.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["menu-button.ios.css"],
             "md": ["menu-button.md.css"],
-            "ionic": ["menu-button.md.css"]
+            "ionic": ["menu-button.ionic.css"]
         };
     }
     static get properties() {

package/dist/collection/components/menu-button/menu-button.md.css

@@ -120,6 +120,28 @@
  *   }
  * }
  */
+/**
+ * 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 --border-radius: Border radius of the menu button
@@ -228,12 +250,6 @@ ion-icon {
   display: none;
 }
 
-:host(.menu-button-disabled) {
-  cursor: default;
-  opacity: 0.5;
-  pointer-events: none;
-}
-
 :host(.ion-focused) .button-native {
   color: var(--color-focused);
 }
@@ -261,14 +277,20 @@ ion-icon {
     opacity: var(--background-hover-opacity, 0);
   }
 }
-:host(.ion-color) .button-native {
-  color: var(--ion-color-base);
-}
-
 :host(.in-toolbar:not(.in-toolbar-color)) {
   color: var(--ion-toolbar-color, var(--color));
 }
 
+:host(.menu-button-disabled) {
+  cursor: default;
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+:host(.ion-color) .button-native {
+  color: var(--ion-color-base);
+}
+
 :host {
   --background-focused: currentColor;
   --background-focused-opacity: 0.12;

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

@@ -0,0 +1,269 @@
+/**
+ * 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 searchbar input
+   * @prop --box-shadow: Box shadow of the searchbar input
+   * @prop --border-radius: Border radius of the searchbar input
+   * @prop --cancel-button-color: Color of the searchbar cancel button
+   * @prop --clear-button-color: Color of the searchbar clear button
+   * @prop --color: Color of the searchbar text
+   * @prop --icon-color: Color of the searchbar icon
+   * @prop --placeholder-color: Color of the searchbar placeholder
+   * @prop --placeholder-font-style: Font style of the searchbar placeholder
+   * @prop --placeholder-font-weight: Font weight of the searchbar placeholder
+   * @prop --placeholder-opacity: Opacity of the searchbar placeholder
+   */
+  --placeholder-color: initial;
+  --placeholder-font-style: initial;
+  --placeholder-font-weight: initial;
+  --placeholder-opacity: 0.5;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  display: flex;
+  position: relative;
+  align-items: center;
+  width: 100%;
+  color: var(--color);
+  box-sizing: border-box;
+}
+
+.searchbar-search-icon {
+  color: var(--icon-color);
+  pointer-events: none;
+}
+
+.searchbar-input-container {
+  display: block;
+  position: relative;
+  flex-shrink: 1;
+  width: 100%;
+}
+
+.searchbar-input {
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  font-style: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+  text-align: inherit;
+  text-decoration: inherit;
+  text-indent: inherit;
+  text-overflow: inherit;
+  text-transform: inherit;
+  white-space: inherit;
+  border-radius: var(--border-radius);
+  display: block;
+  width: 100%;
+  min-height: inherit;
+  border: 0;
+  outline: none;
+  background: var(--background);
+  font-family: inherit;
+  box-shadow: var(--box-shadow);
+  box-sizing: border-box;
+  appearance: none;
+}
+.searchbar-input::placeholder {
+  color: var(--placeholder-color);
+  font-family: inherit;
+  font-style: var(--placeholder-font-style);
+  font-weight: var(--placeholder-font-weight);
+  opacity: var(--placeholder-opacity);
+}
+.searchbar-input::-webkit-search-cancel-button, .searchbar-input::-ms-clear {
+  display: none;
+}
+
+.searchbar-cancel-button {
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  display: none;
+  height: 100%;
+  border: 0;
+  outline: none;
+  color: var(--cancel-button-color);
+  cursor: pointer;
+  appearance: none;
+}
+
+.searchbar-cancel-button > div {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+.searchbar-clear-button {
+  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: none;
+  min-height: 0;
+  outline: none;
+  color: var(--clear-button-color);
+  appearance: none;
+}
+
+/**
+ * Normally, we would not want to use :focus
+ * here because that would mean tapping the button
+ * on mobile would focus it (and keep it focused).
+ * However, the clear button always disappears after
+ * being activated, so we never get to that state.
+ */
+.searchbar-clear-button:focus {
+  opacity: 0.5;
+}
+
+:host(.searchbar-has-value.searchbar-should-show-clear) .searchbar-clear-button {
+  display: block;
+}
+
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
+/**
+ * This is an auto-generated file, please do not change it directly.
+ * Ionic Design System
+ */
+/**
+ * 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.
+ */
+:host {
+  --background: var(--ionic-color-neutral-100, #f1f1f1);
+  --border-radius: var(--ionic-border-radius-800, 32px);
+  --box-shadow: none;
+  --cancel-button-color: var(--ionic-color-neutral-800, #626262);
+  --clear-button-color: var(--ionic-color-neutral-800, #626262);
+  --color: var(--ionic-color-neutral-800, #626262);
+  --icon-color: var(--ionic-color-neutral-800, #626262);
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  min-height: var(--ionic-scale-1000, 40px);
+  contain: content;
+}
+
+.searchbar-input-container {
+  min-height: var(--ionic-scale-1000, 40px);
+}
+
+.searchbar-search-icon {
+  display: none;
+}
+
+.searchbar-input {
+  -webkit-padding-start: var(--ionic-space-300, 12px);
+  padding-inline-start: var(--ionic-space-300, 12px);
+  -webkit-padding-end: var(--ionic-space-300, 12px);
+  padding-inline-end: var(--ionic-space-300, 12px);
+  padding-top: var(--ionic-space-300, 12px);
+  padding-bottom: var(--ionic-space-300, 12px);
+  height: 100%;
+  font-size: var(--ionic-font-size-350, 0.875rem);
+  font-weight: var(--ionic-font-weight-regular, 400);
+  contain: strict;
+}
+
+.searchbar-clear-button {
+  top: 50%;
+  position: absolute;
+  width: var(--ionic-scale-600, 24px);
+  height: var(--ionic-scale-600, 24px);
+  transform: translateY(-50%);
+  font-size: var(--ionic-font-size-400, 1rem);
+  contain: strict;
+}
+.searchbar-clear-button {
+  inset-inline-end: var(--ionic-space-200, 8px);
+}
+
+:host-context(ion-toolbar) {
+  min-height: var(--ionic-scale-1000, 40px);
+}