@ionic/core 8.8.19-dev.11787007863.1976a30e → 8.8.19-dev.11787083540.1511caf2

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

@@ -112,6 +112,20 @@
   box-sizing: border-box;
 }
 
+/**
+ * Since the label sits on top of the element,
+ * the component needs to be taller otherwise the
+ * label will appear too close to the textarea text.
+ * Also, floating and stacked labels should not
+ * push the label down since it it
+ * sits on top of the textarea.
+ */
+:host(.textarea-label-placement-floating),
+:host(.textarea-label-placement-stacked) {
+  --padding-top: 0px;
+  min-height: 56px;
+}
+
 /**
  * When the cols property is set we should
  * respect that width instead of defaulting
@@ -234,8 +248,8 @@
   padding-inline-start: var(--padding-start);
   -webkit-padding-end: var(--padding-end);
   padding-inline-end: var(--padding-end);
-  padding-top: 0;
-  padding-bottom: 0;
+  padding-top: 0px;
+  padding-bottom: 0px;
   border-radius: var(--border-radius);
   display: flex;
   position: relative;
@@ -248,48 +262,25 @@
   line-height: normal;
 }
 
-.textarea-control {
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: var(--padding-top);
-  padding-bottom: var(--padding-bottom);
-  display: flex;
-  flex-grow: 1;
-  align-items: start;
-  align-self: stretch;
-  width: 100%;
-  /**
-  * Allows the control to shrink below the label and textarea's intrinsic
-  * width, preventing the start and end slots from being pushed outside
-  * the wrapper. The label and textarea truncate independently, so it can
-  * use whatever space remains after accounting for the slots.
-  */
-  min-width: 0;
-}
-
 .native-wrapper {
   position: relative;
   width: 100%;
   height: 100%;
 }
 
-/**
- * When the label sits beside the textarea, the label should size to its content
- * and the textarea should take the remaining space. A zero flex basis prevents
- * the textarea from requesting its full width and forcing the label to shrink.
- * Stacked and floating placements use a column layout, so their flex basis
- * controls height instead and does not need to be overridden.
- */
-:host(.textarea-label-placement-start) .native-wrapper,
-:host(.textarea-label-placement-end) .native-wrapper,
-:host(.textarea-label-placement-fixed) .native-wrapper {
-  flex: 1 1 0;
-}
-
 :host(.has-focus) textarea {
   caret-color: var(--highlight-color);
 }
 
