@ionic/core 8.4.2-dev.11740495088.1d73faf5 → 8.4.2-dev.11741359058.1ab81f3d

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

@@ -128,6 +128,7 @@ Do not edit directly, this file was auto-generated.
    */
   border-radius: var(--border-radius);
   display: block;
+  position: relative;
 }
 
 ::slotted(ion-img),
@@ -265,4 +266,20 @@ Do not edit directly, this file was auto-generated.
 :host(.avatar-xlarge) ::slotted(ion-icon) {
   width: var(--ion-scale-1000, 40px);
   height: var(--ion-scale-1000, 40px);
+}
+
+:host ::slotted(ion-badge.badge-vertical-top:empty) {
+  transform: translate(var(--ion-scale-050, 2px), calc(var(--ion-scale-050, 2px) * -1));
+}
+
+:host(.avatar-xxsmall) ::slotted(ion-badge.badge-vertical-top:empty) {
+  transform: translate(var(--ion-scale-100, 4px), calc(var(--ion-scale-100, 4px) * -1));
+}
+
+:host ::slotted(ion-badge.badge-vertical-bottom:empty) {
+  transform: translate(0, var(--ion-scale-100, 4px));
+}
+
+:host(.avatar-xxsmall) ::slotted(ion-badge.badge-vertical-bottom:empty) {
+  transform: translate(var(--ion-scale-100, 4px), calc(var(--ion-scale-100, 4px)));
 }

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

@@ -65,6 +65,7 @@
    */
   border-radius: var(--border-radius);
   display: block;
+  position: relative;
 }
 
 ::slotted(ion-img),

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

@@ -65,6 +65,7 @@
    */
   border-radius: var(--border-radius);
   display: block;
+  position: relative;
 }
 
 ::slotted(ion-img),
@@ -141,4 +142,12 @@
   --border-radius: 50%;
   width: 64px;
   height: 64px;
+}
+
+::slotted(ion-badge.badge-vertical-top:empty) {
+  transform: translate(-50%, 50%);
+}
+
+::slotted(ion-badge.badge-vertical-bottom:empty) {
+  transform: translateX(-100%);
 }

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

@@ -156,8 +156,19 @@ Do not edit directly, this file was auto-generated.
   color: var(--ion-color-contrast);
 }
 
-:host(:empty) {
-  display: none;
+:host([vertical]) {
+  position: absolute;
+}
+:host([vertical]) {
+  inset-inline-end: 0;
+}
+
+:host(:empty.badge-vertical-top) {
+  top: 0;
+}
+
+:host(:empty.badge-vertical-bottom) {
+  bottom: 0;
 }
 
 :host {
@@ -204,6 +215,11 @@ Do not edit directly, this file was auto-generated.
   line-height: var(--ion-font-line-height-400, 16px);
 }
 
+:host(.badge-xxsmall) ::slotted(ion-icon) {
+  width: var(--ion-scale-300, 12px);
+  height: var(--ion-scale-300, 12px);
+}
+
 /* Extra Small Badge */
 :host(.badge-xsmall) {
   --padding-start: var(--ion-space-100, 4px);
@@ -214,6 +230,11 @@ Do not edit directly, this file was auto-generated.
   line-height: var(--ion-font-line-height-600, 24px);
 }
 
+:host(.badge-xsmall) ::slotted(ion-icon) {
+  width: var(--ion-scale-400, 16px);
+  height: var(--ion-scale-400, 16px);
+}
+
 /* Small Badge */
 :host(.badge-small) {
   --padding-start: var(--ion-space-100, 4px);
@@ -224,6 +245,11 @@ Do not edit directly, this file was auto-generated.
   line-height: var(--ion-font-line-height-600, 24px);
 }
 
+:host(.badge-small) ::slotted(ion-icon) {
+  width: var(--ion-scale-500, 20px);
+  height: var(--ion-scale-500, 20px);
+}
+
 /* Medium Badge */
 :host(.badge-medium) {
   min-width: var(--ion-scale-1000, 40px);
@@ -232,6 +258,11 @@ Do not edit directly, this file was auto-generated.
   line-height: var(--ion-font-line-height-700, 28px);
 }
 
+:host(.badge-medium) ::slotted(ion-icon) {
+  width: var(--ion-scale-600, 24px);
+  height: var(--ion-scale-600, 24px);
+}
+
 /* Large Badge */
 :host(.badge-large) {
   min-width: var(--ion-scale-1200, 48px);
@@ -240,10 +271,43 @@ Do not edit directly, this file was auto-generated.
   line-height: var(--ion-font-line-height-700, 28px);
 }
 
+:host(.badge-large) ::slotted(ion-icon) {
+  width: var(--ion-scale-800, 32px);
+  height: var(--ion-scale-800, 32px);
+}
+
 /* Extra Large Badge */
 :host(.badge-xlarge) {
   min-width: var(--ion-scale-1400, 56px);
   height: var(--ion-scale-1400, 56px);
   font-size: var(--ion-font-size-550, 1.375rem);
   line-height: var(--ion-font-line-height-700, 28px);
+}
+
+:host(.badge-xlarge) ::slotted(ion-icon) {
+  width: var(--ion-scale-1000, 40px);
+  height: var(--ion-scale-1000, 40px);
+}
+
+:host(:empty) {
+  --padding-start: 0;
+  --padding-end: 0;
+}
+
+/* sm */
+:host(.badge-small:empty) {
+  min-width: var(--ion-scale-200, 8px);
+  height: var(--ion-scale-200, 8px);
+}
+
+/* md */
+:host(.badge-medium:empty) {
+  min-width: var(--ion-scale-300, 12px);
+  height: var(--ion-scale-300, 12px);
+}
+
+/* lg */
+:host(.badge-large:empty) {
+  min-width: var(--ion-scale-400, 16px);
+  height: var(--ion-scale-400, 16px);
 }

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

@@ -154,8 +154,19 @@
   color: var(--ion-color-contrast);
 }
 
