@sebgroup/green-core 1.11.0 → 1.12.0

package/components/grid/grid.d.ts

@@ -20,7 +20,7 @@ export declare class GdsGrid extends LitElement {
      */
     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'.
+     * @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 -->
@@ -28,6 +28,15 @@ export declare class GdsGrid extends LitElement {
      * ```
      */
     gap?: GridSizes;
+    /**
+     * @property {string} `row-gap` - Defines the gap size between grid items in vertical axis. 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 row-gap="m"></gds-grid> <!-- applies to all breakpoints -->
+     * <gds-grid row-gap="l:m m:s s:xs"></gds-grid> <!-- different values for each breakpoint -->
+     * ```
+     */
+    rowGap?: 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
@@ -65,6 +74,11 @@ export declare class GdsGrid extends LitElement {
      * It updates the gap CSS variables when the 'gap' property changes.
      */
     private _updateGapVariables;
+    /**
+     * Watcher for the 'row-gap' property.
+     * It updates the row-gap CSS variables when the 'row-gap' property changes.
+     */
+    private _updateRowGapVariables;
     /**
      * Watcher for the 'padding' property.
      * It updates the padding CSS variables when the 'padding' property changes.

package/index.js

@@ -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 = "-8cc777";
+var VER_SUFFIX = "-b357a1";
 var elementLookupTable = /* @__PURE__ */ new Map();
 var gdsCustomElement = (tagName) => {
   if (globalThis.GDS_DISABLE_VERSIONED_ELEMENTS) {
@@ -2808,7 +2808,7 @@ 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
+ * Generated on Wed, 10 Apr 2024 11:06:21 GMT
  */
 
 :host {
@@ -2969,7 +2969,7 @@ var pallet_default = `/**
 // dist/libs/tokens/internal/theme/light.css
 var light_default = `/**
  * Do not edit directly
- * Generated on Tue, 02 Apr 2024 11:52:08 GMT
+ * Generated on Wed, 10 Apr 2024 11:06:21 GMT
  */
 
 :host {
@@ -3006,22 +3006,27 @@ var light_default = `/**
   --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-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-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;
@@ -3076,14 +3081,16 @@ var light_default = `/**
   --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;
+  --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 Tue, 02 Apr 2024 11:52:08 GMT
+ * Generated on Wed, 10 Apr 2024 11:06:21 GMT
  */
 
 :host {
@@ -3258,10 +3265,12 @@ var style8 = css9`
       --_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;
     }
@@ -3284,23 +3293,26 @@ var style8 = css9`
   :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(:not([auto-columns])) {
+    :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(:not([auto-columns])) {
+    :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);
     }
@@ -3316,6 +3328,7 @@ var GdsGrid = class extends LitElement7 {
     this._gridVariables = {
       varsColumn: css10``,
       varsGap: css10``,
+      varsRowGap: css10``,
       varsPadding: css10``,
       varsAutoColumns: css10``
     };
@@ -3328,6 +3341,7 @@ var GdsGrid = class extends LitElement7 {
     super.connectedCallback();
     this._updateColumnVariables();
     this._updateGapVariables();
+    this._updateRowGapVariables();
     this._updatePaddingVariables();
     this._updateAutoColumnsVariables();
   }
@@ -3381,6 +3395,31 @@ var GdsGrid = class extends LitElement7 {
     };
     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;
@@ -3467,6 +3506,9 @@ __decorateClass([
 __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);
@@ -3482,6 +3524,9 @@ __decorateClass([
 __decorateClass([
   watch("gap")
 ], GdsGrid.prototype, "_updateGapVariables", 1);
+__decorateClass([
+  watch("row-gap")
+], GdsGrid.prototype, "_updateRowGapVariables", 1);
 __decorateClass([
   watch("padding")
 ], GdsGrid.prototype, "_updatePaddingVariables", 1);

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.11.0",
+  "version": "1.12.0",
   "main": "index.js",
   "module": "index.js",
   "type": "module",

package/transitional-styles.js

@@ -3364,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 = "-8cc777";
+var VER_SUFFIX = "-b357a1";
 var elementLookupTable = /* @__PURE__ */ new Map();
 var templateCache = /* @__PURE__ */ new WeakMap();
 function applyElementScoping(strings, ...values) {