+.native-wrapper textarea {
+  -webkit-padding-start: 0px;
+  padding-inline-start: 0px;
+  -webkit-padding-end: 0px;
+  padding-inline-end: 0px;
+  padding-top: var(--padding-top);
+  padding-bottom: var(--padding-bottom);
+}
+
 .native-wrapper {
   display: grid;
   min-width: inherit;
@@ -314,8 +305,8 @@
 .native-wrapper::after {
   padding-left: 0;
   padding-right: 0;
-  padding-top: 0;
-  padding-bottom: 0;
+  padding-top: var(--padding-top);
+  padding-bottom: var(--padding-bottom);
   margin-left: 0;
   margin-right: 0;
   margin-top: 0;
@@ -341,6 +332,12 @@
   word-break: break-word;
 }
 
+.textarea-wrapper-inner {
+  display: flex;
+  width: 100%;
+  min-height: inherit;
+}
+
 :host(.ion-touched.ion-invalid) {
   --highlight-color: var(--highlight-color-invalid);
 }
@@ -424,12 +421,12 @@
 }
 
 .label-text-wrapper {
-  /**
-  * Allows the label to shrink below its intrinsic content width.
-  * Without this the label keeps its full width and can push the
-  * textarea and end slot outside the wrapper.
-  */
-  min-width: 0;
+  -webkit-padding-start: 0px;
+  padding-inline-start: 0px;
+  -webkit-padding-end: 0px;
+  padding-inline-end: 0px;
+  padding-top: var(--padding-top);
+  padding-bottom: var(--padding-bottom);
   /**
    * Label text should not extend
    * beyond the bounds of the textarea.
@@ -448,18 +445,6 @@
   pointer-events: none;
 }
 
-/**
- * When start/end slots are added or removed, we temporarily
- * disable the label transition to prevent the floating label
- * from animating as its position is adjusted.
- *
- * This class is applied by the start container controller, so
- * renaming it here requires renaming it there too.
- */
-:host(.skip-label-transition) .label-text-wrapper {
-  transition: none;
-}
-
 /**
  * We need to use two elements instead of
  * one. The .label-text-wrapper is responsible
@@ -503,7 +488,7 @@
  * Label is on the left of the textarea in LTR and
  * on the right in RTL.
  */
-:host(.textarea-label-placement-start) .textarea-control {
+:host(.textarea-label-placement-start) .textarea-wrapper {
   flex-direction: row;
 }
 
@@ -525,7 +510,7 @@
  * Label is on the right of the textarea in LTR and
  * on the left in RTL.
  */
-:host(.textarea-label-placement-end) .textarea-control {
+:host(.textarea-label-placement-end) .textarea-wrapper {
   flex-direction: row-reverse;
 }
 
@@ -575,15 +560,8 @@
  * down when the textarea is focused or has a value.
  *
  */
-:host(.textarea-label-placement-stacked),
-:host(.textarea-label-placement-floating) {
-  --padding-top: 20px;
-  --padding-bottom: 6px;
-}
-
-:host(.textarea-label-placement-stacked) .textarea-control,
-:host(.textarea-label-placement-floating) .textarea-control {
-  padding-top: 0;
+:host(.textarea-label-placement-stacked) .textarea-wrapper,
+:host(.textarea-label-placement-floating) .textarea-wrapper {
   flex-direction: column;
   align-items: start;
 }
@@ -596,10 +574,12 @@
 :host(.textarea-label-placement-stacked) .label-text-wrapper,
 :host(.textarea-label-placement-floating) .label-text-wrapper {
   transform-origin: left top;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  padding-bottom: 0;
+  -webkit-padding-start: 0px;
+  padding-inline-start: 0px;
+  -webkit-padding-end: 0px;
+  padding-inline-end: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
   max-width: 100%;
   /**
    * The 2 ensures the label
@@ -634,6 +614,13 @@
   margin-bottom: 0px;
 }
 
+:host(.textarea-label-placement-stacked) ::slotted([slot=start]),
+:host(.textarea-label-placement-stacked) ::slotted([slot=end]),
+:host(.textarea-label-placement-floating) ::slotted([slot=start]),
+:host(.textarea-label-placement-floating) ::slotted([slot=end]) {
+  margin-top: 8px;
+}
+
 /**
  * This makes the label sit over the textarea
  * when the textarea is blurred and has no value.
@@ -668,17 +655,19 @@
   max-width: calc(100% / 0.75);
 }
 
-.textarea-start,
-.textarea-end {
+.start-slot-wrapper, .end-slot-wrapper {
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: var(--padding-top);
+  padding-bottom: var(--padding-bottom);
   display: flex;
-  position: relative;
   flex-shrink: 0;
   align-self: start;
 }
 
 ::slotted([slot=start]),
 ::slotted([slot=end]) {
-  margin-top: var(--padding-top);
+  margin-top: 0;
 }
 
 ::slotted([slot=start]:last-of-type) {
@@ -917,6 +906,7 @@
   --border-radius: 4px;
   --padding-start: 16px;
   --padding-end: 16px;
+  min-height: 56px;
 }
 
 /**
@@ -1044,14 +1034,7 @@
   --border-radius: 4px;
   --padding-start: 16px;
   --padding-end: 16px;
-  /**
-   * The measured width of the start container, as a negative offset
-   * in LTR and a positive one in RTL. Written to the host by the
-   * start container controller, so renaming it here requires renaming
-   * it there too. Declared with a default so the label is positioned
-   * correctly before the first measurement runs.
-   */
-  --internal-start-container-adjustment: 0px;
+  min-height: 56px;
 }
 
 :host(.textarea-fill-outline.textarea-shape-round) {
@@ -1105,25 +1088,15 @@
   border-bottom: none;
 }
 
-/**
- * The resting label is positioned relative to the control so it can size to
- * the space between the start and end slots. When floating, the label needs
- * to escape the control and position itself relative to the wrapper instead.
- */
-:host(.textarea-fill-outline:not(.label-floating)) .textarea-control {
-  position: relative;
-}
-
 :host(.textarea-fill-outline.textarea-label-placement-stacked) .label-text-wrapper,
 :host(.textarea-fill-outline.textarea-label-placement-floating) .label-text-wrapper {
   transform-origin: left top;
   position: absolute;
   /**
-   * While resting this is the width of the textarea, which already
-   * excludes the start and end slots. Once the label floats the
-   * containing block becomes the wrapper and the rule below takes over.
+   * Label text should not extend
+   * beyond the bounds of the textarea.
    */
-  max-width: 100%;
+  max-width: calc(100% - var(--padding-start) - var(--padding-end));
 }
 :host-context([dir=rtl]):host(.textarea-fill-outline.textarea-label-placement-stacked) .label-text-wrapper, :host-context([dir=rtl]).textarea-fill-outline.textarea-label-placement-stacked .label-text-wrapper, :host-context([dir=rtl]):host(.textarea-fill-outline.textarea-label-placement-floating) .label-text-wrapper, :host-context([dir=rtl]).textarea-fill-outline.textarea-label-placement-floating .label-text-wrapper {
   transform-origin: right top;
@@ -1148,7 +1121,7 @@
  * This makes the label sit above the textarea.
  */
 :host(.label-floating.textarea-fill-outline) .label-text-wrapper {
-  transform: translate(var(--internal-start-container-adjustment, 0px), -32%) scale(0.75);
+  transform: translateY(-32%) scale(0.75);
   margin-left: 0;
   margin-right: 0;
   margin-top: 0;
@@ -1164,7 +1137,7 @@
 
 /**
  * This ensures that the textarea does not
- * overlap the outline container while still
+ * overlap the floating label while still
  * remaining visually centered.
  */
 :host(.textarea-fill-outline.textarea-label-placement-stacked) textarea,
@@ -1175,10 +1148,17 @@
   margin-inline-start: 0px;
   -webkit-margin-end: 0px;
   margin-inline-end: 0px;
-  margin-top: 19px;
+  margin-top: 12px;
   margin-bottom: 0px;
 }
 
+:host(.textarea-fill-outline.textarea-label-placement-stacked) ::slotted([slot=start]),
+:host(.textarea-fill-outline.textarea-label-placement-stacked) ::slotted([slot=end]),
+:host(.textarea-fill-outline.textarea-label-placement-floating) ::slotted([slot=start]),
+:host(.textarea-fill-outline.textarea-label-placement-floating) ::slotted([slot=end]) {
+  margin-top: 12px;
+}
+
 :host(.textarea-fill-outline) .textarea-outline-container {
   left: 0;
   right: 0;
@@ -1296,7 +1276,6 @@
   --padding-bottom: 8px;
   --padding-start: 0px;
   --highlight-height: 2px;
-  min-height: 72px;
   font-size: inherit;
 }
 
@@ -1358,11 +1337,6 @@
   --border-radius: 16px;
 }
 
-::slotted(ion-button[slot=start]),
-::slotted(ion-button[slot=end]) {
-  margin-top: 7px;
-}
-
 /**
  * Slotted buttons have a lot of default padding that can
  * cause them to look misaligned from other pieces such

package/dist/collection/components/thumbnail/thumbnail.js

@@ -5,7 +5,7 @@ import { Host, h } from "@stencil/core";
 import { getIonMode } from "../../global/ionic-global";
 export class Thumbnail {
     render() {
-        return (h(Host, { key: 'ff9d2a4886b1c90a316c761f1160111f0e997f5d', class: getIonMode(this) }, h("slot", { key: '9a0f0d69e3713831e88c8770a60b28ff1a03abb6' })));
+        return (h(Host, { key: 'b250e01664238f1dca8f9757b15bc3d5d9387ffa', class: getIonMode(this) }, h("slot", { key: '72cb568bccabc983c5186a7596ef6c6d4ebf5ad9' })));
     }
     static get is() { return "ion-thumbnail"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/title/title.js

@@ -5,22 +5,6 @@ import { Host, h } from "@stencil/core";
 import { createColorClasses } from "../../utils/theme";
 import { getIonMode } from "../../global/ionic-global";
 export class ToolbarTitle {
-    el;
-    /**
-     * The color to use from your application's color palette.
-     * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
-     * For more information on colors, see [theming](/docs/theming/basics).
-     */
-    color;
-    /**
-     * The size of the toolbar title.
-     */
-    size;
-    /**
-     * Emitted when the styles change.
-     * @internal
-     */
-    ionStyle;
     sizeChanged() {
         this.emitStyle();
     }
@@ -39,11 +23,11 @@ export class ToolbarTitle {
     render() {
         const mode = getIonMode(this);
         const size = this.getSize();
-        return (h(Host, { key: 'c5f0b913ff0a22d9bf02da48a313a613c2ac8fe7', class: createColorClasses(this.color, {
+        return (h(Host, { key: '44e63f8439df64c470692904427b417e19406476', class: createColorClasses(this.color, {
                 [mode]: true,
                 [`title-${size}`]: true,
                 'title-rtl': document.dir === 'rtl',
-            }) }, h("div", { key: '5253b9e39fb764bfe1e57370719139f8a83e9904', class: "toolbar-title" }, h("slot", { key: 'e38b1eccb0175c36f8cab211aee7ce4d61fc9035' }))));
+            }) }, h("div", { key: '784cf60a0db16045391891cc8fad0c7dbeba4039', class: "toolbar-title" }, h("slot", { key: '0c720a50479ba257e8756337aeb9b0ab7516a227' }))));
     }
     static get is() { return "ion-title"; }
     static get encapsulation() { return "shadow"; }