-:host(:empty) {
-  display: none;
+:host([vertical]) {
+  position: absolute;
+}
+:host([vertical]) {
+  inset-inline-end: 0;
+}
+
+:host(:empty.badge-vertical-top) {
+  top: 0;
+}
+
+:host(:empty.badge-vertical-bottom) {
+  bottom: 0;
 }
 
 /**
@@ -197,6 +208,16 @@
   font-family: var(--ion-font-family, inherit);
 }
 
+:host(:empty) {
+  --padding-start: 0;
+  --padding-end: 0;
+  --padding-bottom: 0;
+  --padding-top: 0;
+  border-radius: 999px;
+  width: 10px;
+  height: 10px;
+}
+
 /**
  * Convert a pixels given value into rem
  * 

package/dist/collection/components/badge/badge.js

@@ -13,6 +13,7 @@ export class Badge {
         this.color = undefined;
         this.shape = undefined;
         this.size = undefined;
+        this.vertical = undefined;
     }
     getShape() {
         const theme = getIonTheme(this);
@@ -42,11 +43,12 @@ export class Badge {
         const shape = this.getShape();
         const size = this.getSize();
         const theme = getIonTheme(this);
-        return (h(Host, { key: '81deb3e063e9a3af5059ddbdfdc0a24fce4031c6', class: createColorClasses(this.color, {
+        return (h(Host, { key: 'aebcad9a9d4e650344cc855085ab30c376f9b367', class: createColorClasses(this.color, {
                 [theme]: true,
                 [`badge-${shape}`]: shape !== undefined,
                 [`badge-${size}`]: size !== undefined,
-            }) }, h("slot", { key: 'e398740a75207679e3eff7bf7510cc0409aaf351' })));
+                [`badge-vertical-${this.vertical}`]: this.vertical !== undefined,
+            }) }, h("slot", { key: 'b62bca8ec3666dce3283573497b7c4306ecc7fc4' })));
     }
     static get is() { return "ion-badge"; }
     static get encapsulation() { return "shadow"; }
@@ -122,6 +124,23 @@ export class Badge {
                 },
                 "attribute": "size",
                 "reflect": false
+            },
+            "vertical": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'top' | 'bottom'",
+                    "resolved": "\"bottom\" | \"top\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to `\"top\"` to position the badge on top right absolute position of the parent element.\nSet to `\"bottom\"` to position the badge on bottom right absolute position of the parent element."
+                },
+                "attribute": "vertical",
+                "reflect": false
             }
         };
     }

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

@@ -154,8 +154,19 @@
   color: var(--ion-color-contrast);
 }
 
-:host(:empty) {
-  display: none;
+:host([vertical]) {
+  position: absolute;
+}
+:host([vertical]) {
+  inset-inline-end: 0;
+}
+
+:host(:empty.badge-vertical-top) {
+  top: 0;
+}
+
+:host(:empty.badge-vertical-bottom) {
+  bottom: 0;
 }
 
 /**
@@ -197,6 +208,16 @@
   font-family: var(--ion-font-family, inherit);
 }
 
+:host(:empty) {
+  --padding-start: 0;
+  --padding-end: 0;
+  --padding-bottom: 0;
+  --padding-top: 0;
+  border-radius: 999px;
+  width: 10px;
+  height: 10px;
+}
+
 /**
  * Convert a pixels given value into rem
  * 

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

@@ -240,67 +240,37 @@ Do not edit directly, this file was auto-generated.
 }
 
 .searchbar-search-icon {
-  top: var(--ion-scale-400, 16px);
   width: var(--ion-scale-400, 16px);
   height: var(--ion-scale-400, 16px);
 }
-.searchbar-search-icon {
-  inset-inline-start: var(--ion-scale-400, 16px);
-}
 
 .searchbar-input {
-  /**
-   * Padding start is based on
-   * desired padding from design,
-   * the size of the search icon,
-   * and the gap between the icon and the input.
-   *
-   * Padding end is based on
-   * desired padding from design,
-   * the size of the clear icon,
-   * and the gap between the icon and the input.
-   */
-  -webkit-padding-start: calc(var(--ion-space-400, 16px) + var(--ion-scale-400, 16px) + var(--ion-space-200, 8px));
-  padding-inline-start: calc(var(--ion-space-400, 16px) + var(--ion-scale-400, 16px) + var(--ion-space-200, 8px));
-  -webkit-padding-end: calc(var(--ion-space-400, 16px) + var(--ion-scale-400, 16px) + var(--ion-space-200, 8px));
-  padding-inline-end: calc(var(--ion-space-400, 16px) + var(--ion-scale-400, 16px) + var(--ion-space-200, 8px));
   padding-top: var(--ion-space-300, 12px);
   padding-bottom: var(--ion-space-300, 12px);
-  min-height: var(--ion-scale-1200, 48px);
   contain: strict;
 }
 
 .searchbar-clear-button {
-  top: var(--ion-scale-400, 16px);
   width: var(--ion-scale-400, 16px);
   height: var(--ion-scale-400, 16px);
   background-color: transparent;
   font-size: var(--ion-scale-400, 16px);
   contain: strict;
 }
