@sebgroup/green-core 1.10.0 → 1.12.0

package/index.js

@@ -77,8 +77,8 @@ function watch(propertyName, options) {
     const { update } = proto;
     const watchedProperties = Array.isArray(propertyName) ? propertyName : [propertyName];
     proto.update = function(changedProps) {
-      watchedProperties.forEach((property11) => {
-        const key = property11;
+      watchedProperties.forEach((property12) => {
+        const key = property12;
         if (changedProps.has(key)) {
           const oldValue = changedProps.get(key);
           const newValue = this[key];
@@ -144,7 +144,7 @@ function watchMediaQuery(q) {
 // libs/core/src/utils/helpers/custom-element-scoping.ts
 import { html as litHtml } from "lit";
 import { customElement } from "lit/decorators.js";
-var VER_SUFFIX = "-4c1087";
+var VER_SUFFIX = "-b357a1";
 var elementLookupTable = /* @__PURE__ */ new Map();
 var gdsCustomElement = (tagName) => {
   if (globalThis.GDS_DISABLE_VERSIONED_ELEMENTS) {
@@ -509,12 +509,23 @@ var style2 = css2`
   @layer base, reset, transitional-styles;
   @layer base {
     :host {
-      padding: 0.5 1rem;
+      display: block;
+      padding: 1rem 1.5rem;
       cursor: pointer;
     }
 
+    :host(:not(:last-child)) {
+      border-bottom: 1px solid #e0e0e0;
+    }
+
     :host(:hover) {
-      background-color: grey;
+      background-color: #ededed;
+    }
+
+    :host(:focus-visible) {
+      outline: auto;
+      outline-offset: -6px;
+      outline-color: #666;
     }
   }
 `;
@@ -694,8 +705,21 @@ var style3 = css3`
       overflow: hidden;
       padding: 0px;
       box-sizing: border-box;
-      border-width: 0;
       right: 0;
+      margin: 0;
+      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), 0 1rem 28px rgba(0, 0, 0, 0.15);
+      border-width: 0;
+      border-radius: 0.5rem;
+    }
+
+    header {
+      display: none;
+    }
+
+    dialog::backdrop {
+      background-color: transparent;
+      display: block;
+      position: fixed;
     }
   }
 `;
@@ -1505,6 +1529,30 @@ import { msg as msg3 } from "@lit/localize";
 import { classMap as classMap4 } from "lit-html/directives/class-map.js";
 import { property as property6, queryAsync as queryAsync2, state as state6 } from "lit/decorators.js";
 
+// libs/core/src/components/context-menu/context-menu.styles.ts
+import { css as css6 } from "lit";
+var style6 = css6`
+  @layer base, reset, transitional-styles;
+  @layer base {
+    button {
+      display: flex;
+      border-width: 0;
+      background-color: #ededed;
+      border-radius: calc(1px * infinity);
+      padding: 0.4rem 0.8rem;
+      font-family: inherit;
+      cursor: pointer;
+      align-items: center;
+      gap: 0.5rem;
+    }
+
+    button:hover {
+      background-color: #dcdcdc;
+    }
+  }
+`;
+var context_menu_styles_default = style6;
+
 // libs/core/src/primitives/menu/menu.ts
 import { createRef as createRef3, ref as ref3 } from "lit/directives/ref.js";
 import { state as state5 } from "lit/decorators.js";
@@ -1581,7 +1629,12 @@ var GdsContextMenu = class extends GdsElement {
       >
         <slot name="trigger">
           ${this.showLabel ? this.buttonLabel ?? this.label : nothing}
-          <i class="sg-icon sg-icon-ellipsis"></i>
+          <svg width="24" height="24" viewBox="0 0 24 24">
+            <path
+              d="M14 12C14 13.1042 13.1042 14 12 14C10.8958 14 10 13.1042 10 12C10 10.8958 10.8958 10 12 10C13.1042 10 14 10.8958 14 12ZM19 10C17.8958 10 17 10.8958 17 12C17 13.1042 17.8958 14 19 14C20.1042 14 21 13.1042 21 12C21 10.8958 20.1042 10 19 10ZM5 10C3.89583 10 3 10.8958 3 12C3 13.1042 3.89583 14 5 14C6.10417 14 7 13.1042 7 12C7 10.8958 6.10417 10 5 10Z"
+              fill="#353531"
+            />
+          </svg>
         </slot>
       </button>
       <gds-popover
@@ -1605,6 +1658,7 @@ _handleItemClick = new WeakSet();
 handleItemClick_fn = function() {
   this.open = false;
 };
+GdsContextMenu.styles = [context_menu_styles_default];
 GdsContextMenu.shadowRootOptions = {
   mode: "open",
   delegatesFocus: true
@@ -1640,17 +1694,18 @@ GdsContextMenu = __decorateClass([
 
 // libs/core/src/primitives/menu/menu-item.ts
 import { state as state7 } from "lit/decorators.js";
+var _handleOnClick;
 var GdsMenuItem = class extends Focusable(GdsElement) {
   constructor() {
     super(...arguments);
-    this.#handleOnClick = () => {
+    __privateAdd(this, _handleOnClick, () => {
       this.dispatchEvent(
         new CustomEvent("gds-menu-item-click", {
           bubbles: true,
           composed: true
         })
       );
-    };
+    });
   }
   connectedCallback() {
     super.connectedCallback();
@@ -1661,14 +1716,15 @@ var GdsMenuItem = class extends Focusable(GdsElement) {
       e.preventDefault();
       this.click();
     });
-    this.addEventListener("click", this.#handleOnClick);
+    this.addEventListener("click", __privateGet(this, _handleOnClick));
     TransitionalStyles.instance.apply(this, "gds-option");
   }
-  #handleOnClick;
   render() {
     return html`${this._tStyles}<slot></slot>`;
   }
 };
+_handleOnClick = new WeakMap();
+GdsMenuItem.styles = [option_styles_default];
 __decorateClass([
   state7()
 ], GdsMenuItem.prototype, "_tStyles", 2);
@@ -1729,8 +1785,8 @@ function renderMonthGridView(date, template) {
 }
 
 // libs/core/src/primitives/calendar/calendar.styles.ts
-import { css as css6 } from "lit";
-var style6 = css6`
+import { css as css7 } from "lit";
+var style7 = css7`
   @layer base, reset, transitional-styles;
   @layer base {
     td.disabled {
@@ -1742,7 +1798,7 @@ var style6 = css6`
     }
   }
 `;
-var calendar_styles_default = style6;
+var calendar_styles_default = style7;
 
 // libs/core/src/primitives/calendar/calendar.ts
 var _setSelectedDate, setSelectedDate_fn, _handleKeyDown, handleKeyDown_fn;
@@ -2135,8 +2191,8 @@ GdsDatePartSpinner = __decorateClass([
 ], GdsDatePartSpinner);
 
 // libs/core/src/components/datepicker/datepicker.styles.ts
-import { css as css7 } from "lit";
-var styles = css7`
+import { css as css8 } from "lit";
+var styles = css8`
   @layer base, reset, transitional-styles;
   @layer base {
     label {
@@ -2318,9 +2374,9 @@ var GdsDatepicker = class extends GdsFormControlElement {
      * The spinner state keeps track of the spinner values regardless of wheter a complete date has been enter yet.
      */
     __privateAdd(this, _spinnerState, {
-      year: "YYYY",
-      month: "MM",
-      day: "DD"
+      year: "yyyy",
+      month: "mm",
+      day: "dd"
     });
   }
   get dateformat() {
@@ -2525,9 +2581,9 @@ var GdsDatepicker = class extends GdsFormControlElement {
   _handleValueChange() {
     if (!this.value) {
       __privateSet(this, _spinnerState, {
-        year: "YYYY",
-        month: "MM",
-        day: "DD"
+        year: "yyyy",
+        month: "mm",
+        day: "dd"
       });
       return;
     }
@@ -2742,8 +2798,750 @@ GdsDatepicker = __decorateClass([
   gdsCustomElement("gds-datepicker")
 ], GdsDatepicker);
 
+// libs/core/src/components/grid/grid.ts
+import { css as css10, LitElement as LitElement7, unsafeCSS as unsafeCSS3 } from "lit";
+import { property as property10, state as state11 } from "lit/decorators.js";
+
+// libs/core/src/tokens.style.ts
+import { unsafeCSS as unsafeCSS2 } from "lit";
+
+// dist/libs/tokens/internal/pallet.css
+var pallet_default = `/**
+ * Do not edit directly
+ * Generated on Wed, 10 Apr 2024 11:06:21 GMT
+ */
+
+:host {
+  --gds-ref-color-neutral000: #ffffff;
+  --gds-ref-color-neutral050: #f8f8f8;
+  --gds-ref-color-neutral100: #e9e9e9;
+  --gds-ref-color-neutral150: #eeeeee;
+  --gds-ref-color-neutral200: #dedede;
+  --gds-ref-color-neutral250: #cecece;
+  --gds-ref-color-neutral300: #ababab;
+  --gds-ref-color-neutral350: #adadad;
+  --gds-ref-color-neutral400: #868686;
+  --gds-ref-color-neutral450: #757575;
+  --gds-ref-color-neutral500: #494949;
+  --gds-ref-color-neutral525: #464646;
+  --gds-ref-color-neutral550: #333333;
+  --gds-ref-color-neutral600: #2c2c2c;
+  --gds-ref-color-neutral650: #272727;
+  --gds-ref-color-neutral700: #222222;
+  --gds-ref-color-neutral750: #1a1a1a;
+  --gds-ref-color-neutral800: #121212;
+  --gds-ref-color-blue100: #58b8ee;
+  --gds-ref-color-blue200: #41b0ee;
+  --gds-ref-color-blue300: #00adff;
+  --gds-ref-color-blue400: #2c9cd9;
+  --gds-ref-color-blue500: #0092e1;
+  --gds-ref-color-blue600: #007ac7;
+  --gds-ref-color-blue700: #0062bc;
+  --gds-ref-color-green100: #75b44a;
+  --gds-ref-color-green200: #60cd18;
+  --gds-ref-color-green300: #45b400;
+  --gds-ref-color-green400: #308800;
+  --gds-ref-color-red100: #f7706d;
+  --gds-ref-color-red200: #ff594f;
+  --gds-ref-color-red300: #f03529;
+  --gds-ref-color-red400: #d81a1a;
+  --gds-ref-color-red500: #c82a29;
+  --gds-ref-color-red600: #bb000c;
+  --gds-ref-color-red700: #9f000a;
+  --gds-ref-color-red800: #9e2120;
+  --gds-ref-color-purple100: #ad91dc;
+  --gds-ref-color-purple200: #7e52cc;
+  --gds-ref-color-purple300: #673ab6;
+  --gds-ref-color-purple400: #4f2C99;
+  --gds-ref-color-purple500: #4a328f;
+  --gds-ref-color-purple600: #3f2587;
+  --gds-ref-color-yellow100: #ffe182;
+  --gds-ref-color-yellow200: #ffc500;
+  --gds-ref-color-yellow300: #ffb400;
+  --gds-ref-color-yellow400: #f8a000;
+  --gds-ref-color-yellow500: #f0be47;
+  --gds-ref-color-yellow600: #ebab39;
+  --gds-ref-color-blue-5: #001127;
+  --gds-ref-color-blue-10: #001C39;
+  --gds-ref-color-blue-15: #00264B;
+  --gds-ref-color-blue-20: #00315D;
+  --gds-ref-color-blue-25: #003C70;
+  --gds-ref-color-blue-30: #004883;
+  --gds-ref-color-blue-35: #005397;
+  --gds-ref-color-blue-40: #005FAC;
+  --gds-ref-color-blue-45: #006CC1;
+  --gds-ref-color-blue-50: #0078D7;
+  --gds-ref-color-blue-55: #0085EC;
+  --gds-ref-color-blue-60: #1992FF;
+  --gds-ref-color-blue-65: #4EA0FF;
+  --gds-ref-color-blue-70: #6FAEFF;
+  --gds-ref-color-blue-75: #8ABBFF;
+  --gds-ref-color-blue-80: #A4C9FF;
+  --gds-ref-color-blue-85: #BCD6FF;
+  --gds-ref-color-blue-90: #D4E3FF;
+  --gds-ref-color-blue-95: #EBF1FF;
+  --gds-ref-color-blue-98: #F8F9FF;
+  --gds-ref-color-green-5: #001505;
+  --gds-ref-color-green-10: #00210E;
+  --gds-ref-color-green-15: #002D10;
+  --gds-ref-color-green-20: #003916;
+  --gds-ref-color-green-25: #00461D;
+  --gds-ref-color-green-30: #005323;
+  --gds-ref-color-green-35: #00602A;
+  --gds-ref-color-green-40: #006D31;
+  --gds-ref-color-green-45: #007B38;
+  --gds-ref-color-green-50: #138942;
+  --gds-ref-color-green-55: #29964D;
+  --gds-ref-color-green-60: #39A459;
+  --gds-ref-color-green-65: #48B265;
+  --gds-ref-color-green-70: #57C071;
+  --gds-ref-color-green-75: #65CE7E;
+  --gds-ref-color-green-80: #73DC8A;
+  --gds-ref-color-green-85: #81EA97;
+  --gds-ref-color-green-90: #8FF9A4;
+  --gds-ref-color-green-95: #C5FFCA;
+  --gds-ref-color-green-98: #EAFFE8;
+  --gds-ref-color-black: #000000;
+  --gds-ref-color-white: #FFFFFF;
+  --gds-ref-color-grey-5: #0D0D0C;
+  --gds-ref-color-grey-10: #1B1B18;
+  --gds-ref-color-grey-15: #282825;
+  --gds-ref-color-grey-20: #353531;
+  --gds-ref-color-grey-25: #42423D;
+  --gds-ref-color-grey-30: #505049;
+  --gds-ref-color-grey-35: #5D5D56;
+  --gds-ref-color-grey-40: #6A6A62;
+  --gds-ref-color-grey-45: #77776E;
+  --gds-ref-color-grey-50: #85857A;
+  --gds-ref-color-grey-55: #919188;
+  --gds-ref-color-grey-60: #9D9D95;
+  --gds-ref-color-grey-65: #A9A9A2;
+  --gds-ref-color-grey-70: #B6B6AF;
+  --gds-ref-color-grey-75: #C2C2BD;
+  --gds-ref-color-grey-80: #CECECA;
+  --gds-ref-color-grey-85: #DADAD7;
+  --gds-ref-color-grey-90: #E7E7E4;
+  --gds-ref-color-grey-95: #F3F3F2;
+  --gds-ref-color-grey-98: #F9F9F9;
+  --gds-ref-color-orange-5: #1A0F00;
+  --gds-ref-color-orange-10: #271900;
+  --gds-ref-color-orange-15: #352200;
+  --gds-ref-color-orange-20: #422C00;
+  --gds-ref-color-orange-25: #503700;
+  --gds-ref-color-orange-30: #503700;
+  --gds-ref-color-orange-35: #6E4C00;
+  --gds-ref-color-orange-40: #7D5700;
+  --gds-ref-color-orange-45: #8D6300;
+  --gds-ref-color-orange-50: #9D6E00;
+  --gds-ref-color-orange-55: #AE7A00;
+  --gds-ref-color-orange-60: #BE8600;
+  --gds-ref-color-orange-65: #CF9300;
+  --gds-ref-color-orange-70: #E19F00;
+  --gds-ref-color-orange-75: #F2AC00;
+  --gds-ref-color-orange-80: #FFBA30;
+  --gds-ref-color-orange-85: #FFCC77;
+  --gds-ref-color-orange-90: #FFDEAB;
+  --gds-ref-color-orange-95: #FFEED9;
+  --gds-ref-color-orange-98: #FFF8F3;
+  --gds-ref-color-red-5: #2B0200;
+  --gds-ref-color-red-10: #3E0400;
+  --gds-ref-color-red-15: #510700;
+  --gds-ref-color-red-20: #650B00;
+  --gds-ref-color-red-25: #790F00;
+  --gds-ref-color-red-30: #8E1400;
+  --gds-ref-color-red-35: #A31800;
+  --gds-ref-color-red-40: #BA1D00;
+  --gds-ref-color-red-45: #D02200;
+  --gds-ref-color-red-50: #E23010;
+  --gds-ref-color-red-55: #F53E1D;
+  --gds-ref-color-red-60: #FF5636;
+  --gds-ref-color-red-65: #FF7257;
+  --gds-ref-color-red-70: #FF8A73;
+  --gds-ref-color-red-75: #FFA08D;
+  --gds-ref-color-red-80: #FFB4A5;
+  --gds-ref-color-red-85: #FFC8BC;
+  --gds-ref-color-red-90: #FFDAD3;
+  --gds-ref-color-red-95: #FFEDE9;
+  --gds-ref-color-red-98: #FFF8F6;
+}
+`;
+
+// dist/libs/tokens/internal/theme/light.css
+var light_default = `/**
+ * Do not edit directly
+ * Generated on Wed, 10 Apr 2024 11:06:21 GMT
+ */
+
+:host {
+  color-scheme: light;
+  --gds-sys-color-blue: #41b0ee;
+  --gds-sys-color-dark-blue-1: #41b0ee;
+  --gds-sys-color-dark-blue-2: #007ac7;
+  --gds-sys-color-green: #60cd18;
+  --gds-sys-color-dark-green-1: #45b400;
+  --gds-sys-color-dark-green-2: #308800;
+  --gds-sys-color-yellow: #ffc500;
+  --gds-sys-color-dark-yellow-1: #ffb400;
+  --gds-sys-color-dark-yellow-2: #f8a000;
+  --gds-sys-color-primary-text: #333333;
+  --gds-sys-color-secondary-text: #ababab;
+  --gds-sys-color-white-text: #ffffff;
+  --gds-sys-color-link-text: #0062bc;
+  --gds-sys-color-error-text: #9f000a;
+  --gds-sys-color-disabled-text: #adadad;
+  --gds-sys-color-red: #f03529;
+  --gds-sys-color-dark-red-1: #d81a1a;
+  --gds-sys-color-dark-red-2: #bb000c;
+  --gds-sys-color-purple: #673ab6;
+  --gds-sys-color-dark-purple-1: #4f2C99;
+  --gds-sys-color-dark-purple-2: #3f2587;
+  --gds-sys-color-base-white: #ffffff;
+  --gds-sys-color-base100: #f8f8f8;
+  --gds-sys-color-base200: #e9e9e9;
+  --gds-sys-color-base300: #dedede;
+  --gds-sys-color-base400: #cecece;
+  --gds-sys-color-base500: #adadad;
+  --gds-sys-color-base600: #868686;
+  --gds-sys-color-base700: #494949;
+  --gds-sys-color-base800: #333333;
+  --gds-sys-color-base900: #1a1a1a;
+  --gds-sys-color-accent-accent-green: #006D31;
+  --gds-sys-color-accent-on-accent-green: #FFFFFF;
+  --gds-sys-color-accent-accent-orange: #FFBA30;
+  --gds-sys-color-accent-on-accent-orange: #353531;
+  --gds-sys-color-background-background: #FFFFFF;
+  --gds-sys-color-background-background-dim: #F3F3F2;
+  --gds-sys-color-container-container: #F3F3F2;
+  --gds-sys-color-container-container-dim1: #E7E7E4;
+  --gds-sys-color-container-container-dim2: #DADAD7;
+  --gds-sys-color-container-container-bright: #FFFFFF;
+  --gds-sys-color-container-container-shade1: #353531;
+  --gds-sys-color-container-container-shade2: #1B1B18;
+  --gds-sys-color-container-container-shade3: #353531;
+  --gds-sys-color-container-container-disabled: #F9F9F9;
+  --gds-sys-color-container-container-positive: #006D31;
+  --gds-sys-color-container-container-negative: #BA1D00;
+  --gds-sys-color-container-container-negative-bright: #FFEDE9;
+  --gds-sys-color-content-content: #353531;
+  --gds-sys-color-content-content-inverse: #FFFFFF;
+  --gds-sys-color-content-content-secondary: #6A6A62;
+  --gds-sys-color-content-content-positive: #006D31;
+  --gds-sys-color-content-content-positive-bright: #EAFFE8;
+  --gds-sys-color-content-content-negative: #BA1D00;
+  --gds-sys-color-content-content-negative-bright: #FFF8F6;
+  --gds-sys-color-content-content-custom-blue-bright: #F8F9FF;
+  --gds-sys-color-content-content-disabled: #9D9D95;
+  --gds-sys-color-custom-custom-blue: #005FAC;
+  --gds-sys-color-custom-on-custom-blue: #D4E3FF;
+  --gds-sys-color-custom-custom-blue-bright: #D4E3FF;
+  --gds-sys-color-custom-on-custom-blue-bright: #00315D;
+  --gds-sys-color-custom-custom-green: #003916;
+  --gds-sys-color-custom-on-custom-green: #EAFFE8;
+  --gds-sys-color-custom-custom-green-bright: #EAFFE8;
+  --gds-sys-color-custom-on-custom-green-bright: #003916;
+  --gds-sys-color-custom-custom-grey: #353531;
+  --gds-sys-color-custom-on-custom-grey: #E7E7E4;
+  --gds-sys-color-custom-custom-grey-bright: #E7E7E4;
+  --gds-sys-color-custom-on-custom-grey-bright: #353531;
+  --gds-sys-color-primary-primary: #353531;
+  --gds-sys-color-state-layers-state-black: #000000 10%;
+  --gds-sys-color-state-layers-state-black-dim1: #000000 20%;
+  --gds-sys-color-state-layers-state-black-dim2: #000000 40%;
+  --gds-sys-color-state-layers-state-black-shade: #000000 60%;
+  --gds-sys-color-state-layers-state-positive: #006d31 10%;
+  --gds-sys-color-state-layers-state-positive-dim: #006d31 20%;
+  --gds-sys-color-state-layers-state-negative: #ba1d00 10%;
+  --gds-sys-color-state-layers-state-negative-dim: #ba1d00 20%;
+  --gds-sys-color-state-layers-state-custom-blue: #005fac 20%;
+  --gds-sys-color-status-information-information: #353531;
+  --gds-sys-color-status-information-on-information: #FFFFFF;
+  --gds-sys-color-status-information-information-bright: #F3F3F2;
+  --gds-sys-color-status-information-on-information-bright: #353531;
+  --gds-sys-color-status-negative-negative: #BA1D00;
+  --gds-sys-color-status-negative-on-negative: #FFFFFF;
+  --gds-sys-color-status-negative-negative-bright: #FFEDE9;
+  --gds-sys-color-status-negative-on-negative-bright: #BA1D00;
+  --gds-sys-color-status-warning-warning: #9D6E00;
+  --gds-sys-color-status-warning-on-warning: #FFFFFF;
+  --gds-sys-color-status-warning-warning-bright: #FFEED9;
+  --gds-sys-color-status-warning-on-warning-bright: #7D5700;
+  --gds-sys-color-status-positive-positive: #006D31;
+  --gds-sys-color-status-positive-on-positive: #FFFFFF;
+  --gds-sys-color-status-positive-positive-bright: #EAFFE8;
+  --gds-sys-color-status-positive-on-positive-bright: #006D31;
+  --gds-sys-color-status-notice-notice: #005FAC;
+  --gds-sys-color-status-notice-on-notice: #FFFFFF;
+  --gds-sys-color-status-notice-notice-bright: #EBF1FF;
+  --gds-sys-color-status-notice-on-notice-bright: #005FAC;
+  --gds-sys-color-stroke-stroke: #353531;
+  --gds-sys-color-stroke-stroke-variant1: #85857A;
+  --gds-sys-color-stroke-stroke-variant2: #CECECA;
+  --gds-sys-color-stroke-stroke-disabled: #9D9D95;
+  --gds-sys-color-stroke-stroke-notice: #005FAC;
+  --gds-sys-color-stroke-stroke-positive: #006D31;
+  --gds-sys-color-stroke-stroke-warning: #7D5700;
+  --gds-sys-color-stroke-stroke-negative: #BA1D00;
+  --gds-sys-color-stroke-stroke-custom-blue: #005FAC;
+  --gds-sys-color-stroke-stroke-custom-blue-bright: #6FAEFF;
+  --gds-sys-color-stroke-stroke-inversed: #FFFFFF;
+}
+`;
+
+// dist/libs/tokens/internal/size.css
+var size_default = `/**
+ * Do not edit directly
+ * Generated on Wed, 10 Apr 2024 11:06:21 GMT
+ */
+
+:host {
+  --gds-sys-typography-weight-bold: 700;
+  --gds-sys-typography-weight-medium: 500;
+  --gds-sys-typography-weight-book: 450;
+  --gds-sys-typography-weight-regular: 400;
+  --gds-sys-typography-weight-light: 300;
+  --gds-sys-typography-size-label-overline: 14px;
+  --gds-sys-typography-size-label-input-medium: 14px;
+  --gds-sys-typography-size-label-input-large: 16px;
+  --gds-sys-typography-size-label-information-medium: 14px;
+  --gds-sys-typography-size-label-information-large: 16px;
+  --gds-sys-typography-size-label-small: 12px;
+  --gds-sys-typography-size-label-medium: 14px;
+  --gds-sys-typography-size-label-large: 16px;
+  --gds-sys-typography-size-body-small: 12px;
+  --gds-sys-typography-size-body-medium: 14px;
+  --gds-sys-typography-size-body-large: 16px;
+  --gds-sys-typography-size-title-small: 14px;
+  --gds-sys-typography-size-title-medium: 16px;
+  --gds-sys-typography-size-title-large: 22px;
+  --gds-sys-typography-size-headline-small: 24px;
+  --gds-sys-typography-size-headline-medium: 28px;
+  --gds-sys-typography-size-headline-large: 32px;
+  --gds-sys-typography-size-display-small: 40px;
+  --gds-sys-typography-size-display-medium: 64px;
+  --gds-sys-typography-size-display-large: 82px;
+  --gds-sys-typography-line-height-label-overline: 18px;
+  --gds-sys-typography-line-height-label-input-medium: 20px;
+  --gds-sys-typography-line-height-label-input-large: 20px;
+  --gds-sys-typography-line-height-label-information-medium: 20px;
+  --gds-sys-typography-line-height-label-information-large: 20px;
+  --gds-sys-typography-line-height-label-small: 16px;
+  --gds-sys-typography-line-height-label-medium: 20px;
+  --gds-sys-typography-line-height-label-large: 20px;
+  --gds-sys-typography-line-height-body-small: 16px;
+  --gds-sys-typography-line-height-body-medium: 20px;
+  --gds-sys-typography-line-height-body-large: 20px;
+  --gds-sys-typography-line-height-title-small: 20px;
+  --gds-sys-typography-line-height-title-medium: 24px;
+  --gds-sys-typography-line-height-title-large: 28px;
+  --gds-sys-typography-line-height-headline-small: 30px;
+  --gds-sys-typography-line-height-headline-medium: 36px;
+  --gds-sys-typography-line-height-headline-large: 40px;
+  --gds-sys-typography-line-height-display-small: 52px;
+  --gds-sys-typography-line-height-display-medium: 80px;
+  --gds-sys-typography-line-height-display-large: 98px;
+  --gds-sys-state-hover-state-layer-opacity: 0.10;
+  --gds-sys-grid-width-desktop-lg: 2560px;
+  --gds-sys-grid-width-desktop-md: 1440px;
+  --gds-sys-grid-width-desktop-sm: 1024px;
+  --gds-sys-grid-width-tablet: 768px;
+  --gds-sys-grid-width-mobile: 425px;
+  --gds-sys-grid-columns-24: 24;
+  --gds-sys-grid-columns-12: 12;
+  --gds-sys-grid-columns-8: 8;
+  --gds-sys-grid-columns-6: 6;
+  --gds-sys-grid-columns-4: 4;
+  --gds-sys-grid-columns-2: 2;
+  --gds-ref-size-15: 9999px;
+  --gds-ref-size-14: 128px;
+  --gds-ref-size-13: 112px;
+  --gds-ref-size-12: 96px;
+  --gds-ref-size-11: 80px;
+  --gds-ref-size-10: 64px;
+  --gds-ref-size-9: 48px;
+  --gds-ref-size-8: 40px;
+  --gds-ref-size-7: 32px;
+  --gds-ref-size-6: 24px;
+  --gds-ref-size-5: 16px;
+  --gds-ref-size-4: 12px;
+  --gds-ref-size-3: 8px;
+  --gds-ref-size-2: 4px;
+  --gds-ref-size-1: 2px;
+  --gds-ref-size-0: 0px;
+  --gds-sys-space-spacer-120: var(--gds-ref-size-14);
+  --gds-sys-space-spacer-112: var(--gds-ref-size-13);
+  --gds-sys-space-spacer-96: var(--gds-ref-size-12);
+  --gds-sys-space-spacer-80: var(--gds-ref-size-11);
+  --gds-sys-space-spacer-64: var(--gds-ref-size-10);
+  --gds-sys-space-spacer-48: var(--gds-ref-size-9);
+  --gds-sys-space-spacer-40: var(--gds-ref-size-8);
+  --gds-sys-space-spacer-32: var(--gds-ref-size-7);
+  --gds-sys-space-spacer-24: var(--gds-ref-size-6);
+  --gds-sys-space-spacer-16: var(--gds-ref-size-5);
+  --gds-sys-space-spacer-12: var(--gds-ref-size-4);
+  --gds-sys-space-spacer-8: var(--gds-ref-size-3);
+  --gds-sys-space-spacer-4: var(--gds-ref-size-2);
+  --gds-sys-space-spacer-2: var(--gds-ref-size-1);
+  --gds-sys-space-spacer-0: var(--gds-ref-size-0);
+  --gds-sys-space-padding-120: var(--gds-ref-size-14);
+  --gds-sys-space-padding-112: var(--gds-ref-size-13);
+  --gds-sys-space-padding-96: var(--gds-ref-size-12);
+  --gds-sys-space-padding-80: var(--gds-ref-size-11);
+  --gds-sys-space-padding-64: var(--gds-ref-size-10);
+  --gds-sys-space-padding-48: var(--gds-ref-size-9);
+  --gds-sys-space-padding-40: var(--gds-ref-size-8);
+  --gds-sys-space-padding-32: var(--gds-ref-size-7);
+  --gds-sys-space-padding-24: var(--gds-ref-size-6);
+  --gds-sys-space-padding-16: var(--gds-ref-size-5);
+  --gds-sys-space-padding-12: var(--gds-ref-size-4);
+  --gds-sys-space-padding-8: var(--gds-ref-size-3);
+  --gds-sys-space-padding-4: var(--gds-ref-size-2);
+  --gds-sys-space-padding-2: var(--gds-ref-size-1);
+  --gds-sys-space-padding-0: var(--gds-ref-size-0);
+  --gds-sys-space-margins-120: var(--gds-ref-size-14);
+  --gds-sys-space-margins-112: var(--gds-ref-size-13);
+  --gds-sys-space-margins-96: var(--gds-ref-size-12);
+  --gds-sys-space-margins-80: var(--gds-ref-size-11);
+  --gds-sys-space-margins-64: var(--gds-ref-size-10);
+  --gds-sys-space-margins-48: var(--gds-ref-size-9);
+  --gds-sys-space-margins-40: var(--gds-ref-size-8);
+  --gds-sys-space-margins-32: var(--gds-ref-size-7);
+  --gds-sys-space-margins-24: var(--gds-ref-size-6);
+  --gds-sys-space-margins-16: var(--gds-ref-size-5);
+  --gds-sys-space-margins-12: var(--gds-ref-size-4);
+  --gds-sys-space-margins-8: var(--gds-ref-size-3);
+  --gds-sys-space-margins-4: var(--gds-ref-size-2);
+  --gds-sys-space-margins-2: var(--gds-ref-size-1);
+  --gds-sys-space-margins-0: var(--gds-ref-size-0);
+  --gds-sys-radii-full: var(--gds-ref-size-15);
+  --gds-sys-radii-4xl: var(--gds-ref-size-12);
+  --gds-sys-radii-3xl: var(--gds-ref-size-9);
+  --gds-sys-radii-2xl: var(--gds-ref-size-7);
+  --gds-sys-radii-xl: var(--gds-ref-size-6);
+  --gds-sys-radii-l: var(--gds-ref-size-5);
+  --gds-sys-radii-m: var(--gds-ref-size-4);
+  --gds-sys-radii-s: var(--gds-ref-size-3);
+  --gds-sys-radii-xs: var(--gds-ref-size-2);
+  --gds-sys-radii-none: var(--gds-ref-size-0);
+  --gds-sys-grid-padding-3xl: var(--gds-ref-size-12);
+  --gds-sys-grid-padding-2xl: var(--gds-ref-size-9);
+  --gds-sys-grid-padding-xl: var(--gds-ref-size-7);
+  --gds-sys-grid-padding-l: var(--gds-ref-size-6);
+  --gds-sys-grid-padding-m: var(--gds-ref-size-5);
+  --gds-sys-grid-padding-s: var(--gds-ref-size-3);
+  --gds-sys-grid-padding-xs: var(--gds-ref-size-2);
+  --gds-sys-grid-padding-none: var(--gds-ref-size-0);
+  --gds-sys-grid-gap-3xl: var(--gds-ref-size-12);
+  --gds-sys-grid-gap-2xl: var(--gds-ref-size-9);
+  --gds-sys-grid-gap-xl: var(--gds-ref-size-7);
+  --gds-sys-grid-gap-l: var(--gds-ref-size-6);
+  --gds-sys-grid-gap-m: var(--gds-ref-size-5);
+  --gds-sys-grid-gap-s: var(--gds-ref-size-3);
+  --gds-sys-grid-gap-xs: var(--gds-ref-size-2);
+  --gds-sys-grid-gap-none: var(--gds-ref-size-0);
+  --gds-sys-grid-breakpoint-desktop-lg: var(--gds-sys-grid-columns-12);
+  --gds-sys-grid-breakpoint-desktop-md: var(--gds-sys-grid-columns-12);
+  --gds-sys-grid-breakpoint-desktop-sm: var(--gds-sys-grid-columns-12);
+  --gds-sys-grid-breakpoint-tablet: var(--gds-sys-grid-columns-12);
+  --gds-sys-grid-breakpoint-mobile: var(--gds-sys-grid-columns-4);
+}
+`;
+
+// libs/core/src/tokens.style.ts
+var tokens = [
+  unsafeCSS2(pallet_default),
+  unsafeCSS2(light_default),
+  unsafeCSS2(size_default)
+];
+
+// libs/core/src/components/grid/grid.style.css.ts
+import { css as css9 } from "lit";
+var style8 = css9`
+  @layer grid, grid.desktop, grid.tablet, grid.mobile, grid.span, grid.space, grid.align, grid.debug;
+
+  @layer grid {
+    :host {
+      --_c: var(--gds-sys-grid-columns-12);
+      --_grid-col: repeat(var(--_c), 1fr);
+      --_grid-col-start: 1;
+      --_grid-col-end: -1;
+      --_gap-column: 0;
+      --_gap-row: 0;
+      display: grid;
+      width: 100%;
+      grid-template-columns: var(--_grid-col);
+      grid-column-gap: var(--_gap-column);
+      grid-row-gap: var(--_gap-row);
+      padding: var(--_grid-padding);
+      text-wrap: balance;
+    }
+
+    :host([auto-columns]) {
+      --_col-count: var(--_c, 0);
+      --_gap-count: calc(var(--_col-count) - 1);
+      --_total-gap-width: calc(var(--_gap-count) * var(--_gap-column, 0px));
+      --_col-width-max: calc(
+        (100% - var(--_total-gap-width)) / var(--_col-count)
+      );
+      grid-template-columns: repeat(
+        auto-fill,
+        minmax(max(var(--_col-width), var(--_col-width-max)), 1fr)
+      );
+    }
+  }
+
+  /* Responsive */
+  :host {
+    --_c: var(--_columns-desktop);
+    --_gap-column: var(--_gap-desktop);
+    --_gap-row: var(--_row-gap-desktop);
+    --_grid-padding: var(--_padding-desktop);
+    --_col-width: var(--_col-width-desktop);
+  }
+
+  @media only screen and (max-width: 768px) {
+    :host {
+      --_c: var(--_columns-tablet);
+      --_gap-column: var(--_gap-tablet);
+      --_gap-row: var(--_row-gap-tablet);
+      --_grid-padding: var(--_padding-tablet);
+      --_col-width: var(--_col-width-tablet);
+    }
+  }
+
+  @media only screen and (max-width: 425px) {
+    :host {
+      --_c: var(--_columns-mobile);
+      --_gap-column: var(--_gap-mobile);
+      --_gap-row: var(--_row-gap-mobile);
+      --_grid-padding: var(--_padding-mobile);
+      --_col-width: var(--_col-width-mobile);
+    }
+  }
+`;
+var grid_style_css_default = style8;
+
+// libs/core/src/components/grid/grid.ts
+var BreakpointPattern = /(?<l>l:([a-z0-9]+))?\s*(?<m>m:([a-z0-9]+))?\s*(?<s>s:([a-z0-9]+))?/;
+var GdsGrid = class extends LitElement7 {
+  constructor() {
+    super(...arguments);
+    this._gridVariables = {
+      varsColumn: css10``,
+      varsGap: css10``,
+      varsRowGap: css10``,
+      varsPadding: css10``,
+      varsAutoColumns: css10``
+    };
+  }
+  /**
+   * Lifecycle method called when the element is connected to the DOM.
+   * It updates the column, gap, and padding variables.
+   */
+  connectedCallback() {
+    super.connectedCallback();
+    this._updateColumnVariables();
+    this._updateGapVariables();
+    this._updateRowGapVariables();
+    this._updatePaddingVariables();
+    this._updateAutoColumnsVariables();
+  }
+  _updateColumnVariables() {
+    const match = this.columns?.match(BreakpointPattern);
+    let columnsDesktop, columnsTablet, columnsMobile;
+    if (this.columns && !isNaN(Number(this.columns))) {
+      columnsDesktop = columnsTablet = columnsMobile = Number(this.columns);
+    } else {
+      const { l, m, s } = match?.groups || {};
+      columnsDesktop = l ? Number(l.split(":")[1]) : void 0;
+      columnsTablet = m ? Number(m.split(":")[1]) : void 0;
+      columnsMobile = s ? Number(s.split(":")[1]) : void 0;
+    }
+    const columnProperties = [
+      { name: "_columns-desktop", value: columnsDesktop },
+      { name: "_columns-tablet", value: columnsTablet },
+      { name: "_columns-mobile", value: columnsMobile }
+    ];
+    const cssVariables = columnProperties.filter(({ value }) => value !== void 0).map(({ name, value }) => `--${name}: ${value};`).join(" ");
+    this._gridVariables = {
+      ...this._gridVariables,
+      varsColumn: css10`
+        ${unsafeCSS3(cssVariables)}
+      `
+    };
+    this.requestUpdate("_gridVariables");
+  }
+  _updateGapVariables() {
+    const match = this.gap?.match(BreakpointPattern);
+    let gapDesktop, gapTablet, gapMobile;
+    if (this.gap && !this.gap.includes(" ")) {
+      gapDesktop = gapTablet = gapMobile = `var(--gds-sys-grid-gap-${this.gap})`;
+    } else {
+      const { l, m, s } = match?.groups || {};
+      gapDesktop = l ? `var(--gds-sys-grid-gap-${l.split(":")[1]})` : void 0;
+      gapTablet = m ? `var(--gds-sys-grid-gap-${m.split(":")[1]})` : void 0;
+      gapMobile = s ? `var(--gds-sys-grid-gap-${s.split(":")[1]})` : void 0;
+    }
+    const gapProperties = [
+      { name: "_gap-desktop", value: gapDesktop },
+      { name: "_gap-tablet", value: gapTablet },
+      { name: "_gap-mobile", value: gapMobile }
+    ];
+    const cssVariables = gapProperties.filter(({ value }) => value !== void 0).map(({ name, value }) => `--${name}: ${value};`).join(" ");
+    this._gridVariables = {
+      ...this._gridVariables,
+      varsGap: css10`
+        ${unsafeCSS3(cssVariables)}
+      `
+    };
+    this.requestUpdate("_gridVariables");
+  }
+  _updateRowGapVariables() {
+    const match = this.rowGap?.match(BreakpointPattern);
+    let rowGapDesktop, rowGapTablet, rowGapMobile;
+    if (this.rowGap && !this.rowGap.includes(" ")) {
+      rowGapDesktop = rowGapTablet = rowGapMobile = `var(--gds-sys-grid-gap-${this.rowGap})`;
+    } else {
+      const { l, m, s } = match?.groups || {};
+      rowGapDesktop = l ? `var(--gds-sys-grid-gap-${l.split(":")[1]})` : void 0;
+      rowGapTablet = m ? `var(--gds-sys-grid-gap-${m.split(":")[1]})` : void 0;
+      rowGapMobile = s ? `var(--gds-sys-grid-gap-${s.split(":")[1]})` : void 0;
+    }
+    const gapProperties = [
+      { name: "_row-gap-desktop", value: rowGapDesktop },
+      { name: "_row-gap-tablet", value: rowGapTablet },
+      { name: "_row-gap-mobile", value: rowGapMobile }
+    ];
+    const cssVariables = gapProperties.filter(({ value }) => value !== void 0).map(({ name, value }) => `--${name}: ${value};`).join(" ");
+    this._gridVariables = {
+      ...this._gridVariables,
+      varsRowGap: css10`
+        ${unsafeCSS3(cssVariables)}
+      `
+    };
+    this.requestUpdate("_gridVariables");
+  }
+  _updatePaddingVariables() {
+    const match = this.padding?.match(BreakpointPattern);
+    let paddingDesktop, paddingTablet, paddingMobile;
+    if (this.padding && !this.padding.includes(" ")) {
+      paddingDesktop = paddingTablet = paddingMobile = `var(--gds-sys-grid-gap-${this.gap})`;
+    } else {
+      const { l, m, s } = match?.groups || {};
+      paddingDesktop = l ? `var(--gds-sys-grid-gap-${l.split(":")[1]})` : void 0;
+      paddingTablet = m ? `var(--gds-sys-grid-gap-${m.split(":")[1]})` : void 0;
+      paddingMobile = s ? `var(--gds-sys-grid-gap-${s.split(":")[1]})` : void 0;
+    }
+    const paddingProperties = [
+      { name: "_padding-desktop", value: paddingDesktop },
+      { name: "_padding-tablet", value: paddingTablet },
+      { name: "_padding-mobile", value: paddingMobile }
+    ];
+    const cssVariables = paddingProperties.filter(({ value }) => value !== void 0).map(({ name, value }) => `--${name}: ${value};`).join(" ");
+    this._gridVariables = {
+      ...this._gridVariables,
+      varsPadding: css10`
+        ${unsafeCSS3(cssVariables)}
+      `
+    };
+    this.requestUpdate("_gridVariables");
+  }
+  _updateAutoColumnsVariables() {
+    const match = this.autoColumns?.match(BreakpointPattern);
+    let widthDesktop, widthTablet, widthMobile;
+    if (this.autoColumns && !this.autoColumns.includes(" ")) {
+      widthDesktop = widthTablet = widthMobile = `${this.autoColumns}px`;
+    } else {
+      const { l, m, s } = match?.groups || {};
+      widthDesktop = l ? `${l.split(":")[1]}px` : void 0;
+      widthTablet = m ? `${m.split(":")[1]}px` : void 0;
+      widthMobile = s ? `${s.split(":")[1]}px` : void 0;
+    }
+    const widthProperties = [
+      { name: "_col-width-mobile", value: widthMobile },
+      { name: "_col-width-tablet", value: widthTablet },
+      { name: "_col-width-desktop", value: widthDesktop }
+    ];
+    const cssVariables = widthProperties.filter(({ value }) => value !== void 0).map(({ name, value }) => `--${name}: ${value};`).join(" ");
+    this._gridVariables = {
+      ...this._gridVariables,
+      varsAutoColumns: css10`
+        ${unsafeCSS3(cssVariables)}
+      `
+    };
+    this.requestUpdate("_gridVariables");
+  }
+  _updateGridCss() {
+    const sheet = new CSSStyleSheet();
+    sheet.replaceSync(`:host {${Object.values(this._gridVariables).join("")}} `);
+    if (this.shadowRoot) {
+      const styles2 = Array.isArray(GdsGrid.styles) ? GdsGrid.styles : [GdsGrid.styles];
+      const styleSheets = styles2.flatMap((style9) => {
+        if (Array.isArray(style9)) {
+          return style9.map((s) => {
+            const newSheet = new CSSStyleSheet();
+            newSheet.replaceSync(s.cssText);
+            return newSheet;
+          });
+        } else {
+          const newSheet = new CSSStyleSheet();
+          newSheet.replaceSync(style9.cssText);
+          return [newSheet];
+        }
+      });
+      this.shadowRoot.adoptedStyleSheets = [sheet, ...styleSheets];
+    }
+  }
+  render() {
+    return html` <slot></slot> `;
+  }
+};
+GdsGrid.styles = [tokens, grid_style_css_default];
+GdsGrid.shadowRootOptions = {
+  mode: "open",
+  delegatesFocus: true
+};
+__decorateClass([
+  property10({ attribute: "columns", type: String })
+], GdsGrid.prototype, "columns", 2);
+__decorateClass([
+  property10({ attribute: "gap", type: String })
+], GdsGrid.prototype, "gap", 2);
+__decorateClass([
+  property10({ attribute: "row-gap", type: String })
+], GdsGrid.prototype, "rowGap", 2);
+__decorateClass([
+  property10({ attribute: "padding", type: String })
+], GdsGrid.prototype, "padding", 2);
+__decorateClass([
+  property10({ attribute: "auto-columns", type: String })
+], GdsGrid.prototype, "autoColumns", 2);
+__decorateClass([
+  state11()
+], GdsGrid.prototype, "_gridVariables", 2);
+__decorateClass([
+  watch("columns")
+], GdsGrid.prototype, "_updateColumnVariables", 1);
+__decorateClass([
+  watch("gap")
+], GdsGrid.prototype, "_updateGapVariables", 1);
+__decorateClass([
+  watch("row-gap")
+], GdsGrid.prototype, "_updateRowGapVariables", 1);
+__decorateClass([
+  watch("padding")
+], GdsGrid.prototype, "_updatePaddingVariables", 1);
+__decorateClass([
+  watch("autoColumns")
+], GdsGrid.prototype, "_updateAutoColumnsVariables", 1);
+__decorateClass([
+  watch("_gridVariables")
+], GdsGrid.prototype, "_updateGridCss", 1);
+GdsGrid = __decorateClass([
+  gdsCustomElement("gds-grid")
+], GdsGrid);
+
 // libs/core/src/components/grouped-list/grouped-list.ts
-import { state as state11, property as property10 } from "lit/decorators.js";
+import { state as state12, property as property11 } from "lit/decorators.js";
 import { when as when5 } from "lit/directives/when.js";
 
 // libs/core/src/components/grouped-list/list-item.ts
@@ -2784,10 +3582,10 @@ var GdsGroupedList = class extends GdsElement {
   }
 };
 __decorateClass([
-  state11()
+  state12()
 ], GdsGroupedList.prototype, "_tStyles", 2);
 __decorateClass([
-  property10()
+  property11()
 ], GdsGroupedList.prototype, "label", 2);
 GdsGroupedList = __decorateClass([
   gdsCustomElement("gds-grouped-list")
@@ -2796,6 +3594,7 @@ export {
   GdsContextMenu,
   GdsDatepicker,
   GdsDropdown,
+  GdsGrid,
   GdsGroupedList,
   GdsMenuHeading,
   GdsMenuItem,