@sebgroup/green-core 2.5.3 → 2.6.0

package/components/alert/alert.styles.js

@@ -61,7 +61,7 @@ const style = css`
   .wrapper {
     grid-area: wrapper;
     display: flex;
-    gap: var(--gds-sys-space-s);
+    gap: var(--gds-sys-space-xs);
 
     .message {
       max-width: 80ch;
@@ -69,7 +69,7 @@ const style = css`
   }
 
   .dismissible .wrapper {
-    margin-top: var(--gds-sys-space-2xs);
+    margin-top: var(--gds-sys-space-3xs);
   }
 
   .has-action {
@@ -81,7 +81,7 @@ const style = css`
   }
 
   .has-action.dismissible .close {
-    margin-top: var(--gds-sys-space-2xs);
+    margin-top: var(--gds-sys-space-3xs);
   }
 
   .message {

package/components/badge/badge.component.d.ts

@@ -36,6 +36,7 @@ export declare class GdsBadge extends GdsBadge_base {
      */
     rounded: boolean;
     mainSlotOccupied: boolean;
+    leadSlotOccupied: boolean;
     render(): any;
 }
 export {};

package/components/badge/badge.component.js

@@ -3,7 +3,7 @@ import {
   __privateAdd,
   __privateMethod
 } from "../../chunks/chunk.QU3DSPNU.js";
-var _GdsBadge_instances, renderLeadSlot_fn, renderMainSlot_fn, handleSlotChange_fn, renderTrailSlot_fn;
+var _GdsBadge_instances, handleSlotChange_fn, renderLeadSlot_fn, renderMainSlot_fn, renderTrailSlot_fn;
 import { property, state } from "lit/decorators.js";
 import { GdsElement } from "../../gds-element.js";
 import { html } from "../../scoping.js";
@@ -27,6 +27,7 @@ let GdsBadge = class extends withSizeXProps(
     this.notification = false;
     this.rounded = false;
     this.mainSlotOccupied = false;
+    this.leadSlotOccupied = false;
   }
   render() {
     let background;
@@ -66,20 +67,70 @@ let GdsBadge = class extends withSizeXProps(
           break;
       }
     }
-    const padding = this.size === "small" || this.notification ? "2xs" : "xs";
-    const blockSize = this.mainSlotOccupied ? this.size === "small" || this.notification ? "m" : "l" : "xs";
+    const padding = (() => {
+      const paddings = {
+        notification: {
+          occupied: "4xs 2xs",
+          default: "3xs"
+        },
+        small: {
+          occupied: "4xs 3xs",
+          default: "4xs 3xs"
+        },
+        default: {
+          occupied: "3xs xs 3xs 2xs",
+          default: "4xs xs"
+        }
+      };
+      if (this.notification) {
+        return paddings.notification[this.mainSlotOccupied ? "occupied" : "default"];
+      }
+      const isSmall = this.size === "small";
+      return paddings[isSmall ? "small" : "default"][this.leadSlotOccupied ? "occupied" : "default"];
+    })();
+    const blockSize = (() => {
+      const sizes = {
+        occupied: {
+          small: "m",
+          default: "l"
+        },
+        default: "xs"
+      };
+      return this.mainSlotOccupied ? sizes.occupied[this.size === "small" || this.notification ? "small" : "default"] : sizes.default;
+    })();
+    const inlineSize = (() => {
+      const sizes = {
+        notification: {
+          occupied: "l",
+          default: "0"
+        },
+        default: "l"
+      };
+      return this.notification ? sizes.notification[this.mainSlotOccupied ? "occupied" : "default"] : sizes.default;
+    })();
+    const borderRadius = (() => {
+      const radiuses = {
+        small: "3xs",
+        notification: "max",
+        default: "2xs"
+      };
+      if (this.rounded) return "max";
+      if (this.notification) return radiuses.notification;
+      return this.size === "small" ? radiuses.small : radiuses.default;
+    })();
     return html`<gds-flex
       level="3"
       background=${background}
       color=${color}
-      gap="${this.notification ? "" : "2xs"}"
+      gap="${this.notification ? "" : "3xs"}"
       align-items="center"
-      justify-content="flex-start"
-      padding-inline="${padding}"
-      border-radius="${this.notification || this.rounded ? "max" : "2xs"}"
-      block-size="${blockSize}"
+      justify-content="${this.notification ? "center" : "flex-start"}"
+      padding="${padding}"
+      min-height="${blockSize}"
+      border-radius="${borderRadius}"
       width="100%"
-      font="${this.size === "small" || this.notification ? "detail-regular-xs" : "detail-regular-s"}"
+      min-width="${inlineSize}"
+      font="${this.size === "small" || this.notification ? "detail-book-xs" : "detail-book-s"}"
     >
       ${__privateMethod(this, _GdsBadge_instances, renderLeadSlot_fn).call(this)} ${__privateMethod(this, _GdsBadge_instances, renderMainSlot_fn).call(this)}
       ${__privateMethod(this, _GdsBadge_instances, renderTrailSlot_fn).call(this)}
@@ -87,20 +138,25 @@ let GdsBadge = class extends withSizeXProps(
   }
 };
 _GdsBadge_instances = new WeakSet();
