fix(label): remove overflow hidden

core/src/components.d.ts

@@ -3382,6 +3382,10 @@ export interface IonSelectCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIonSelectElement;
 }
+export interface IonSkeletonTextCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIonSkeletonTextElement;
+}
 export interface IonSplitPaneCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIonSplitPaneElement;
@@ -6917,6 +6921,10 @@ declare namespace LocalJSX {
           * If `true`, the skeleton text will animate.
          */
         "animated"?: boolean;
+        /**
+          * Emitted when the styles change.
+         */
+        "onIonStyle"?: (event: IonSkeletonTextCustomEvent<StyleEventDetail>) => void;
     }
     interface IonSpinner {
         /**

core/src/components/label/label.scss

@@ -19,15 +19,14 @@
 
   text-overflow: ellipsis;
 
-  // Overflow hidden is required for the proper
-  // margins between skeleton text elements
-  overflow: hidden;
   box-sizing: border-box;
 }
 
 // TODO(FW-5289): remove
 :host-context(.item-legacy) {
   white-space: nowrap;
+
+  overflow: hidden;
 }
 
 // TODO(FW-5289): move to :host-context(.item)
@@ -63,7 +62,6 @@
   align-self: baseline;
 }
 
-
 // TODO(FW-3547): this can be removed if we
 // refactor datetime to not use an ion-item
 :host-context(.item-in-datetime) {
@@ -73,6 +71,12 @@
   width: auto;
 }
 
+// Overflow hidden is required for the proper
+// margins between skeleton text elements
+:host-context(.item-skeleton-text) {
+  overflow: hidden;
+}
+
 // Fixed Inputs
 // --------------------------------------------------
 

core/src/components/skeleton-text/skeleton-text.tsx

@@ -1,9 +1,10 @@
-import type { ComponentInterface } from '@stencil/core';
-import { Component, Element, Host, Prop, h } from '@stencil/core';
+import type { ComponentInterface, EventEmitter } from '@stencil/core';
+import { Component, Element, Event, Host, Prop, h } from '@stencil/core';
 import { hostContext } from '@utils/theme';
 
 import { config } from '../../global/config';
 import { getIonMode } from '../../global/ionic-global';
+import type { StyleEventDetail } from '../../interface';
 
 @Component({
   tag: 'ion-skeleton-text',
@@ -18,6 +19,24 @@ export class SkeletonText implements ComponentInterface {
    */
   @Prop() animated = false;
 
+  /**
+   * Emitted when the styles change.
+   * @internal
+   */
+  @Event() ionStyle!: EventEmitter<StyleEventDetail>;
+
+  componentWillLoad() {
+    this.emitStyle();
+  }
+
+  private emitStyle() {
+    const style: StyleEventDetail = {
+      'skeleton-text': true,
+    };
+
+    this.ionStyle.emit(style);
+  }
+
   render() {
     const animated = this.animated && config.getBoolean('animated', true);
     const inMedia = hostContext('ion-avatar', this.el) || hostContext('ion-thumbnail', this.el);