-.searchbar-clear-button {
-  inset-inline-end: var(--ion-scale-400, 16px);
-}
 
 .searchbar-cancel-button {
-  /**
-   * The left edge of the cancel button
-   * should align with the left edge
-   * of the back button if the searchbar
-   * is used in a toolbar.
-   */
-  top: 0;
+  width: var(--ion-scale-400, 16px);
+  height: var(--ion-scale-400, 16px);
   background-color: transparent;
   font-size: var(--ion-font-size-400, 1rem);
 }
-.searchbar-cancel-button {
-  inset-inline-start: 9px;
-}
 
 .searchbar-search-icon,
 .searchbar-clear-button,
 .searchbar-cancel-button {
+  top: 50%;
   position: absolute;
+  transform: translateY(-50%);
 }
 
 .searchbar-clear-button:focus-visible,
@@ -310,8 +280,27 @@ Do not edit directly, this file was auto-generated.
   opacity: 1;
 }
 
-:host-context(ion-toolbar) {
-  min-height: var(--ion-scale-1200, 48px);
+:host-context(ion-toolbar).searchbar-should-show-cancel .searchbar-cancel-button {
+  /**
+   * The left edge of the cancel button
+   * should align with the left edge
+   * of the back button if the searchbar
+   * is used in a toolbar regardless of
+   * the searchbar size.
+   */
+}
+:host-context(ion-toolbar).searchbar-should-show-cancel .searchbar-cancel-button {
+  inset-inline-start: 9px;
+}
+
+:host-context(ion-toolbar).searchbar-should-show-cancel .searchbar-input {
+  /**
+   * Padding start is based on
+   * the alignment of the back button,
+   * the size of the leading icon (search or cancel),
+   * and the gap between the icon and the input.
+   */
+  padding-inline-start: calc(9px + var(--ion-scale-400, 16px) + var(--ion-space-200, 8px));
 }
 
 /* Hover */
@@ -342,4 +331,125 @@ Do not edit directly, this file was auto-generated.
   --placeholder-color: var(--ion-primitives-neutral-500, #a2a2a2);
   cursor: default;
   pointer-events: none;
+}
+
+:host(.searchbar-shape-soft) {
+  --border-radius: var(--ion-border-radius-200, 8px);
+}
+
+:host(.searchbar-shape-round) {
+  --border-radius: var(--ion-border-radius-400, 16px);
+}
+
+:host(.searchbar-shape-rectangular) {
+  --border-radius: var(--ion-border-radius-0, 0px);
+}
+
+/* Small */
+:host(.searchbar-size-small) .searchbar-input {
+  /**
+   * Padding start is based on
+   * desired padding from design,
+   * the size of the leading icon (search or cancel),
+   * and the gap between the icon and the input.
+   *
+   * Padding end is based on
+   * desired padding from design,
+   * the size of the trailing icon (clear),
+   * and the gap between the icon and the input.
+   */
+  -webkit-padding-start: calc(var(--ion-space-300, 12px) + var(--ion-scale-400, 16px) + var(--ion-space-200, 8px));
+  padding-inline-start: calc(var(--ion-space-300, 12px) + var(--ion-scale-400, 16px) + var(--ion-space-200, 8px));
+  -webkit-padding-end: calc(var(--ion-space-300, 12px) + var(--ion-scale-400, 16px) + var(--ion-space-200, 8px));
+  padding-inline-end: calc(var(--ion-space-300, 12px) + var(--ion-scale-400, 16px) + var(--ion-space-200, 8px));
+  height: var(--ion-scale-1000, 40px);
+}
+
+:host(.searchbar-size-small) .searchbar-search-icon,
+:host(.searchbar-size-small) .searchbar-cancel-button {
+  inset-inline-start: var(--ion-space-300, 12px);
+}
+
+:host(.searchbar-size-small) .searchbar-clear-button {
+  inset-inline-end: var(--ion-space-300, 12px);
+}
+
+/* Medium */
+:host(.searchbar-size-medium) .searchbar-input {
+  /**
+   * Padding start is based on
+   * desired padding from design,
+   * the size of the leading icon (search or cancel),
+   * and the gap between the icon and the input.
+   *
+   * Padding end is based on
+   * desired padding from design,
+   * the size of the trailing icon (clear),
+   * and the gap between the icon and the input.
+   */
+  -webkit-padding-start: calc(var(--ion-space-400, 16px) + var(--ion-scale-400, 16px) + var(--ion-space-200, 8px));
+  padding-inline-start: calc(var(--ion-space-400, 16px) + var(--ion-scale-400, 16px) + var(--ion-space-200, 8px));
+  -webkit-padding-end: calc(var(--ion-space-400, 16px) + var(--ion-scale-400, 16px) + var(--ion-space-200, 8px));
+  padding-inline-end: calc(var(--ion-space-400, 16px) + var(--ion-scale-400, 16px) + var(--ion-space-200, 8px));
+  height: var(--ion-scale-1200, 48px);
+}
+
+:host(.searchbar-size-medium) .searchbar-search-icon,
+:host(.searchbar-size-medium) .searchbar-cancel-button {
+  inset-inline-start: var(--ion-space-400, 16px);
+}
+
+:host(.searchbar-size-medium) .searchbar-clear-button {
+  inset-inline-end: var(--ion-space-400, 16px);
+}
+
+/* Large */
+:host(.searchbar-size-large) .searchbar-search-icon,
+:host(.searchbar-size-large) .searchbar-cancel-button {
+  width: var(--ion-scale-500, 20px);
+  height: var(--ion-scale-500, 20px);
+}
+
+:host(.searchbar-size-large) .searchbar-cancel-button {
+  font-size: var(--ion-font-size-500, 1.25rem);
+}
+
+:host-context(ion-toolbar).searchbar-size-large.searchbar-should-show-cancel .searchbar-input {
+  /**
+   * Padding start is based on
+   * the alignment of the back button,
+   * the size of the leading icon (search or cancel),
+   * and the gap between the icon and the input.
+   */
+  padding-inline-start: calc(9px + var(--ion-scale-500, 20px) + var(--ion-space-200, 8px));
+}
+
+:host(.searchbar-size-large) .searchbar-input {
+  padding-top: var(--ion-space-400, 16px);
+  padding-bottom: var(--ion-space-400, 16px);
+  /**
+   * Padding start is based on
+   * desired padding from design,
+   * the size of the leading icon (search or cancel),
+   * and the gap between the icon and the input.
+   *
+   * Padding end is based on
+   * desired padding from design,
+   * the size of the trailing icon (clear),
+   * and the gap between the icon and the input.
+   */
+  -webkit-padding-start: calc(var(--ion-space-500, 20px) + var(--ion-scale-500, 20px) + var(--ion-space-200, 8px));
+  padding-inline-start: calc(var(--ion-space-500, 20px) + var(--ion-scale-500, 20px) + var(--ion-space-200, 8px));
+  -webkit-padding-end: calc(var(--ion-space-500, 20px) + var(--ion-scale-400, 16px) + var(--ion-space-200, 8px));
+  padding-inline-end: calc(var(--ion-space-500, 20px) + var(--ion-scale-400, 16px) + var(--ion-space-200, 8px));
+  height: var(--ion-scale-1400, 56px);
+}
+
+:host(.searchbar-size-large) .searchbar-search-icon,
+:host(.searchbar-size-large) .searchbar-cancel-button {
+  inset-inline-start: var(--ion-space-500, 20px);
+}
+
+:host(.searchbar-size-large) .searchbar-clear-button {
+  inset-inline-end: var(--ion-space-500, 20px);
 }

package/dist/collection/components/searchbar/searchbar.js

@@ -141,6 +141,8 @@ export class Searchbar {
         this.spellcheck = false;
         this.type = 'search';
         this.value = '';
+        this.shape = undefined;
+        this.size = undefined;
     }
     /**
      * lang and dir are globally enumerated attributes.
@@ -375,6 +377,30 @@ export class Searchbar {
         }
         return true;
     }
+    getShape() {
+        const theme = getIonTheme(this);
+        const { shape } = this;
+        // TODO(ROU-11677): Remove theme check when shapes are defined for all themes.
+        if (theme !== 'ionic') {
+            return undefined;
+        }
+        if (shape === undefined) {
+            return 'round';
+        }
+        return shape;
+    }
+    getSize() {
+        const theme = getIonTheme(this);
+        const { size } = this;
+        // TODO(ROU-11678): Remove theme check when sizes are defined for all themes.
+        if (theme !== 'ionic') {
+            return undefined;
+        }
+        if (size === undefined) {
+            return 'medium';
+        }
+        return size;
+    }
     /**
      * Get the icon to use for the clear icon.
      * If an icon is set on the component, use that.
@@ -449,8 +475,10 @@ export class Searchbar {
         const animated = this.animated && config.getBoolean('animated', true);
         const theme = getIonTheme(this);
         const shouldShowCancelButton = this.shouldShowCancelButton();
-        const cancelButton = this.showCancelButton !== 'never' && (h("button", { key: '3301b510959fa5a426230175f5b61b4ead9bcfbb', "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: theme === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, h("div", { key: 'cb3a77783c75bbc78acdc7df9c75abcc415188d9', "aria-hidden": "true" }, theme === 'md' || theme === 'ionic' ? (h("ion-icon", { "aria-hidden": "true", icon: searchbarCancelIcon, lazy: false })) : (cancelButtonText))));
-        return (h(Host, { key: '33fdf75d5f7ce578cfbb7c4befa816c2b30469ac', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
+        const shape = this.getShape();
+        const size = this.getSize();
+        const cancelButton = this.showCancelButton !== 'never' && (h("button", { key: '7dc5854b95da27ab51924514413e981d065b3d14', "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: theme === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, h("div", { key: '7ccba83e849da1cf9a1d9ae4818466170c4e7636', "aria-hidden": "true" }, theme === 'md' || theme === 'ionic' ? (h("ion-icon", { "aria-hidden": "true", icon: searchbarCancelIcon, lazy: false })) : (cancelButtonText))));
+        return (h(Host, { key: '0a88320a2d0a836dcfc3befce5e46d105c5c3cc1', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
                 [theme]: true,
                 'searchbar-animated': animated,
                 'searchbar-disabled': this.disabled,
@@ -460,14 +488,16 @@ export class Searchbar {
                 'searchbar-has-focus': this.focused,
                 'searchbar-should-show-clear': this.shouldShowClearButton(),
                 'searchbar-should-show-cancel': this.shouldShowCancelButton(),
-            }) }, h("div", { key: '8a5accb217a1efccc1cd417cef8b95996e277c07', class: "searchbar-input-container" }, h("input", Object.assign({ key: 'dccb39de2157490b1e937c9a2737edb55b7001e6', "aria-label": "search text", disabled: this.disabled, ref: (el) => (this.nativeInput = el), class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, name: this.name, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, minLength: this.minlength, maxLength: this.maxlength, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoCapitalize: autocapitalize === 'default' ? undefined : autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }, this.inheritedAttributes)), (theme === 'md' || theme === 'ionic') && cancelButton, h("ion-icon", { key: 'e85d30887e0b8eb264f86f682362882f4d14bf61', "aria-hidden": "true", icon: searchbarSearchIcon, lazy: false, class: "searchbar-search-icon" }), h("button", { key: '73aeda33d35e499a7f9edbb550707f2d5a234110', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
+                [`searchbar-shape-${shape}`]: shape !== undefined,
+                [`searchbar-size-${size}`]: size !== undefined,
+            }) }, h("div", { key: '8a409a99570c2616bc5e414d64b6aba7f508e149', class: "searchbar-input-container" }, h("input", Object.assign({ key: '2d2be3ce84ca419a425ebd4a03d6d83d304e1b63', "aria-label": "search text", disabled: this.disabled, ref: (el) => (this.nativeInput = el), class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, name: this.name, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, minLength: this.minlength, maxLength: this.maxlength, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoCapitalize: autocapitalize === 'default' ? undefined : autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }, this.inheritedAttributes)), (theme === 'md' || theme === 'ionic') && cancelButton, h("ion-icon", { key: 'd69af04b0790264ecc717ca45e4846359fec494d', "aria-hidden": "true", icon: searchbarSearchIcon, lazy: false, class: "searchbar-search-icon" }), h("button", { key: '5f0d2cc8e1f27891e3c77ac9a132b98d5a3a469e', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the clear
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onClick: () => this.onClearInput(true) }, h("ion-icon", { key: '9c9c376352470fc45877f1b89dfecf2c5ca2cc71', "aria-hidden": "true", icon: searchbarClearIcon, lazy: false, class: "searchbar-clear-icon" }))), theme === 'ios' && cancelButton));
+            }, onClick: () => this.onClearInput(true) }, h("ion-icon", { key: '6c51c6fc759460fc0241df7b973e79bc732a8832', "aria-hidden": "true", icon: searchbarClearIcon, lazy: false, class: "searchbar-clear-icon" }))), theme === 'ios' && cancelButton));
     }
     static get is() { return "ion-searchbar"; }
     static get encapsulation() { return "scoped"; }
@@ -885,6 +915,40 @@ export class Searchbar {
                 "attribute": "value",
                 "reflect": false,
                 "defaultValue": "''"
+            },
+            "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 a searchbar with slightly rounded corners,\n`\"round\"` for a searchbar with fully rounded corners,\nor `\"rectangular\"` for a searchbar without rounded corners.\n\nDefaults to `\"round\"` for the ionic theme, and `undefined` for all other themes."
+                },
+                "attribute": "shape",
+                "reflect": false
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'small' | 'medium' | 'large'",
+                    "resolved": "\"large\" | \"medium\" | \"small\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to `\"large\"` for a searchbar with an increase in height,\nwhile \"small\" and \"medium\" provide progressively smaller heights.\n\nDefaults to `\"medium\"` for the ionic theme, and `undefined` for all other themes."
+                },
+                "attribute": "size",
+                "reflect": false
             }
         };
     }

package/dist/collection/utils/focus-visible.js

@@ -24,6 +24,21 @@ export const getOrInitFocusVisibleUtility = () => {
     }
     return focusVisibleUtility;
 };
+/**
+ * Used to set focus on an element that uses `ion-focusable`.
+ * Do not use this if focusing the element as a result of a keyboard
+ * event as the focus utility should handle this for us. This method
+ * should be used when we want to programmatically focus an element as
+ * a result of another user action. (Ex: We focus the first element
+ * inside of a popover when the user presents it, but the popover is not always
+ * presented as a result of keyboard action.)
+ *
+ * @param elements - The elements to set focus on.
+ */
+export const focusElements = (elements) => {
+    const focusVisible = getOrInitFocusVisibleUtility();
+    focusVisible.setFocus(elements);
+};
 export const startFocusVisible = (rootEl) => {
     let currentFocus = [];
     let keyboardMode = true;