@sebgroup/green-core 1.9.2 → 1.11.0

package/components/context-menu/context-menu.d.ts

@@ -16,6 +16,7 @@ import '../../primitives/menu/menu';
  */
 export declare class GdsContextMenu extends GdsElement {
     #private;
+    static styles: import("lit").CSSResult[];
     static shadowRootOptions: ShadowRootInit;
     /**
      * Whether the context menu popover is open.

package/components/context-menu/context-menu.styles.d.ts

@@ -0,0 +1,2 @@
+declare const style: import("lit").CSSResult;
+export default style;

package/components/grid/grid.d.ts

@@ -0,0 +1,85 @@
+import { CSSResult, LitElement } from 'lit';
+declare type GridSizes = 'none' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl';
+/**
+ * @element gds-grid
+ * The `gds-grid` is a custom element that provides a flexible grid system. It uses CSS grid layout to arrange its child elements into columns. This component is highly customizable and responsive, allowing you to specify the number of `columns`, `gap`, `padding`, and fluidity for different devices with automated column size based on the content using the `auto-columns` attribute.
+ *
+ * @status beta
+ *
+ */
+export declare class GdsGrid extends LitElement {
+    static styles: (CSSResult | CSSResult[])[];
+    static shadowRootOptions: ShadowRootInit;
+    /**
+     * @property {string} columns - The number of columns for the grid. This can be a single value that applies to all breakpoints, or a string of three space-separated tokens in the format "l:desktop m:tablet s:mobile", each token specifying the number of columns for that device type respectively.
+     * @example
+     * ```html
+     * <gds-grid columns="2"></gds-grid> <!-- applies to all breakpoints -->
+     * <gds-grid columns="l:8 m:4 s:2"></gds-grid> <!-- different values for each breakpoint -->
+     * ```
+     */
+    columns?: string | undefined;
+    /**
+     * @property {string} gap - Defines the gap size between grid items. Accepts a single value for all breakpoints or a "l:desktop m:tablet s:mobile" format. Sizes can be 'none', 'xs', 's', 'm', 'l', 'xl', '2xl', '3xl'.
+     * @example
+     * ```html
+     * <gds-grid gap="m"></gds-grid> <!-- applies to all breakpoints -->
+     * <gds-grid gap="l:m m:s s:xs"></gds-grid> <!-- different values for each breakpoint -->
+     * ```
+     */
+    gap?: GridSizes;
+    /**
+     * @property {string} padding - Defines the padding size around the grid. Accepts a single value for all breakpoints or a "l:desktop m:tablet s:mobile" format. Sizes can be 'none', 'xs', 's', 'm', 'l', 'xl', '2xl', '3xl'.
+     * @example
+     * ```html
+     * <gds-grid padding="m"></gds-grid> <!-- applies to all breakpoints -->
+     * <gds-grid padding="l:m m:s s:xs"></gds-grid> <!-- different values for each breakpoint -->
+     * ```
+     */
+    padding?: GridSizes;
+    /**
+     * @property {string} auto-columns - Defines the minimum column width in pixels. Accepts a single value for all breakpoints or a "l:desktop m:tablet s:mobile" format. If set, the grid adjusts column size based on content and available width, even without other attributes.
+     * @example
+     * ```html
+     * <gds-grid auto-columns="200"></gds-grid> <!-- applies to all breakpoints -->
+     * <gds-grid auto-columns="l:200 m:100 s:80"></gds-grid> <!-- different values for each breakpoint -->
+     * ```
+     */
+    autoColumns?: GridSizes;
+    /**
+     * Lifecycle method called when the element is connected to the DOM.
+     * It updates the column, gap, and padding variables.
+     */
+    connectedCallback(): void;
+    /**
+     * State variable that holds the CSS variables for column, gap, and padding.
+     */
+    private _gridVariables;
+    /**
+     * Watcher for the 'columns' property.
+     * It updates the column CSS variables when the 'columns' property changes.
+     */
+    private _updateColumnVariables;
+    /**
+     * Watcher for the 'gap' property.
+     * It updates the gap CSS variables when the 'gap' property changes.
+     */
+    private _updateGapVariables;
+    /**
+     * Watcher for the 'padding' property.
+     * It updates the padding CSS variables when the 'padding' property changes.
+     */
+    private _updatePaddingVariables;
+    /**
+     * Watcher for the 'autoColumns' property.
+     * It updates the min-width for each column on a "--_col-width" variable.
+     */
+    private _updateAutoColumnsVariables;
+    /**
+     * Watcher for the '_gridVariables' property.
+     * It updates the CSS stylesheet when the '_gridVariables' property changes.
+     */
+    private _updateGridCss;
+    render(): any;
+}
+export {};

package/components/grid/grid.style.css.d.ts

@@ -0,0 +1,2 @@
+declare const style: import("lit").CSSResult;
+export default style;

package/components/index.d.ts

@@ -4,4 +4,5 @@ export * from '../primitives/menu/menu-heading';
 export * from './context-menu/context-menu';
 export * from '../primitives/menu/menu-item';
 export * from './datepicker/datepicker';
+export * from './grid/grid';
 export * from './grouped-list/grouped-list';

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 = "-2d68d7";
+var VER_SUFFIX = "-8cc777";
 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 {
@@ -2742,8 +2798,705 @@ 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 Tue, 02 Apr 2024 11:52:08 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 Tue, 02 Apr 2024 11:52:08 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-accent-orange: #FFBA30;
+  --gds-sys-color-background-background: #FFFFFF;
+  --gds-sys-color-background-background-dim: #F3F3F2;
+  --gds-sys-color-container-container: #F3F3F2;
+  --gds-sys-color-container-dim1: #E7E7E4;
+  --gds-sys-color-container-dim2: #DADAD7;
+  --gds-sys-color-container-bright: #FFFFFF;
+  --gds-sys-color-container-shade1: #353531;
+  --gds-sys-color-container-shade2: #1B1B18;
+  --gds-sys-color-container-disabled: #F9F9F9;
+  --gds-sys-color-container-positive: #006D31;
+  --gds-sys-color-container-negative: #BA1D00;
+  --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-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: #BA1D00;
+}
+`;
+
+// dist/libs/tokens/internal/size.css
+var size_default = `/**
+ * Do not edit directly
+ * Generated on Tue, 02 Apr 2024 11:52:08 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;
+      display: grid;
+      width: 100%;
+      grid-template-columns: var(--_grid-col);
+      grid-column-gap: var(--_gap-column);
+      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);
+    --_grid-padding: var(--_padding-desktop);
+    --_col-width: var(--_col-width-desktop);
+  }
+
+  @media only screen and (max-width: 768px) {
+    :host(:not([auto-columns])) {
+      --_c: var(--_columns-tablet);
+      --_gap-column: var(--_gap-tablet);
+      --_grid-padding: var(--_padding-tablet);
+      --_col-width: var(--_col-width-tablet);
+    }
+  }
+
+  @media only screen and (max-width: 425px) {
+    :host(:not([auto-columns])) {
+      --_c: var(--_columns-mobile);
+      --_gap-column: var(--_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``,
+      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._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");
+  }
+  _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: "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("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 +3537,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 +3549,7 @@ export {
   GdsContextMenu,
   GdsDatepicker,
   GdsDropdown,
+  GdsGrid,
   GdsGroupedList,
   GdsMenuHeading,
   GdsMenuItem,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sebgroup/green-core",
   "description": "A carefully crafted set of Web Components, laying the foundation of the Green Design System.",
-  "version": "1.9.2",
+  "version": "1.11.0",
   "main": "index.js",
   "module": "index.js",
   "type": "module",

package/primitives/menu/menu-item.d.ts

@@ -7,6 +7,7 @@ declare const GdsMenuItem_base: (new (...args: any[]) => LitElement) & typeof Gd
  */
 export declare class GdsMenuItem extends GdsMenuItem_base {
     #private;
+    static styles: import("lit").CSSResult[];
     private _tStyles?;
     connectedCallback(): void;
     render(): any;

package/tokens.style.d.ts

@@ -0,0 +1,2 @@
+declare const tokens: import("lit").CSSResult[];
+export { tokens };

package/transitional-styles.js

@@ -152,15 +152,15 @@ var option_trans_styles_default = `/**
 var menu_heading_trans_styles_default = `@layer base, reset, transitional-styles;
 @layer transitional-styles {
   :host {
-    padding: 0.75rem 1rem;
     background-color: var(--gds-ref-pallet-base300);
     color: var(--gds-ref-pallet-base800);
     display: flex;
+    font-size: 0.875rem;
+    font-weight: 500;
+    padding: 0.75rem 1rem;
     -webkit-user-select: none;
        -moz-user-select: none;
             user-select: none;
-    font-size: 0.875rem;
-    font-weight: 500;
   }
   :host([aria-hidden=true]) {
     display: none;
@@ -2064,7 +2064,7 @@ a.button.tertiary.danger:focus-visible {
     }
   }
   header button.close {
-    margin: 0rem;
+    margin: 0;
     padding: 0;
   }
   header h2 {
@@ -2084,11 +2084,11 @@ a.button.tertiary.danger:focus-visible {
     position: fixed;
     visibility: hidden;
     z-index: var(--z-index);
+    color: var(--text-primary-color);
     inset: 0;
     overflow: hidden;
     padding: 0;
     right: 0;
-    color: var(--text-primary-color);
   }
   @media (max-width: 35.98em) {
     dialog {
@@ -2136,9 +2136,9 @@ a.button.tertiary.danger:focus-visible {
   }
   @media (max-width: 35.98em) {
     dialog {
-      max-height: 80svh;
-      border-radius: 0.25rem;
       border: 1px solid var(--border-color);
+      border-radius: 0.25rem;
+      max-height: 80svh;
       padding-bottom: 0;
     }
     dialog.v-kb-visible {
@@ -2700,6 +2700,10 @@ i.sg-icon.sg-icon-ellipsis::before {
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z'/%3E%3C/svg%3E");
           mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z'/%3E%3C/svg%3E");
 }
+i.sg-icon.sg-icon-grip-vertical::before {
+  -webkit-mask-image: url("data:image/svg+xml, %3Csvg height='1em' viewBox='0 0 320 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 320c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 192l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 160c-22.1 0-40-17.9-40-40L0 72C0 49.9 17.9 32 40 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z' /%3E%3C/svg%3E");
+          mask-image: url("data:image/svg+xml, %3Csvg height='1em' viewBox='0 0 320 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 320c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 192l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 160c-22.1 0-40-17.9-40-40L0 72C0 49.9 17.9 32 40 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z' /%3E%3C/svg%3E");
+}
 i.sg-icon.sg-icon-next::before {
   background: none;
   border-bottom: 2px solid;
@@ -2884,10 +2888,10 @@ var calendar_trans_styles_default = `/* stylelint-disable max-nesting-depth */
     }
     :host table tr th,
     :host table tr td {
+      box-sizing: border-box;
       height: 2.75rem;
       text-align: center;
       width: 2.75rem;
-      box-sizing: border-box;
     }
     :host table thead th {
       background: var(--sg-bg-level-2);
@@ -2917,8 +2921,8 @@ var calendar_trans_styles_default = `/* stylelint-disable max-nesting-depth */
     :host table tbody tr td.today {
       background: transparent;
       border-radius: 4px;
-      color: var(--grey-1000);
       box-shadow: inset 0 0 0 2px var(--grey-1000);
+      color: var(--grey-1000);
     }
     :host table tbody tr td:hover:not(.disabled) {
       background: var(--grey-500);
@@ -2961,11 +2965,11 @@ var calendar_trans_styles_default = `/* stylelint-disable max-nesting-depth */
     }
     :host table tbody tr td.disabled {
       background: hsl(var(--sg-hsl-disabled-background));
+      border: solid 1px var(--sg-bg-level-2);
+      border-radius: 4px;
       color: hsl(var(--sg-hsl-disabled-color));
       cursor: not-allowed;
       font-weight: 400;
-      border-radius: 4px;
-      border: solid 1px var(--sg-bg-level-2);
     }
     :host table tbody tr td.disabled.sg-date-holiday {
       color: hsla(var(--sg-hsl-red-2), 0.25);
@@ -3035,6 +3039,10 @@ i.sg-icon.sg-icon-ellipsis::before {
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z'/%3E%3C/svg%3E");
           mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z'/%3E%3C/svg%3E");
 }
+i.sg-icon.sg-icon-grip-vertical::before {
+  -webkit-mask-image: url("data:image/svg+xml, %3Csvg height='1em' viewBox='0 0 320 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 320c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 192l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 160c-22.1 0-40-17.9-40-40L0 72C0 49.9 17.9 32 40 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z' /%3E%3C/svg%3E");
+          mask-image: url("data:image/svg+xml, %3Csvg height='1em' viewBox='0 0 320 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 320c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 192l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 160c-22.1 0-40-17.9-40-40L0 72C0 49.9 17.9 32 40 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z' /%3E%3C/svg%3E");
+}
 i.sg-icon.sg-icon-next::before {
   background: none;
   border-bottom: 2px solid;
@@ -3090,16 +3098,15 @@ i.sg-icon.sg-icon-ellipsis::before {
     border-radius: var(--sg-border-radius);
     border: solid var(--sg-border-width) var(--sg-border-color);
     --border-color: var(--sg-border-color);
-    align-items: center;
+    align-items: stretch;
     background-color: var(--sg-form-control-bg);
     box-sizing: border-box;
     color: var(--sg-text-primary);
+    cursor: text;
     display: flex;
     justify-content: space-between;
-    align-items: stretch;
     margin: 0.5rem 0;
     min-height: 2.75rem;
-    cursor: text;
   }
   .field:hover {
     background-color: var(--grey-200);
@@ -3108,9 +3115,9 @@ i.sg-icon.sg-icon-ellipsis::before {
     padding-left: 1rem;
     padding-right: 1rem;
     border-radius: var(--sg-border-radius);
-    flex-grow: 1;
-    display: flex;
     align-items: center;
+    display: flex;
+    flex-grow: 1;
   }
   .field .input:focus:not(:focus-visible) {
     box-shadow: none;
@@ -3139,8 +3146,8 @@ i.sg-icon.sg-icon-ellipsis::before {
     display: inline-block;
   }
   .field [role=spinbutton]:focus {
-    outline: none;
     background: color-mix(in srgb, var(--gds-sys-color-blue) 50%, transparent);
+    outline: none;
   }
   .field [role=spinbutton]::-moz-selection {
     background: transparent;
@@ -3153,12 +3160,12 @@ i.sg-icon.sg-icon-ellipsis::before {
     -webkit-appearance: none;
        -moz-appearance: none;
             appearance: none;
+    background: transparent;
     border: 0;
     box-sizing: border-box;
+    color: var(--text-primary-color);
     cursor: pointer;
     width: 2.75rem;
-    background: transparent;
-    color: var(--text-primary-color);
   }
   .field button:focus:not(:focus-visible) {
     box-shadow: none;
@@ -3174,8 +3181,8 @@ i.sg-icon.sg-icon-ellipsis::before {
     background: var(--grey-500);
   }
   .field button svg {
-    width: 1rem;
     height: 1rem;
+    width: 1rem;
   }
   .field button svg > * {
     fill: none;
@@ -3185,8 +3192,8 @@ i.sg-icon.sg-icon-ellipsis::before {
     stroke-width: 2px;
   }
   .field.small {
-    min-height: 2rem;
     font-size: 0.875rem;
+    min-height: 2rem;
   }
   :host(:invalid) .field + .form-info {
     position: relative;
@@ -3238,9 +3245,9 @@ i.sg-icon.sg-icon-ellipsis::before {
     background: transparent;
     border: 0;
     cursor: pointer;
-    padding: 0.5rem 0.5rem;
-    width: 2.75rem;
     margin: 0.125rem 0.25rem;
+    padding: 0.5rem;
+    width: 2.75rem;
   }
   .header button:focus:not(:focus-visible) {
     box-shadow: none;
@@ -3333,21 +3340,20 @@ var grouped_list_trans_styles_default = `@layer base, reset, transitional-styles
   }
   @layer _base {
     .gds-list-heading {
-      padding: 0.5rem 1rem;
+      background-color: var(--gds-ref-pallet-base200, #e9e9e9);
       font-size: 0.875rem;
       font-weight: 500;
-      background-color: var(--gds-ref-pallet-base200, #e9e9e9);
+      padding: 0.5rem 1rem;
     }
     ::slotted([gds-element=gds-list-item]) {
       all: revert;
+      border-bottom: 1px solid var(--gds-ref-pallet-base200, #e9e9e9);
       display: flex;
       gap: 0.25rem;
       justify-content: space-between;
       padding: 1rem;
-      border-bottom: 1px solid var(--gds-ref-pallet-base200, #e9e9e9);
     }
   }
-  @layer _overrides {}
 }`;
 
 // libs/core/src/components/grouped-list/grouped-list.trans.styles.ts
@@ -3358,7 +3364,7 @@ function register7() {
 // libs/core/src/utils/helpers/custom-element-scoping.ts
 import { html as litHtml } from "lit";
 import { customElement } from "lit/decorators.js";
-var VER_SUFFIX = "-2d68d7";
+var VER_SUFFIX = "-8cc777";
 var elementLookupTable = /* @__PURE__ */ new Map();
 var templateCache = /* @__PURE__ */ new WeakMap();
 function applyElementScoping(strings, ...values) {