@sebgroup/green-core 1.60.1 → 1.62.0

package/chunks/{chunk.EQK24GA7.js → chunk.MT7XFVN3.js}

@@ -1,6 +1,6 @@
 import {
   TransitionalStyles
-} from "./chunk.2RPIXTTF.js";
+} from "./chunk.3M24Q4NP.js";
 import {
   GdsElement
 } from "./chunk.LQSWYCMZ.js";

package/chunks/{chunk.UWI652VF.js → chunk.NCKHK5PG.js}

@@ -68,15 +68,17 @@ var GdsFormControlFooter = class extends GdsElement {
   render() {
     return html`<div aria-live="polite">
       <div class="error-message">
-        ${when(
+        <slot name="message"
+          >${when(
       this.validationMessage,
       () => html`
-            <gds-icon-triangle-exclamation
-              solid
-            ></gds-icon-triangle-exclamation>
-            ${this.validationMessage}
-          `
-    )}
+              <gds-icon-triangle-exclamation
+                solid
+              ></gds-icon-triangle-exclamation>
+              ${this.validationMessage}
+            `
+    )}</slot
+        >
       </div>
       <div class="char-counter">
         ${when(

package/chunks/{chunk.6YX75PNT.js → chunk.NHKCTJYM.js}

@@ -4,7 +4,7 @@ import {
 } from "./chunk.E62NOHQC.js";
 import {
   TransitionalStyles
-} from "./chunk.2RPIXTTF.js";
+} from "./chunk.3M24Q4NP.js";
 import {
   watch
 } from "./chunk.TYGMNHNO.js";

package/chunks/{chunk.UIVK7CMU.js → chunk.NLD74Y2D.js}

@@ -3,16 +3,16 @@ import {
 } from "./chunk.H2KG3F2S.js";
 import {
   forwardAttributes
-} from "./chunk.VV4IKVAK.js";
+} from "./chunk.QLHOYAX6.js";
 import {
   GdsFormControlElement
-} from "./chunk.JYQY43ZR.js";
+} from "./chunk.V56VPSWH.js";
 import {
   watch
 } from "./chunk.TYGMNHNO.js";
 import {
   tokens
-} from "./chunk.LOIMPU3C.js";
+} from "./chunk.4RMUKKUH.js";
 import {
   gdsCustomElement,
   html
@@ -26,7 +26,7 @@ import {
 
 // libs/core/src/components/textarea/textarea.ts
 import { localized, msg } from "@lit/localize";
-import { property, query, queryAsync, state } from "lit/decorators.js";
+import { property, query, queryAsync } from "lit/decorators.js";
 import { choose } from "lit/directives/choose.js";
 import { when } from "lit/directives/when.js";
 import { nothing } from "lit/html.js";
@@ -34,27 +34,7 @@ import { nothing } from "lit/html.js";
 // libs/core/src/components/textarea/textarea.styles.ts
 import { css } from "lit";
 var styles = css`
-  @layer tokens, a11y, base, simplified;
-
-  @layer tokens {
-    :host {
-      --_transition: all 368ms cubic-bezier(0.4, 0, 0.2, 1), height 0s;
-    }
-  }
-
-  @layer a11y {
-    @media (prefers-reduced-motion: reduce) {
-      :host {
-        --_transition: none;
-      }
-    }
-
-    @media (prefers-reduced-transparency: reduce) {
-      :host {
-        --_transparency: 1;
-      }
-    }
-  }
+  @layer base, simplified;
 
   @layer base {
     * {
@@ -70,52 +50,6 @@ var styles = css`
       gap: var(--gds-space-xs);
     }
 
-    :host([disabled]) {
-      color: var(--gds-color-l3-content-disabled);
-      pointer-events: none;
-    }
-
-    :host([size='small']) textarea {
-      font-size: var(--gds-text-size-detail-s);
-      line-height: var(--gds-text-line-height-detail-s);
-    }
-
-    .field {
-      transition: var(--_transition);
-      position: relative;
-      outline: 2px solid transparent;
-      outline-offset: 2px;
-
-      &:has(textarea:focus-visible) {
-        border-color: var(--gds-color-l3-border-primary);
-        outline-color: currentColor;
-      }
-
-      &.invalid:has(textarea:focus-visible) {
-        border-color: var(--gds-color-l3-border-negative);
-      }
-    }
-
-    @media (hover: hover) {
-      .field {
-        &:hover {
-          background: color-mix(
-            in srgb,
-            var(--gds-color-l3-background-secondary),
-            var(--gds-color-l3-states-light-hover)
-          );
-        }
-
-        &.invalid:hover {
-          background: color-mix(
-            in srgb,
-            var(--gds-color-l3-background-negative-secondary),
-            var(--gds-color-l3-states-negative-hover)
-          );
-        }
-      }
-    }
-
     textarea {
       appearance: none;
       background-color: transparent;
@@ -147,7 +81,17 @@ var styles = css`
       display: flex;
     }
 
+    [align-items] ::part(_button) {
+      margin-top: calc(var(--gds-space-2xs) * -1);
+    }
+
     .resize-handle {
+      position: absolute;
+      inset: auto auto -10px 0;
+      width: 100%;
+      height: 20px;
+      cursor: row-resize;
+      z-index: 2;
       &:hover,
       &:active {
         &::before {
@@ -176,40 +120,27 @@ var styles = css`
 `;
 
 // libs/core/src/components/textarea/textarea.ts
-var _renderDefault, renderDefault_fn, _renderFloatingLabel, renderFloatingLabel_fn, _forwardableAttrs, _handleOnInput, _handleOnChange, _handleFieldClick, _handleClearBtnClick, _renderSlotLead, renderSlotLead_fn, _renderSlotTrail, renderSlotTrail_fn, _addResizeHandleListener, addResizeHandleListener_fn, _startDragging, startDragging_fn, _onDrag, onDrag_fn, _stopDragging, stopDragging_fn, _renderResizeHandle, renderResizeHandle_fn, _handleSlotChange, handleSlotChange_fn, _renderNativeTextarea, renderNativeTextarea_fn, _renderClearButton, renderClearButton_fn, _shouldShowRemainingChars, shouldShowRemainingChars_get;
+var _renderDefault, renderDefault_fn, _renderFloatingLabel, renderFloatingLabel_fn, _forwardableAttrs, _handleOnInput, _handleOnChange, _handleFieldClick, _handleClearBtnClick, _renderFieldContents, renderFieldContents_fn, _renderSlotLead, renderSlotLead_fn, _renderSlotTrail, renderSlotTrail_fn, _addResizeHandleListener, addResizeHandleListener_fn, _resizeState, _startDragging, _onDrag, _stopDragging, _renderResizeHandle, renderResizeHandle_fn, _renderNativeTextarea, renderNativeTextarea_fn, _renderClearButton, renderClearButton_fn, _shouldShowRemainingChars, shouldShowRemainingChars_get;
 var GdsTextarea = class extends GdsFormControlElement {
   constructor() {
     super();
     __privateAdd(this, _renderDefault);
     // variant="floatingLabel"
     __privateAdd(this, _renderFloatingLabel);
+    __privateAdd(this, _renderFieldContents);
     __privateAdd(this, _renderSlotLead);
     __privateAdd(this, _renderSlotTrail);
     __privateAdd(this, _addResizeHandleListener);
-    __privateAdd(this, _startDragging);
-    __privateAdd(this, _onDrag);
-    __privateAdd(this, _stopDragging);
     __privateAdd(this, _renderResizeHandle);
-    __privateAdd(this, _handleSlotChange);
     __privateAdd(this, _renderNativeTextarea);
     __privateAdd(this, _renderClearButton);
     __privateAdd(this, _shouldShowRemainingChars);
-    this.value = "";
-    this.label = "";
     this.rows = 4;
-    this.lines = 4;
-    // Default number of lines
-    this.isDragging = false;
-    // Track dragging state
-    this.lastMouseY = 0;
     this.supportingText = "";
-    this.showExtendedSupportingText = false;
-    this.disabled = false;
     this.clearable = false;
-    this.resize = "";
+    this.resize = "auto";
     this.maxlength = Number.MAX_SAFE_INTEGER;
     this.variant = "default";
-    this.trailSlotOccupied = false;
     // Any attribute name added here will get forwarded to the native <input> element.
     __privateAdd(this, _forwardableAttrs, (attr) => ["type", "placeholder", "required"].includes(attr.name));
     __privateAdd(this, _handleOnInput, (e) => {
@@ -231,9 +162,77 @@ var GdsTextarea = class extends GdsFormControlElement {
     });
     __privateAdd(this, _handleClearBtnClick, () => {
       this.value = "";
+      this.dispatchEvent(
+        new Event("gds-input-cleared", {
+          bubbles: true,
+          composed: true
+        })
+      );
+      this.dispatchEvent(
+        new Event("input", {
+          bubbles: true,
+          composed: true
+        })
+      );
     });
-    this.lines = 0;
-    this.resize = "auto";
+    // State for the resize handle action
+    __privateAdd(this, _resizeState, {
+      isDragging: false,
+      startMouseY: 0,
+      lines: this.rows,
+      deltaLines: 0,
+      lineHeight: 0
+    });
+    __privateAdd(this, _startDragging, (event) => {
+      event.preventDefault();
+      __privateGet(this, _resizeState).isDragging = true;
+      __privateGet(this, _resizeState).startMouseY = event.clientY;
+      __privateGet(this, _resizeState).lineHeight = parseFloat(
+        getComputedStyle(this.elTextarea).lineHeight
+      );
+      document.addEventListener("mousemove", __privateGet(this, _onDrag));
+      document.addEventListener("mouseup", __privateGet(this, _stopDragging));
+    });
+    __privateAdd(this, _onDrag, (event) => {
+      if (!__privateGet(this, _resizeState).isDragging)
+        return;
+      const deltaY = event.clientY - __privateGet(this, _resizeState).startMouseY;
+      __privateGet(this, _resizeState).deltaLines = Math.round(
+        deltaY / __privateGet(this, _resizeState).lineHeight
+      );
+      this.elTextareaAsync.then((element) => {
+        element == null ? void 0 : element.style.setProperty(
+          "--_lines",
+          (__privateGet(this, _resizeState).lines + __privateGet(this, _resizeState).deltaLines).toString()
+        );
+      });
+    });
+    __privateAdd(this, _stopDragging, () => {
+      __privateGet(this, _resizeState).isDragging = false;
+      __privateGet(this, _resizeState).lines += __privateGet(this, _resizeState).deltaLines;
+      this.rows = __privateGet(this, _resizeState).lines;
+      __privateGet(this, _resizeState).deltaLines = 0;
+      document.removeEventListener("mousemove", __privateGet(this, _onDrag));
+      document.removeEventListener("mouseup", __privateGet(this, _stopDragging));
+    });
+    this.value = "";
+  }
+  /**
+   * A reference to the clear button element. Returns null if there is no clear button.
+   * Intended for use in integration tests.
+   */
+  test_getClearButton() {
+    var _a;
+    return (_a = this.shadowRoot) == null ? void 0 : _a.querySelector("#clear-button");
+  }
+  /**
+   * A reference to the field element. This does not refer to the input element itself,
+   * but the wrapper that makes up the visual field.
+   * Intended for use in integration tests.
+   */
+  test_getFieldElement() {
+    var _a;
+    return (_a = this.shadowRoot) == null ? void 0 : _a.querySelector("#field");
   }
   connectedCallback() {
     super.connectedCallback();
@@ -242,7 +241,7 @@ var GdsTextarea = class extends GdsFormControlElement {
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    __privateMethod(this, _addResizeHandleListener, addResizeHandleListener_fn).call(this);
+    __privateGet(this, _stopDragging).call(this);
   }
   render() {
     return html`${choose(this.variant, [
@@ -255,54 +254,45 @@ var GdsTextarea = class extends GdsFormControlElement {
   }
   _setAutoHeight() {
     this.elTextareaAsync.then((element) => {
-      const lines = (element.value.split("\n").length || 1).toString();
-      element == null ? void 0 : element.style.setProperty("--_lines", lines.toString());
+      this.rows = Math.max(this.rows, element.value.split("\n").length);
+      __privateGet(this, _resizeState).lines = Number(this.rows);
+      element == null ? void 0 : element.style.setProperty("--_lines", this.rows.toString());
     });
   }
 };
 _renderDefault = new WeakSet();
 renderDefault_fn = function() {
+  var _a;
   return html`
       <gds-form-control-header>
         <label for="input" slot="label">${this.label}</label>
-        <span slot="supporting-text" id="supporting-text"
-          >${this.supportingText}</span
-        >
+        <span slot="supporting-text" id="supporting-text">
+          ${this.supportingText}
+        </span>
         <slot
           name="extended-supporting-text"
           slot="extended-supporting-text"
         ></slot>
       </gds-form-control-header>
 
-      <gds-flex
-        position="relative"
-        align-items="flex-start"
-        justify-content="center"
-        gap="xs"
-        level="3"
-        padding=${!this.trailSlotOccupied ? "s s s m" : "s m s m"}
-        border-radius="xs"
-        .background=${this.disabled ? "disabled" : this.invalid ? "negative-secondary" : "secondary"}
-        .border=${this.disabled ? "" : this.invalid ? "4xs/negative" : "4xs/secondary"}
-        class="field ${this.invalid ? "invalid" : ""}"
+      <gds-field-base
+        id="field"
+        .disabled=${this.disabled}
+        .invalid=${this.invalid}
         @click=${__privateGet(this, _handleFieldClick)}
-        cursor="text"
+        multiline
       >
-        ${__privateMethod(this, _renderSlotLead, renderSlotLead_fn).call(this)} ${__privateMethod(this, _renderNativeTextarea, renderNativeTextarea_fn).call(this)}
-
-        <gds-flex gap="xs" align-items="center" block-size="l">
-          ${__privateMethod(this, _renderClearButton, renderClearButton_fn).call(this)} ${__privateMethod(this, _renderSlotTrail, renderSlotTrail_fn).call(this)}
-        </gds-flex>
+        ${__privateMethod(this, _renderFieldContents, renderFieldContents_fn).call(this)}
         ${when(
     this.resize === "auto",
     () => __privateMethod(this, _renderResizeHandle, renderResizeHandle_fn).call(this),
     () => nothing
   )}
-      </gds-flex>
+      </gds-field-base>
 
       <gds-form-control-footer
-        .charCounter=${__privateGet(this, _shouldShowRemainingChars, shouldShowRemainingChars_get) && this.maxlength - this.value.length}
-        .validationMessage=${this.invalid && this.validationMessage}
+        .charCounter=${__privateGet(this, _shouldShowRemainingChars, shouldShowRemainingChars_get) && this.maxlength - (((_a = this.value) == null ? void 0 : _a.length) || 0)}
+        .validationMessage=${this.invalid && (this.errorMessage || this.validationMessage)}
       ></gds-form-control-footer>
     `;
 };
@@ -315,15 +305,23 @@ _handleOnInput = new WeakMap();
 _handleOnChange = new WeakMap();
 _handleFieldClick = new WeakMap();
 _handleClearBtnClick = new WeakMap();
+_renderFieldContents = new WeakSet();
+renderFieldContents_fn = function() {
+  const elements = [
+    __privateMethod(this, _renderSlotLead, renderSlotLead_fn).call(this),
+    __privateMethod(this, _renderNativeTextarea, renderNativeTextarea_fn).call(this),
+    __privateMethod(this, _renderClearButton, renderClearButton_fn).call(this),
+    __privateMethod(this, _renderSlotTrail, renderSlotTrail_fn).call(this)
+  ];
+  return elements.map((element) => html`${element}`);
+};
 _renderSlotLead = new WeakSet();
 renderSlotLead_fn = function() {
-  return html` <slot name="lead"></slot> `;
+  return html`<slot slot="lead" name="lead"></slot>`;
 };
 _renderSlotTrail = new WeakSet();
 renderSlotTrail_fn = function() {
-  return html`
-      <slot name="trail" @slotchange=${__privateMethod(this, _handleSlotChange, handleSlotChange_fn)}></slot>
-    `;
+  return html`<slot slot="trail" name="trail"></slot>`;
 };
 _addResizeHandleListener = new WeakSet();
 addResizeHandleListener_fn = function() {
@@ -331,67 +329,20 @@ addResizeHandleListener_fn = function() {
   if (resizeHandle) {
     resizeHandle.addEventListener(
       "mousedown",
-      __privateMethod(this, _startDragging, startDragging_fn).bind(this)
+      __privateGet(this, _startDragging)
     );
   }
 };
-_startDragging = new WeakSet();
-startDragging_fn = function(event) {
-  event.preventDefault();
-  this.isDragging = true;
-  this.lastMouseY = event.clientY;
-  document.addEventListener("mousemove", __privateMethod(this, _onDrag, onDrag_fn).bind(this));
-  document.addEventListener("mouseup", __privateMethod(this, _stopDragging, stopDragging_fn).bind(this));
-};
-_onDrag = new WeakSet();
-onDrag_fn = function(event) {
-  if (!this.isDragging)
-    return;
-  const deltaY = event.clientY - this.lastMouseY;
-  if (Math.abs(deltaY) >= 20) {
-    if (deltaY > 0) {
-      this.lines += 1;
-    } else {
-      this.lines = Math.max(1, this.lines - 1);
-    }
-    this.elTextareaAsync.then((element) => {
-      element == null ? void 0 : element.style.setProperty("--_lines", this.lines.toString());
-    });
-    this.lastMouseY = event.clientY;
-  }
-};
-_stopDragging = new WeakSet();
-stopDragging_fn = function() {
-  this.isDragging = false;
-  document.removeEventListener("mousemove", __privateMethod(this, _onDrag, onDrag_fn).bind(this));
-  document.removeEventListener("mouseup", __privateMethod(this, _stopDragging, stopDragging_fn).bind(this));
-};
+_resizeState = new WeakMap();
+_startDragging = new WeakMap();
+_onDrag = new WeakMap();
+_stopDragging = new WeakMap();
 _renderResizeHandle = new WeakSet();
 renderResizeHandle_fn = function() {
   return html`
-      <gds-container
-        class="resize-handle"
-        position="absolute"
-        inset="auto auto -10px 0"
-        width="100%"
-        height="20px"
-        cursor="row-resize"
-        z-index="2"
-        @mousedown=${__privateMethod(this, _startDragging, startDragging_fn)}
-      ></gds-container>
+      <div class="resize-handle" @mousedown=${__privateGet(this, _startDragging)}></div>
     `;
 };
-_handleSlotChange = new WeakSet();
-handleSlotChange_fn = function(event) {
-  const slot = event.target;
-  const assignedNodes = slot.assignedNodes({ flatten: true });
-  this.trailSlotOccupied = assignedNodes.length > 0 && assignedNodes.some(
-    (node) => {
-      var _a;
-      return node.nodeType === Node.ELEMENT_NODE || node.nodeType === Node.TEXT_NODE && ((_a = node.textContent) == null ? void 0 : _a.trim()) !== "";
-    }
-  );
-};
 _renderNativeTextarea = new WeakSet();
 renderNativeTextarea_fn = function() {
   return html`
@@ -400,7 +351,6 @@ renderNativeTextarea_fn = function() {
         @change=${__privateGet(this, _handleOnChange)}
         .value=${this.value}
         id="input"
-        style="${this.invalid ? "color: var(--gds-color-l3-content-negative);" : this.disabled ? "color: currentColor;pointer-events:none;" : null}"
         aria-describedby="supporting-text"
         placeholder=" "
         ${forwardAttributes(__privateGet(this, _forwardableAttrs))}
@@ -409,7 +359,8 @@ renderNativeTextarea_fn = function() {
 };
 _renderClearButton = new WeakSet();
 renderClearButton_fn = function() {
-  if (this.clearable && this.value.length > 0)
+  var _a;
+  if (this.clearable && (((_a = this.value) == null ? void 0 : _a.length) || 0) > 0)
     return html`
         <gds-button
           size="small"
@@ -418,6 +369,8 @@ renderClearButton_fn = function() {
           ?disabled="${this.disabled}"
           label="${msg("Clear input")}"
           @click=${__privateGet(this, _handleClearBtnClick)}
+          slot="action"
+          id="clear-button"
         >
           <gds-icon-cross-small />
         </gds-button>
@@ -430,12 +383,6 @@ shouldShowRemainingChars_get = function() {
   return this.maxlength < Number.MAX_SAFE_INTEGER;
 };
 GdsTextarea.styles = [tokens, styles];
-__decorateClass([
-  property()
-], GdsTextarea.prototype, "value", 2);
-__decorateClass([
-  property()
-], GdsTextarea.prototype, "label", 2);
 __decorateClass([
   styleExpressionProperty({
     valueTemplate: (v) => v,
@@ -446,26 +393,9 @@ __decorateClass([
     }
   })
 ], GdsTextarea.prototype, "rows", 2);
-__decorateClass([
-  state()
-], GdsTextarea.prototype, "lines", 2);
 __decorateClass([
   property({ attribute: "supporting-text" })
 ], GdsTextarea.prototype, "supportingText", 2);
-__decorateClass([
-  property({
-    attribute: "show-extended-supporting-text",
-    type: Boolean,
-    reflect: true
-  })
-], GdsTextarea.prototype, "showExtendedSupportingText", 2);
-__decorateClass([
-  property({
-    attribute: "disabled",
-    type: Boolean,
-    reflect: true
-  })
-], GdsTextarea.prototype, "disabled", 2);
 __decorateClass([
   property({ type: Boolean })
 ], GdsTextarea.prototype, "clearable", 2);
@@ -484,9 +414,6 @@ __decorateClass([
 __decorateClass([
   query("textarea")
 ], GdsTextarea.prototype, "elTextarea", 2);
-__decorateClass([
-  state()
-], GdsTextarea.prototype, "trailSlotOccupied", 2);
 __decorateClass([
   watch("value")
 ], GdsTextarea.prototype, "_setAutoHeight", 1);

package/chunks/{chunk.BWVUFYGS.js → chunk.NRNM3BUT.js}

@@ -48,7 +48,9 @@ var styles = css`
 
     #extended-supporting-text {
       opacity: 1;
-      transition: var(--_transition);
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      transition-duration: 368ms;
+      transition-property: all;
       font-size: var(--gds-text-size-body-s);
       line-height: var(--gds-text-line-height-body-s);
       border-radius: var(--gds-space-xs);