+handleSlotChange_fn = function(event, stateProperty) {
+  const slot = event.target;
+  const assignedNodes = slot.assignedNodes({ flatten: true });
+  this[stateProperty] = assignedNodes.length > 0 && assignedNodes.some(
+    (node) => node.nodeType === Node.ELEMENT_NODE || node.nodeType === Node.TEXT_NODE && node.textContent?.trim() !== ""
+  );
+};
 renderLeadSlot_fn = function() {
   if (this.size !== "small" || !this.notification) {
-    return html`<slot name="lead"></slot>`;
+    return html`<slot
+        name="lead"
+        @slotchange=${(e) => __privateMethod(this, _GdsBadge_instances, handleSlotChange_fn).call(this, e, "leadSlotOccupied")}
+      ></slot>`;
   }
 };
 renderMainSlot_fn = function() {
-  return html`<slot @slotchange=${__privateMethod(this, _GdsBadge_instances, handleSlotChange_fn)}></slot>`;
-};
-handleSlotChange_fn = function(event) {
-  const slot = event.target;
-  const assignedNodes = slot.assignedNodes({ flatten: true });
-  this.mainSlotOccupied = assignedNodes.length > 0 && assignedNodes.some(
-    (node) => node.nodeType === Node.ELEMENT_NODE || node.nodeType === Node.TEXT_NODE && node.textContent?.trim() !== ""
-  );
+  return html`<slot
+      @slotchange=${(e) => __privateMethod(this, _GdsBadge_instances, handleSlotChange_fn).call(this, e, "mainSlotOccupied")}
+    ></slot>`;
 };
 renderTrailSlot_fn = function() {
   return html`<slot name="trail"></slot>`;
@@ -129,6 +185,9 @@ __decorateClass([
 __decorateClass([
   state()
 ], GdsBadge.prototype, "mainSlotOccupied", 2);
+__decorateClass([
+  state()
+], GdsBadge.prototype, "leadSlotOccupied", 2);
 GdsBadge = __decorateClass([
   gdsCustomElement("gds-badge", { dependsOn: [GdsFlex] })
 ], GdsBadge);

package/components/button/button.styles.js

@@ -18,7 +18,7 @@ const style = css`
     }
 
     .button {
-      --_block-size: var(--gds-sys-space-3xl);
+      --_block-size: var(--gds-sys-space-4xl);
       display: flex;
       align-items: center;
       justify-content: center;
@@ -31,13 +31,13 @@ const style = css`
       border-radius: var(--gds-sys-radius-max);
       font-family: inherit;
       font: var(--gds-sys-text-detail-book-m);
-      gap: var(--gds-sys-space-s);
+      gap: var(--gds-sys-space-xs);
       outline-color: transparent;
-      outline-offset: var(--gds-sys-space-3xs);
+      outline-offset: var(--gds-sys-space-4xs);
       outline-style: solid;
-      outline-width: var(--gds-sys-space-3xs);
+      outline-width: var(--gds-sys-space-4xs);
       padding-block: var(--gds-sys-space-s);
-      padding-inline: var(--gds-sys-space-l);
+      padding-inline: var(--gds-sys-space-xl);
       position: relative;
       text-decoration: none;
       transition-property: color, border-colorm, background;
@@ -143,20 +143,24 @@ const style = css`
   @layer sizes {
     :host([size='xs']) .button {
       --_block-size: var(--gds-sys-space-l);
-      font: var(--gds-sys-text-detail-book-s);
-      padding-inline: var(--gds-sys-space-m);
+      gap: var(--gds-sys-space-4xs);
+      font: var(--gds-sys-text-detail-book-xs);
+      padding-inline: var(--gds-sys-space-s);
     }
 
     :host([size='small']) .button {
-      --_block-size: var(--gds-sys-space-xl);
+      --_block-size: var(--gds-sys-space-2xl);
       font: var(--gds-sys-text-detail-book-s);
-      padding-block: var(--gds-sys-space-2xs);
+      gap: var(--gds-sys-space-3xs);
+      padding-block: var(--gds-sys-space-3xs);
       padding-inline: var(--gds-sys-space-m);
     }
 
     :host([size='medium']) .button {
-      --_block-size: var(--gds-sys-space-2xl);
+      --_block-size: var(--gds-sys-space-3xl);
+      gap: var(--gds-sys-space-2xs);
       font: var(--gds-sys-text-detail-book-m);
+      padding-inline: var(--gds-sys-space-l);
     }
   }
 

package/components/calendar/calendar.styles.js

@@ -21,7 +21,7 @@ const style = css`
       padding: 1ch;
 
       &.small {
-        border-spacing: var(--gds-sys-space-2xs);
+        border-spacing: var(--gds-sys-space-3xs);
 
         thead th {
           width: var(--gds-sys-space-xl);
@@ -59,7 +59,7 @@ const style = css`
         box-sizing: border-box;
         text-align: center;
         user-select: none;
-        border-width: var(--gds-sys-space-3xs);
+        border-width: var(--gds-sys-space-4xs);
         border-style: solid;
         border-color: transparent;
         border-radius: var(--gds-sys-radius-max);
@@ -67,8 +67,7 @@ const style = css`
         outline-style: solid;
         outline-color: transparent;
         outline-width: 0px;
-        outline-offset: var(--gds-sys-space-3xs);
-        //--_background: transparent;
+        outline-offset: var(--gds-sys-space-4xs);
 
         &.short {
           width: var(--gds-sys-space-4xl);
@@ -141,7 +140,7 @@ const style = css`
 
         &:focus-visible {
           outline-color: var(--gds-sys-color-content-neutral-01);
-          outline-width: var(--gds-sys-space-3xs);
+          outline-width: var(--gds-sys-space-4xs);
         }
 
         &.small {

package/components/card/card.component.js

@@ -14,9 +14,9 @@ let GdsCard = class extends GdsDiv {
   constructor() {
     super();
     this.variant = "primary";
-    this.padding = "s;m{l}";
-    this["border-radius"] = "xs;m{s}";
-    this["gap"] = "s;m{l}";
+    this.padding = "m;m{l}";
+    this["border-radius"] = "s";
+    this["gap"] = "m;m{l}";
   }
   render() {
     return html`<slot></slot>`;
@@ -30,7 +30,7 @@ GdsCard.styles = [
         border-color: var(--_border-color);
         background-color: var(--_background-color);
         color: var(--_color);
-        border-width: var(--gds-sys-space-4xs);
+        border-width: var(--gds-sys-space-5xs);
         border-style: solid;
         display: flex;
         flex-direction: column;

package/components/checkbox/checkbox-group/checkbox-group.styles.js

@@ -9,6 +9,10 @@ const styles = css`
 
     /* Color */
     --_checkbox-label-color: var(--gds-sys-color-l3-content-tertiary);
+
+    /* Perimiter */
+    --_perimeter-size: var(--gds-sys-space-2xl);
+    --_container-gap: var(--gds-sys-space-s);
   }
 
   :host(:invalid) {
@@ -17,7 +21,9 @@ const styles = css`
 
   :host([size='small']) {
     --_font-label: var(--gds-sys-text-detail-book-s);
-    --_font-supporting-text: var(--gds-sys-text-detail-regular-s);
+    --_font-supporting-text: var(--gds-sys-text-detail-regular-xs);
+    --_perimeter-size: var(--gds-sys-space-xl);
+    --_container-gap: var(--gds-sys-space-xs);
   }
 
   .checkbox-group {
@@ -26,6 +32,10 @@ const styles = css`
     gap: var(--gds-sys-space-m);
   }
 
+  :host([size='small']) .checkbox-group {
+    gap: var(--gds-sys-space-xs);
+  }
+
   .content {
     display: flex;
     position: relative;
@@ -36,13 +46,21 @@ const styles = css`
   .direction-row .content {
     flex-direction: row;
     flex-wrap: wrap;
-    gap: var(--gds-sys-space-l);
+    gap: var(--gds-sys-space-s) var(--gds-sys-space-xl);
   }
 
   .direction-column .content {
     flex-direction: column;
+    gap: var(--gds-sys-space-s);
+  }
+
+  :host([size='small']) .direction-column .content {
     gap: var(--gds-sys-space-xs);
   }
+
+  :host([size='small']) .direction-row .content {
+    gap: var(--gds-sys-space-xs) var(--gds-sys-space-m);
+  }
 `;
 export {
   styles

package/components/datepicker/datepicker.styles.js

@@ -13,7 +13,7 @@ const style = css`
       align-items: center;
       justify-content: flex-start;
       inline-size: 12ch;
-      gap: var(--gds-sys-space-4xs);
+      gap: var(--gds-sys-space-5xs);
       font: var(--gds-sys-text-detail-regular-m);
     }
 
@@ -29,13 +29,13 @@ const style = css`
       height: 100%;
       box-sizing: border-box;
       outline: none;
-      padding-block: var(--gds-sys-space-3xs);
+      padding-block: var(--gds-sys-space-4xs);
       text-transform: uppercase;
       line-height: 1;
       text-align: center;
-      padding: var(--gds-sys-space-3xs);
-      margin: calc(-1 * var(--gds-sys-space-3xs));
-      border-radius: var(--gds-sys-radius-2xs);
+      padding: var(--gds-sys-space-4xs);
+      margin: calc(-1 * var(--gds-sys-space-4xs));
+      border-radius: var(--gds-sys-radius-3xs);
 
       &:focus-visible {
         background-color: var(--gds-sys-color-l3-neutral-01);

package/components/details/details.styles.js

@@ -4,7 +4,7 @@ const style = css`
   @layer base, reset;
   @layer base {
     .details {
-      border-bottom: solid var(--gds-sys-space-4xs)
+      border-bottom: solid var(--gds-sys-space-5xs)
         var(--gds-sys-color-border-subtle-01);
       font: var(--gds-sys-text-body-regular-m);
       color: var(--gds-sys-color-content-neutral-01);
@@ -17,7 +17,7 @@ const style = css`
       align-items: center;
       list-style: none;
       user-select: none;
-      outline-offset: var(--gds-sys-space-2xs);
+      outline-offset: var(--gds-sys-space-3xs);
       outline-color: currentColor;
       transition: all 120ms;
       color: var(--gds-sys-color-content-neutral-01);

package/components/dialog/dialog.component.js

@@ -5,7 +5,7 @@ import {
   __privateMethod,
   __privateSet
 } from "../../chunks/chunk.QU3DSPNU.js";
-var _returnValue, _handleNativeClose, _dispatchCloseEvent, _dispatchShowEvent, _dispatchUiStateEvent, _GdsDialog_instances, handleTriggerSlotChange_fn, _handleTriggerClick, _handleClickOutside;
+var _returnValue, _clickStartedInside, _handleNativeClose, _dispatchCloseEvent, _dispatchShowEvent, _dispatchUiStateEvent, _GdsDialog_instances, handleTriggerSlotChange_fn, _handleTriggerClick, _handleClickOutside;
 import { localized, msg } from "@lit/localize";
 import { nothing } from "lit";
 import { property, query } from "lit/decorators.js";
@@ -28,7 +28,7 @@ import { GdsButton } from "../button/button.component.js";
 import { GdsCard } from "../card/card.component.js";
 import { GdsDiv } from "../div/div.component.js";
 import { GdsFlex } from "../flex/flex.component.js";
-import { IconCrossSmall } from "../icon/icons/cross-small.component.js";
+import { IconCrossLarge } from "../icon/icons/cross-large.component.js";
 import DialogStyles from "./dialog.styles.js";
 import {
   lockBodyScrolling,
@@ -47,17 +47,19 @@ let GdsDialog = class extends withSizeXProps(
     this.placement = "initial";
     this.scrollable = false;
     __privateAdd(this, _returnValue);
+    __privateAdd(this, _clickStartedInside, false);
     __privateAdd(this, _handleNativeClose, (e) => {
       const dialog = e.target;
-      const returnValue = dialog.returnValue;
+      let returnValue = dialog.returnValue;
       if (returnValue !== "prop-change") {
+        returnValue = returnValue || "native-close";
         if (!__privateGet(this, _dispatchCloseEvent).call(this, returnValue)) {
           return;
         }
-        this.close(returnValue || "native-close");
+        this.close(returnValue);
         return;
       }
-      this.close(returnValue || "native-close");
+      this.close(returnValue);
     });
     __privateAdd(this, _dispatchCloseEvent, (reason) => {
       if (__privateGet(this, _dispatchUiStateEvent).call(this, reason)) {
@@ -89,14 +91,15 @@ let GdsDialog = class extends withSizeXProps(
       const e = evt;
       const dialog = this._elDialog;
       const isNotEnterKey = e.clientX > 0 || e.clientY > 0;
-      if (isNotEnterKey && dialog && this.open) {
+      if (isNotEnterKey && e.target === this && dialog && this.open) {
         const rect = dialog.getBoundingClientRect();
         const isInDialog = rect.top <= e.clientY && e.clientY <= rect.top + rect.height && rect.left <= e.clientX && e.clientX <= rect.left + rect.width;
         const closeReason = "click-outside";
-        if (!isInDialog && __privateGet(this, _dispatchCloseEvent).call(this, closeReason)) {
+        if (!isInDialog && !__privateGet(this, _clickStartedInside) && __privateGet(this, _dispatchCloseEvent).call(this, closeReason)) {
           this.close(closeReason);
         }
       }
+      __privateSet(this, _clickStartedInside, false);
     });
   }
   /**
@@ -126,6 +129,7 @@ let GdsDialog = class extends withSizeXProps(
       ${when(
       this.open,
       () => html`<dialog
+            closedby="closerequest"
             @close=${__privateGet(this, _handleNativeClose)}
             class=${classMap({
         [this.variant]: true,
@@ -135,23 +139,28 @@ let GdsDialog = class extends withSizeXProps(
           >
             <gds-card
               class="card"
+              padding="xl"
               variant="secondary"
               box-shadow="xl"
-              gap="l"
-              border-radius="s"
+              border-radius="m"
               max-width="100%"
+              @mousedown=${() => __privateSet(this, _clickStartedInside, true)}
             >
               <slot name="dialog">
                 <gds-flex justify-content="space-between">
                   <h2 id="heading">${this.heading}</h2>
                   <gds-button
                     id="close-btn"
-                    rank="secondary"
+                    rank="tertiary"
                     size="small"
                     label=${msg("Close")}
                     @click=${() => this.close("btn-close")}
-                    ><gds-icon-cross-small></gds-icon-cross-small
-                  ></gds-button>
+                  >
+                    <gds-icon-cross-large
+                      size="m"
+                      stroke="2"
+                    ></gds-icon-cross-large>
+                  </gds-button>
                 </gds-flex>
                 <gds-div
                   id="content"
@@ -174,9 +183,9 @@ let GdsDialog = class extends withSizeXProps(
                       rank="secondary"
                       >${msg("Cancel")}</gds-button
                     >
-                    <gds-button value="ok" @click=${() => this.close("btn-ok")}
-                      >Ok</gds-button
-                    >
+                    <gds-button value="ok" @click=${() => this.close("btn-ok")}>
+                      Ok
+                    </gds-button>
                   </slot>
                 </gds-flex>
               </slot>
@@ -190,9 +199,9 @@ let GdsDialog = class extends withSizeXProps(
       this.updateComplete.then(() => {
         this._elDialog?.showModal();
         lockBodyScrolling(this);
-        document.removeEventListener("click", __privateGet(this, _handleClickOutside));
+        this.removeEventListener("click", __privateGet(this, _handleClickOutside));
         requestAnimationFrame(
-          () => document.addEventListener("click", __privateGet(this, _handleClickOutside))
+          () => this.addEventListener("click", __privateGet(this, _handleClickOutside))
         );
         if (isIOS) {
           this._elDialog?.focus();
@@ -208,6 +217,7 @@ let GdsDialog = class extends withSizeXProps(
   }
 };
 _returnValue = new WeakMap();
+_clickStartedInside = new WeakMap();
 _handleNativeClose = new WeakMap();
 _dispatchCloseEvent = new WeakMap();
 _dispatchShowEvent = new WeakMap();
@@ -250,7 +260,7 @@ __decorateClass([
 ], GdsDialog.prototype, "_handleOpenChange", 1);
 GdsDialog = __decorateClass([
   gdsCustomElement("gds-dialog", {
-    dependsOn: [GdsButton, GdsCard, GdsDiv, GdsFlex, IconCrossSmall]
+    dependsOn: [GdsButton, GdsCard, GdsDiv, GdsFlex, IconCrossLarge]
   }),
   localized()
 ], GdsDialog);

package/components/dialog/dialog.styles.js

@@ -124,6 +124,7 @@ const style = css`
       margin: 0;
       padding: 0;
       font: var(--gds-sys-text-heading-s);
+      margin-block-start: var(--gds-sys-space-4xs);
     }
   }
 `;

package/components/div/div.styles.js

@@ -10,9 +10,9 @@ const style = css`
   }
   :host(:focus-visible) {
     outline-color: color-mix(in srgb, currentcolor, #000 100%);
-    outline-offset: var(--gds-sys-space-3xs);
+    outline-offset: var(--gds-sys-space-4xs);
     outline-style: solid;
-    outline-width: var(--gds-sys-space-3xs);
+    outline-width: var(--gds-sys-space-4xs);
   }
 `;
 var div_styles_default = style;

package/components/dropdown/dropdown.component.js

@@ -24,7 +24,7 @@ import { watch } from "../../utils/decorators/watch.js";
 import { GdsFormControlElement } from "../form/form-control.js";
 import { IconCheckmark } from "../icon/icons/checkmark.component.js";
 import { IconChevronBottom } from "../icon/icons/chevron-bottom.component.js";
-import { IconCrossLarge } from "../icon/icons/cross-large.component.js";
+import { IconCrossSmall } from "../icon/icons/cross-small.component.js";
 import { GdsPopover } from "../popover/popover.component.js";
 import DropdownStyles from "./dropdown.styles.js";
 export * from "../../primitives/listbox/option.component.js";
@@ -347,9 +347,9 @@ let GdsDropdown = class extends GdsFormControlElement {
                 size=${this.size === "small" ? "xs" : "small"}
                 label="${msg("Clear selection")}"
                 @click=${__privateGet(this, _handleClearButton)}
-                slot="trail"
+                slot="action"
               >
-                <gds-icon-cross-large></gds-icon-cross-large>
+                <gds-icon-cross-small></gds-icon-cross-small>
               </gds-button>`
     )}
           ${when(this.combobox && !this.multiple, () => __privateGet(this, _renderCombobox).call(this))}
@@ -357,7 +357,7 @@ let GdsDropdown = class extends GdsFormControlElement {
       !this.combobox || this.multiple,
       () => __privateGet(this, _renderTriggerButton).call(this)
     )}
-          <gds-icon-chevron-bottom slot="trail"></gds-icon-chevron-bottom>
+          <gds-icon-chevron-bottom slot="action"></gds-icon-chevron-bottom>
         </gds-field-base>
 
         ${when(
@@ -578,7 +578,7 @@ GdsDropdown = __decorateClass([
       GdsPopover,
       IconCheckmark,
       IconChevronBottom,
-      IconCrossLarge
+      IconCrossSmall
     ]
   }),
   localized()

package/components/dropdown/dropdown.styles.js

@@ -42,7 +42,7 @@ const style = css`
       outline: none;
       color: var(--gds-sys-color-content-disabled-01);
       border-color: var(--gds-sys-color-border-interactive);
-      border-width: 0 0 var(--gds-sys-space-4xs) 0;
+      border-width: 0 0 var(--gds-sys-space-5xs) 0;
       border-style: solid;
       width: 100%;
       padding: var(--gds-sys-space-m);

package/components/input/input.component.d.ts

@@ -48,7 +48,7 @@ declare class Input extends GdsFormControlElement<string> {
     /** Controls whether and how text input is automatically capitalized as it is entered by the user. */
     autocapitalize: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';
     /** Indicates whether the browser's autocorrect feature is on or off. */
-    autocorrect?: 'off' | 'on';
+    autocorrect: boolean;
     /**
      * Specifies what permission the browser has to provide assistance in filling out form field values. Refer to
      * [this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.

package/components/input/input.component.js

@@ -24,7 +24,7 @@ import {
 import { GdsButton } from "../button/button.component.js";
 import { GdsFlex } from "../flex/flex.component.js";
 import { GdsFormControlElement } from "../form/form-control.js";
-import { IconCrossLarge } from "../icon/icons/cross-large.component.js";
+import { IconCrossSmall } from "../icon/icons/cross-small.component.js";
 import InputStyles from "./input.styles.js";
 let Input = class extends GdsFormControlElement {
   constructor() {
@@ -38,6 +38,7 @@ let Input = class extends GdsFormControlElement {
     this.plain = false;
     this.type = "text";
     this.autocapitalize = "off";
+    this.autocorrect = false;
     this.autofocus = false;
     this.spellcheck = true;
     __privateAdd(this, _handleOnInput, (e) => {
@@ -187,7 +188,7 @@ renderClearButton_fn = function() {
         id="clear-button"
         slot="action"
       >
-        <gds-icon-cross-large />
+        <gds-icon-cross-small></gds-icon-cross-small>
       </gds-button>`;
   else return nothing;
 };
@@ -233,7 +234,7 @@ __decorateClass([
   property()
 ], Input.prototype, "autocapitalize", 2);
 __decorateClass([
-  property()
+  property({ type: Boolean })
 ], Input.prototype, "autocorrect", 2);
 __decorateClass([
   property()
@@ -278,7 +279,7 @@ GdsInput = __decorateClass([
       GdsFieldBase,
       GdsFlex,
       GdsButton,
-      IconCrossLarge
+      IconCrossSmall
     ]
   })
 ], GdsInput);

package/components/popover/popover.styles.js

@@ -29,7 +29,7 @@ const style = css`
       right: 0;
       margin: 0;
       box-shadow: var(--gds-sys-shadow-l-01);
-      border: var(--gds-sys-space-4xs) solid
+      border: var(--gds-sys-space-5xs) solid
         var(--gds-sys-color-border-subtle-01);
       border-radius: var(--gds-sys-radius-s);
       overscroll-behavior: contain;