@sebgroup/green-core 1.18.1 → 1.20.0

package/chunks/{chunk.MVCYVB3S.js → chunk.NRYXPR4Z.js}

@@ -4,10 +4,10 @@ import {
 } from "./chunk.DFYMYEGD.js";
 import {
   TransitionalStyles
-} from "./chunk.XQ3SZZAO.js";
+} from "./chunk.ZLWSCK7R.js";
 import {
   GdsElement
-} from "./chunk.2LQSDOD4.js";
+} from "./chunk.EM7MZKG5.js";
 import {
   watch
 } from "./chunk.2WO4NHJ2.js";
@@ -22,7 +22,7 @@ import {
 } from "./chunk.5VURDMKE.js";
 
 // libs/core/src/primitives/listbox/listbox.ts
-import { property, state } from "lit/decorators.js";
+import { property } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
 import "reflect-metadata";
 
@@ -121,7 +121,7 @@ var GdsListbox = class extends GdsElement {
     (_a = this.visibleSelectedOptionElements[0] || this.visibleOptionElements[0]) == null ? void 0 : _a.focus();
   }
   render() {
-    return html`${this._tStyles}<slot ${ref(__privateGet(this, _slotRef))}></slot>`;
+    return html`<slot ${ref(__privateGet(this, _slotRef))}></slot>`;
   }
   _rerenderOptions() {
     this.options.forEach((el) => {
@@ -146,9 +146,6 @@ __decorateClass([
 __decorateClass([
   property()
 ], GdsListbox.prototype, "compareWith", 2);
-__decorateClass([
-  state()
-], GdsListbox.prototype, "_tStyles", 2);
 __decorateClass([
   watch("multiple")
 ], GdsListbox.prototype, "_rerenderOptions", 1);

package/chunks/{chunk.DBTRYFAB.js → chunk.NYOCHFZE.js}

@@ -1,12 +1,12 @@
 import {
   TransitionalStyles
-} from "./chunk.XQ3SZZAO.js";
+} from "./chunk.ZLWSCK7R.js";
 import {
   GdsElement
-} from "./chunk.2LQSDOD4.js";
+} from "./chunk.EM7MZKG5.js";
 import {
   constrainSlots
-} from "./chunk.6NM7ENKA.js";
+} from "./chunk.KBYQYDL3.js";
 import {
   gdsCustomElement,
   html
@@ -16,7 +16,7 @@ import {
 } from "./chunk.5VURDMKE.js";
 
 // libs/core/src/components/grouped-list/grouped-list.ts
-import { state, property } from "lit/decorators.js";
+import { property } from "lit/decorators.js";
 import { when } from "lit/directives/when.js";
 var GdsGroupedList = class extends GdsElement {
   constructor() {
@@ -29,7 +29,7 @@ var GdsGroupedList = class extends GdsElement {
     TransitionalStyles.instance.apply(this, "gds-grouped-list");
   }
   render() {
-    return html`${this._tStyles}${when(
+    return html`${when(
       this.label,
       () => html`<div class="gds-list-heading" aria-hidden="true" id="label">
             ${this.label}
@@ -40,9 +40,6 @@ var GdsGroupedList = class extends GdsElement {
       </div>`;
   }
 };
-__decorateClass([
-  state()
-], GdsGroupedList.prototype, "_tStyles", 2);
 __decorateClass([
   property()
 ], GdsGroupedList.prototype, "label", 2);

package/chunks/{chunk.I2IU2N5F.js → chunk.PE6MD3MB.js}

@@ -4,10 +4,10 @@ import {
 } from "./chunk.DFYMYEGD.js";
 import {
   TransitionalStyles
-} from "./chunk.XQ3SZZAO.js";
+} from "./chunk.ZLWSCK7R.js";
 import {
   GdsElement
-} from "./chunk.2LQSDOD4.js";
+} from "./chunk.EM7MZKG5.js";
 import {
   gdsCustomElement,
   html
@@ -20,7 +20,6 @@ import {
 
 // libs/core/src/primitives/menu/menu.ts
 import { createRef, ref } from "lit/directives/ref.js";
-import { state } from "lit/decorators.js";
 var _slotRef;
 var GdsMenu = class extends GdsElement {
   constructor() {
@@ -48,13 +47,10 @@ var GdsMenu = class extends GdsElement {
     (_a = this.navigableItems[0]) == null ? void 0 : _a.focus();
   }
   render() {
-    return html`${this._tStyles}<slot ${ref(__privateGet(this, _slotRef))}></slot>`;
+    return html`<slot ${ref(__privateGet(this, _slotRef))}></slot>`;
   }
 };
 _slotRef = new WeakMap();
-__decorateClass([
-  state()
-], GdsMenu.prototype, "_tStyles", 2);
 GdsMenu = __decorateClass([
   gdsCustomElement("gds-menu")
 ], GdsMenu);

package/chunks/{chunk.VDWYFSGX.js → chunk.RSCI4LL2.js}

@@ -1,12 +1,12 @@
 import {
   TransitionalStyles
-} from "./chunk.XQ3SZZAO.js";
+} from "./chunk.ZLWSCK7R.js";
 import {
   GdsElement
-} from "./chunk.2LQSDOD4.js";
+} from "./chunk.EM7MZKG5.js";
 import {
   constrainSlots
-} from "./chunk.6NM7ENKA.js";
+} from "./chunk.KBYQYDL3.js";
 import {
   gdsCustomElement,
   html
@@ -21,7 +21,7 @@ import {
 import { nothing } from "lit";
 import { msg } from "@lit/localize";
 import { classMap } from "lit-html/directives/class-map.js";
-import { property, queryAsync, state } from "lit/decorators.js";
+import { property, queryAsync } from "lit/decorators.js";
 
 // libs/core/src/components/context-menu/context-menu.styles.ts
 import { css } from "lit";
@@ -73,8 +73,7 @@ var GdsContextMenu = class extends GdsElement {
   }
   render() {
     var _a, _b, _c;
-    return html`${this._tStyles}
-      <button
+    return html`<button
         id="trigger"
         class="icon border-0 small ${classMap({ highlighted: this.open })}"
         aria-label=${(_a = this.buttonLabel) != null ? _a : this.label}
@@ -138,9 +137,6 @@ __decorateClass([
 __decorateClass([
   property()
 ], GdsContextMenu.prototype, "placement", 2);
-__decorateClass([
-  state()
-], GdsContextMenu.prototype, "_tStyles", 2);
 __decorateClass([
   queryAsync("#trigger")
 ], GdsContextMenu.prototype, "elTriggerBtn", 2);

package/chunks/{chunk.ETETI45J.js → chunk.VHKGMBUL.js}

@@ -1,12 +1,12 @@
 import {
   tokens
-} from "./chunk.3CAFC46K.js";
+} from "./chunk.W2XAWNZY.js";
 import {
   TransitionalStyles
-} from "./chunk.XQ3SZZAO.js";
+} from "./chunk.ZLWSCK7R.js";
 import {
   GdsElement
-} from "./chunk.2LQSDOD4.js";
+} from "./chunk.EM7MZKG5.js";
 import {
   gdsCustomElement,
   html

package/chunks/chunk.VHN4JEZC.js

@@ -0,0 +1,28 @@
+// libs/core/src/utils/decorators/resize-observer.ts
+function resizeObserver() {
+  return (proto, propertyKey, descriptor) => {
+    const connectedCallback = proto.connectedCallback;
+    const disconnectedCallback = proto.disconnectedCallback;
+    proto.connectedCallback = function() {
+      connectedCallback == null ? void 0 : connectedCallback.call(this);
+      this.__resizeObservers = this.__resizeObservers || {};
+      this.__resizeObserver_tids = this.__resizeObserver_tids || {};
+      this.__resizeObservers[propertyKey] = new ResizeObserver(() => {
+        this.__resizeObserver_tids[propertyKey] && clearTimeout(this.__resizeObserver_tids[propertyKey]);
+        this.__resizeObserver_tids[propertyKey] = setTimeout(() => {
+          var _a;
+          (_a = descriptor.value) == null ? void 0 : _a.call(this);
+        }, 20);
+      });
+      this.__resizeObservers[propertyKey].observe(this);
+    };
+    proto.disconnectedCallback = function() {
+      disconnectedCallback == null ? void 0 : disconnectedCallback.call(this);
+      this.__resizeObservers[propertyKey].disconnect();
+    };
+  };
+}
+
+export {
+  resizeObserver
+};

package/chunks/chunk.VOYMQ322.js

@@ -1,7 +1,7 @@
 // libs/core/src/utils/helpers/custom-element-scoping.ts
 import { html as litHtml } from "lit";
 import { customElement } from "lit/decorators.js";
-var VER_SUFFIX = "-7b50f8";
+var VER_SUFFIX = "-9f7153";
 var elementLookupTable = /* @__PURE__ */ new Map();
 var gdsCustomElement = (tagName) => {
   if (globalThis.GDS_DISABLE_VERSIONED_ELEMENTS) {

package/chunks/{chunk.3CAFC46K.js → chunk.W2XAWNZY.js}

@@ -4,7 +4,7 @@ import { unsafeCSS } from "lit";
 // dist/libs/tokens/internal/pallet.css
 var pallet_default = `/**
  * Do not edit directly
- * Generated on Thu, 02 May 2024 15:01:33 GMT
+ * Generated on Fri, 17 May 2024 12:50:34 GMT
  */
 
 :host {
@@ -165,7 +165,7 @@ var pallet_default = `/**
 // dist/libs/tokens/internal/theme/light.css
 var light_default = `/**
  * Do not edit directly
- * Generated on Thu, 02 May 2024 15:01:33 GMT
+ * Generated on Fri, 17 May 2024 12:50:34 GMT
  */
 
 :host {
@@ -286,7 +286,7 @@ var light_default = `/**
 // dist/libs/tokens/internal/size.css
 var size_default = `/**
  * Do not edit directly
- * Generated on Thu, 02 May 2024 15:01:33 GMT
+ * Generated on Fri, 17 May 2024 12:50:34 GMT
  */
 
 :host {
@@ -532,7 +532,7 @@ var size_default = `/**
 // dist/libs/tokens/internal/motion.css
 var motion_default = `/**
  * Do not edit directly
- * Generated on Thu, 02 May 2024 15:01:33 GMT
+ * Generated on Fri, 17 May 2024 12:50:34 GMT
  */
 
 :host {

package/chunks/chunk.W7CV3QYI.js

@@ -0,0 +1,105 @@
+import {
+  __privateAdd,
+  __privateGet,
+  __privateMethod,
+  __privateSet
+} from "./chunk.5VURDMKE.js";
+
+// libs/core/src/controllers/dynamic-styles-controller.ts
+var _useLegacyStylesheets, _initialStyleSheets, _styleSheets, _legacyStyleSheets, _applyStylesLegacy, applyStylesLegacy_fn, _applyStyles, applyStyles_fn;
+var DynamicStylesController = class {
+  constructor(host) {
+    __privateAdd(this, _applyStylesLegacy);
+    __privateAdd(this, _applyStyles);
+    __privateAdd(this, _useLegacyStylesheets, !supportsConstructedStylesheets());
+    __privateAdd(this, _initialStyleSheets, []);
+    __privateAdd(this, _styleSheets, /* @__PURE__ */ new Map());
+    __privateAdd(this, _legacyStyleSheets, /* @__PURE__ */ new Map());
+    this.host = host;
+    this.host.addController(this);
+  }
+  hostConnected() {
+    if (this.host.shadowRoot && __privateGet(this, _initialStyleSheets).length === 0) {
+      __privateSet(this, _initialStyleSheets, [
+        ...this.host.shadowRoot.adoptedStyleSheets || []
+      ]);
+    }
+  }
+  /**
+   * Injects CSS into the host element's shadow root. The key is used to
+   * identify the styles and can be used to update the styles later. If
+   * you need to clear style for a particular key, you can call `inject`
+   * with an empty string as the `styles` parameter.
+   *
+   * @param key - A unique key to identify the styles.
+   * @param styles - The CSSResult to inject.
+   */
+  inject(key, styles) {
+    const cssText = Array.isArray(styles) ? styles.map((style) => style.toString()).join("") : styles.toString();
+    if (__privateGet(this, _useLegacyStylesheets)) {
+      __privateMethod(this, _applyStylesLegacy, applyStylesLegacy_fn).call(this, key, cssText);
+    } else {
+      __privateMethod(this, _applyStyles, applyStyles_fn).call(this, key, cssText);
+    }
+  }
+  /**
+   * Clears all styles of the component, including any initial styles.
+   */
+  clearAll() {
+    var _a;
+    if (__privateGet(this, _useLegacyStylesheets)) {
+      __privateGet(this, _legacyStyleSheets).forEach((styleEl) => styleEl.remove());
+      (_a = this.host.shadowRoot) == null ? void 0 : _a.querySelectorAll("style").forEach((style) => style.innerHTML = "");
+      __privateGet(this, _legacyStyleSheets).clear();
+    } else {
+      if (this.host.shadowRoot) {
+        this.host.shadowRoot.adoptedStyleSheets = [];
+        __privateGet(this, _styleSheets).clear();
+        __privateSet(this, _initialStyleSheets, []);
+      }
+    }
+  }
+};
+_useLegacyStylesheets = new WeakMap();
+_initialStyleSheets = new WeakMap();
+_styleSheets = new WeakMap();
+_legacyStyleSheets = new WeakMap();
+_applyStylesLegacy = new WeakSet();
+applyStylesLegacy_fn = function(key, cssText) {
+  var _a;
+  let styleEl = __privateGet(this, _legacyStyleSheets).get(key);
+  if (!styleEl) {
+    styleEl = document.createElement("style");
+    __privateGet(this, _legacyStyleSheets).set(key, styleEl);
+  }
+  styleEl.textContent = cssText;
+  (_a = this.host.shadowRoot) == null ? void 0 : _a.appendChild(styleEl);
+};
+_applyStyles = new WeakSet();
+applyStyles_fn = function(key, cssText) {
+  if (!this.host.shadowRoot)
+    return;
+  let styleSheet = __privateGet(this, _styleSheets).get(key);
+  if (!styleSheet) {
+    styleSheet = new CSSStyleSheet();
+    __privateGet(this, _styleSheets).set(key, styleSheet);
+  }
+  styleSheet.replaceSync(cssText);
+  this.host.shadowRoot.adoptedStyleSheets = [
+    ...__privateGet(this, _initialStyleSheets),
+    ...Array.from(__privateGet(this, _styleSheets).values())
+  ];
+};
+function supportsConstructedStylesheets() {
+  try {
+    new CSSStyleSheet();
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
+export {
+  DynamicStylesController,
+  supportsConstructedStylesheets
+};

package/chunks/{chunk.YIQIH4RW.js → chunk.XOARVFGN.js}

@@ -1,6 +1,6 @@
 import {
   GdsElement
-} from "./chunk.2LQSDOD4.js";
+} from "./chunk.EM7MZKG5.js";
 import {
   watch
 } from "./chunk.2WO4NHJ2.js";

package/chunks/chunk.Y42J4CV3.js

@@ -0,0 +1,86 @@
+import {
+  TransitionalStyles
+} from "./chunk.ZLWSCK7R.js";
+import {
+  GdsElement
+} from "./chunk.EM7MZKG5.js";
+import {
+  gdsCustomElement,
+  getScopedTagName,
+  html
+} from "./chunk.VOYMQ322.js";
+import {
+  __decorateClass
+} from "./chunk.5VURDMKE.js";
+
+// libs/core/src/components/filter-chips/filter-chip/filter-chip.ts
+import { property, queryAsync } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+
+// libs/core/src/components/filter-chips/filter-chip/filter-chip.styles.ts
+import { css } from "lit";
+var styles = css`
+  @layer base, reset, transitional-styles;
+  @layer base {
+    .btn-p {
+      padding: 0 0.75rem;
+    }
+    .icon {
+      width: 1rem;
+    }
+  }
+`;
+
+// libs/core/src/components/filter-chips/filter-chip/filter-chip.ts
+var GdsFilterChip = class extends GdsElement {
+  constructor() {
+    super(...arguments);
+    this.selected = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "none");
+    TransitionalStyles.instance.apply(this, "gds-filter-chip");
+    this._button.then((btn) => {
+      TransitionalStyles.instance.apply(btn, "gds-button");
+    });
+  }
+  render() {
+    const btnClasses = {
+      "btn-p": !this.selected
+    };
+    return html`<gds-button
+      class="btn"
+      size="small"
+      .rank=${this.selected ? "primary" : "secondary"}
+      variant=${this._isUsingTransitionalStyles ? "ghost" : "default"}
+      gds-role="option"
+      gds-aria-selected=${this.selected}
+    >
+      <span class=${classMap(btnClasses)}><slot></slot></span>
+      <gds-icon
+        name="checkmark"
+        slot="trail"
+        style="display: ${this.selected ? "block" : "none"}"
+        class="icon"
+      ></gds-icon>
+    </gds-button>`;
+  }
+};
+GdsFilterChip.styles = [styles];
+__decorateClass([
+  property({ reflect: true, type: Boolean })
+], GdsFilterChip.prototype, "selected", 2);
+__decorateClass([
+  property()
+], GdsFilterChip.prototype, "value", 2);
+__decorateClass([
+  queryAsync(getScopedTagName("gds-button"))
+], GdsFilterChip.prototype, "_button", 2);
+GdsFilterChip = __decorateClass([
+  gdsCustomElement("gds-filter-chip")
+], GdsFilterChip);
+
+export {
+  GdsFilterChip
+};

package/chunks/chunk.YBOK7MI7.js

@@ -0,0 +1,31 @@
+// libs/core/src/utils/directives/forward-attributes.ts
+import { Directive, PartType, directive } from "lit/directive.js";
+import { nothing } from "lit/html.js";
+var ForwardAttributesDirective = class extends Directive {
+  constructor(partInfo) {
+    super(partInfo);
+    if (partInfo.type !== PartType.ELEMENT) {
+      throw new Error(
+        "The `forwardAttributes` directive must be used in element bindings"
+      );
+    }
+  }
+  render(_filter) {
+    return nothing;
+  }
+  update(part, [filter]) {
+    var _a;
+    const element = part.element;
+    const host = (_a = part.options) == null ? void 0 : _a.host;
+    Array.from(host.attributes).forEach((attr) => {
+      if (filter(attr)) {
+        element.setAttribute(attr.name.replace("gds-", ""), attr.value);
+      }
+    });
+  }
+};
+var forwardAttributes = directive(ForwardAttributesDirective);
+
+export {
+  forwardAttributes
+};

package/chunks/chunk.YDYO7HP5.js

@@ -0,0 +1,196 @@
+import {
+  grid_style_css_default
+} from "./chunk.NBEFLQNK.js";
+import {
+  tokens
+} from "./chunk.W2XAWNZY.js";
+import {
+  GdsElement
+} from "./chunk.EM7MZKG5.js";
+import {
+  watch
+} from "./chunk.2WO4NHJ2.js";
+import {
+  gdsCustomElement,
+  html
+} from "./chunk.VOYMQ322.js";
+import {
+  __decorateClass,
+  __privateAdd,
+  __privateGet,
+  __privateSet,
+  __spreadProps,
+  __spreadValues
+} from "./chunk.5VURDMKE.js";
+
+// libs/core/src/components/grid/grid.ts
+import { css, unsafeCSS } from "lit";
+import { property } from "lit/decorators.js";
+var BreakpointPattern = new RegExp("(?<l>l:([a-z0-9]+))?\\s*(?<m>m:([a-z0-9]+))?\\s*(?<s>s:([a-z0-9]+))?");
+var _gridVariables;
+var GdsGrid = class extends GdsElement {
+  constructor() {
+    super(...arguments);
+    /**
+     * State variable that holds the CSS variables for column, gap, and padding.
+     */
+    __privateAdd(this, _gridVariables, {
+      varsColumn: css``,
+      varsGap: css``,
+      varsRowGap: css``,
+      varsPadding: css``,
+      varsAutoColumns: css``
+    });
+  }
+  /**
+   * 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();
+  }
+  _updateCSSVariables(propertyName, propertyPrefix) {
+    let propertyValue;
+    if (propertyName in this) {
+      propertyValue = this[propertyName];
+    }
+    const match = (propertyValue == null ? void 0 : propertyValue.match(BreakpointPattern)) || null;
+    let desktop;
+    let tablet;
+    let mobile;
+    const { l, m, s } = (match == null ? void 0 : match.groups) || {};
+    const processBreakpoints = (l2, m2, s2) => {
+      const desktop2 = l2 ? `var(--gds-sys-grid-gap-${l2.split(":")[1]})` : void 0;
+      const tablet2 = m2 ? `var(--gds-sys-grid-gap-${m2.split(":")[1]})` : void 0;
+      const mobile2 = s2 ? `var(--gds-sys-grid-gap-${s2.split(":")[1]})` : void 0;
+      return { desktop: desktop2, tablet: tablet2, mobile: mobile2 };
+    };
+    if (propertyName === "columns") {
+      if (this.columns && !isNaN(Number(this.columns))) {
+        desktop = tablet = mobile = Number(this.columns);
+      } else {
+        desktop = l ? l.split(":")[1] : void 0;
+        tablet = m ? m.split(":")[1] : void 0;
+        mobile = s ? s.split(":")[1] : void 0;
+      }
+    }
+    if (propertyName === "gap") {
+      if (this.gap && !this.gap.includes(" ")) {
+        desktop = tablet = mobile = `var(--gds-sys-grid-gap-${this.gap})`;
+      } else {
+        ;
+        ({ desktop, tablet, mobile } = processBreakpoints(l, m, s));
+      }
+    }
+    if (propertyName === "rowGap") {
+      if (this.rowGap && !this.rowGap.includes(" ")) {
+        desktop = tablet = mobile = `var(--gds-sys-grid-gap-${this.rowGap})`;
+      } else {
+        ;
+        ({ desktop, tablet, mobile } = processBreakpoints(l, m, s));
+      }
+    }
+    if (propertyName === "padding") {
+      if (this.padding && !this.padding.includes(" ")) {
+        desktop = tablet = mobile = `var(--gds-sys-grid-gap-${this.padding})`;
+      } else {
+        ;
+        ({ desktop, tablet, mobile } = processBreakpoints(l, m, s));
+      }
+    }
+    if (propertyName === "auto-columns") {
+      if (this.autoColumns && !this.autoColumns.includes(" ")) {
+        desktop = tablet = mobile = `${this.autoColumns}px`;
+      } else {
+        desktop = l ? `${l.split(":")[1]}px` : void 0;
+        tablet = m ? `${m.split(":")[1]}px` : void 0;
+        mobile = s ? `${s.split(":")[1]}px` : void 0;
+      }
+    }
+    const properties = [
+      { name: `${propertyPrefix}-desktop`, value: desktop },
+      { name: `${propertyPrefix}-tablet`, value: tablet },
+      { name: `${propertyPrefix}-mobile`, value: mobile }
+    ];
+    const cssVariables = properties.filter(({ value }) => value !== void 0).map(({ name, value }) => `--_${name}: ${value};`).join(" ");
+    __privateSet(this, _gridVariables, __spreadProps(__spreadValues({}, __privateGet(this, _gridVariables)), {
+      [propertyPrefix]: css`
+        ${unsafeCSS(cssVariables)}
+      `
+    }));
+    this._dynamicStylesController.inject(
+      "grid-vars",
+      css`
+        :host {
+          ${unsafeCSS(Object.values(__privateGet(this, _gridVariables)).join(""))}
+        }
+      `
+    );
+  }
+  _updateColumnVariables() {
+    this._updateCSSVariables("columns", "columns");
+  }
+  _updateGapVariables() {
+    this._updateCSSVariables("gap", "gap");
+  }
+  _updateRowGapVariables() {
+    this._updateCSSVariables("rowGap", "row-gap");
+  }
+  _updatePaddingVariables() {
+    this._updateCSSVariables("padding", "padding");
+  }
+  _updateAutoColumnsVariables() {
+    this._updateCSSVariables("auto-columns", "col-width");
+  }
+  render() {
+    return html`<slot></slot>`;
+  }
+};
+_gridVariables = new WeakMap();
+GdsGrid.styles = [tokens, grid_style_css_default];
+GdsGrid.shadowRootOptions = {
+  mode: "open",
+  delegatesFocus: true
+};
+__decorateClass([
+  property({ attribute: "columns", type: String })
+], GdsGrid.prototype, "columns", 2);
+__decorateClass([
+  property({ attribute: "gap", type: String })
+], GdsGrid.prototype, "gap", 2);
+__decorateClass([
+  property({ attribute: "row-gap", type: String })
+], GdsGrid.prototype, "rowGap", 2);
+__decorateClass([
+  property({ attribute: "padding", type: String })
+], GdsGrid.prototype, "padding", 2);
+__decorateClass([
+  property({ attribute: "auto-columns", type: String })
+], GdsGrid.prototype, "autoColumns", 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);
+GdsGrid = __decorateClass([
+  gdsCustomElement("gds-grid")
+], GdsGrid);
+
+export {
+  GdsGrid
+};