@sebgroup/green-core 3.12.3 → 3.12.5

package/components/details/details.component.d.ts

@@ -19,6 +19,7 @@ declare const GdsDetails_base: (new (...args: any[]) => import("../../utils/mixi
 export declare class GdsDetails extends GdsDetails_base {
     #private;
     static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    private _isAnimating;
     /**
      * The summary text displayed in the details header
      */

package/components/details/details.component.js

@@ -3,8 +3,8 @@ import {
   __privateAdd,
   __privateGet
 } from "../../chunks/chunk.CAV4X6PU.js";
-var _handleToggle, _handleKeydown, _syncGroupState, _dispatchStateEvent, _renderHeader, _renderIconButton, _renderContent;
-import { property, query } from "lit/decorators.js";
+var _handleToggle, _handleKeydown, _syncGroupState, _dispatchStateEvent, _handleContentTransitionEnd, _renderHeader, _renderIconButton, _renderContent;
+import { property, query, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { GdsElement } from "../../gds-element.js";
 import { tokens } from "../../tokens.style.js";
@@ -27,6 +27,7 @@ let GdsDetails = class extends withSizeXProps(
 ) {
   constructor() {
     super(...arguments);
+    this._isAnimating = false;
     this.summary = "";
     this.name = "";
     this.open = false;
@@ -60,6 +61,11 @@ let GdsDetails = class extends withSizeXProps(
         detail: this.open
       });
     });
+    __privateAdd(this, _handleContentTransitionEnd, (event) => {
+      if (event.target !== this._content || event.propertyName !== "height")
+        return;
+      this._isAnimating = false;
+    });
     __privateAdd(this, _renderHeader, () => {
       return html`
       <div
@@ -100,10 +106,12 @@ let GdsDetails = class extends withSizeXProps(
         class=${classMap({
         content: true,
         open: this.open,
+        animating: this._isAnimating,
         small: this.size === "small"
       })}
         aria-hidden="${!this.open}"
         ?inert="${!this.open}"
+        @transitionend=${__privateGet(this, _handleContentTransitionEnd)}
       >
         <slot></slot>
       </div>
@@ -112,6 +120,9 @@ let GdsDetails = class extends withSizeXProps(
   }
   __handleOpenChange() {
     __privateGet(this, _syncGroupState).call(this);
+    if (this.hasUpdated) {
+      this._isAnimating = true;
+    }
   }
   render() {
     return html`
@@ -131,10 +142,14 @@ _handleToggle = new WeakMap();
 _handleKeydown = new WeakMap();
 _syncGroupState = new WeakMap();
 _dispatchStateEvent = new WeakMap();
+_handleContentTransitionEnd = new WeakMap();
 _renderHeader = new WeakMap();
 _renderIconButton = new WeakMap();
 _renderContent = new WeakMap();
 GdsDetails.styles = [tokens, DetailsStyles];
+__decorateClass([
+  state()
+], GdsDetails.prototype, "_isAnimating", 2);
 __decorateClass([
   property({ type: String })
 ], GdsDetails.prototype, "summary", 2);

package/components/details/details.styles.js

@@ -112,9 +112,12 @@ const style = css`
     }
 
     .content.open {
-      overflow: auto;
       height: max-content;
     }
+
+    .content.open:not(.animating) {
+      overflow: visible;
+    }
   }
 `;
 var details_styles_default = style;

package/components/rich-text/rich-text.styles.js

@@ -39,10 +39,6 @@ const style = css`
     margin-top: 0;
   }
 
-  h4 + h5 {
-    margin-top: 0;
-  }
-
   h5 + h6 {
     margin-top: 0;
   }
@@ -86,6 +82,26 @@ const style = css`
     background-color: color-mix(in srgb, currentColor, transparent 80%);
   }
 
+  .text-heading-xl {
+    font: var(--gds-sys-text-heading-xl);
+  }
+
+  .text-heading-l {
+    font: var(--gds-sys-text-heading-l);
+  }
+
+  .text-heading-m {
+    font: var(--gds-sys-text-heading-m);
+  }
+
+  .text-preamble-m {
+    font: var(--gds-sys-text-preamble-m);
+  }
+
+  .text-preamble-s {
+    font: var(--gds-sys-text-preamble-s);
+  }
+
   /*
   * lists
   * -----------------------------------------------------------
@@ -281,7 +297,8 @@ const style = css`
   * Iframe
   */
   iframe {
-    border: var(--gds-sys-space-5xs) solid var(--gds-sys-color-border-neutral-02);
+    border: var(--gds-sys-space-5xs) solid
+      var(--gds-sys-color-border-neutral-02);
     border-radius: var(--gds-sys-radius-xs);
     min-width: 100%;
     margin-bottom: var(--gds-sys-space-l);