import {
  __decorateClass
} from "../../chunks/chunk.QU3DSPNU.js";
import { tokens } from "../../tokens.style.js";
import { styleExpressionProperty } from "../../utils/decorators/style-expression-property.js";
import { forSpaceTokens } from "../../utils/helpers/index.js";
import {
  gdsCustomElement,
  html
} from "../../utils/helpers/custom-element-scoping.js";
import { GdsDiv } from "../div/div.component.js";
import GridStyles from "./grid.styles.js";
let GdsGrid = class extends GdsDiv {
  render() {
    return html`<slot></slot>`;
  }
};
GdsGrid.styles = [tokens, GridStyles];
__decorateClass([
  styleExpressionProperty({
    property: "--_c"
  })
], GdsGrid.prototype, "columns", 2);
__decorateClass([
  styleExpressionProperty({
    ...forSpaceTokens,
    styleTemplate: (_prop, values) => {
      const rowGap = values[0];
      const colGap = values[1] || rowGap;
      return `--_gap-column: ${colGap}; --_gap-row: ${rowGap};`;
    }
  })
], GdsGrid.prototype, "gap", 2);
__decorateClass([
  styleExpressionProperty({
    reflect: true,
    property: "--_col-width",
    valueTemplate: (v) => `${isNaN(v) ? v : `${v}px`}`
  })
], GdsGrid.prototype, "auto-columns", 2);
GdsGrid = __decorateClass([
  gdsCustomElement("gds-grid")
], GdsGrid);
export {
  GdsGrid
};
