@pushengineering/umg-web-components 2.0.6 → 3.0.1

package/dist/components/footer/footer.js

@@ -1,150 +1,177 @@
-import { css as c, LitElement as l, html as f } from "lit";
-import { customElement as g } from "lit/decorators/custom-element.js";
-import { property as s } from "lit/decorators/property.js";
-import { classMap as u } from "lit/directives/class-map.js";
-import { styleMap as m } from "lit/directives/style-map.js";
-import { global as h } from "../../styles/global.js";
-import { settings as v } from "../../scripts/settings.js";
-import { mergeStyles as y } from "../../scripts/mergeStyles.js";
-var _ = Object.defineProperty, b = Object.getOwnPropertyDescriptor, e = (t, i, n, a) => {
-  for (var r = a > 1 ? void 0 : a ? b(i, n) : i, p = t.length - 1, d; p >= 0; p--)
-    (d = t[p]) && (r = (a ? d(i, n, r) : d(r)) || r);
-  return a && r && _(i, n, r), r;
-};
-const { prefix: x } = v;
-let o = class extends l {
-  constructor() {
-    super(...arguments), this.width = "page-width", this.paddingTop = "", this.paddingBottom = "", this.socialsHidden = !1, this.centerContent = !1, this.colortext = "", this.colorBg = "";
-  }
-  footerClasses() {
-    return {
-      footer: !0,
-      "footer--socials-hidden": this.socialsHidden,
-      "footer--center": this.centerContent
-    };
-  }
-  footerStyles() {
-    let t = {};
-    return this.paddingTop && (t = {
-      ...t,
-      "--um-space-footer-padding-top": "var(--um-space-" + this.paddingTop + ")"
-    }), this.paddingBottom && (t = {
-      ...t,
-      "--um-space-footer-padding-bottom": "var(--um-space-" + this.paddingBottom + ")"
-    }), this.colortext && (t = {
-      ...t,
-      "--um-color-section-text": this.colortext
-    }), this.colorBg && (t = {
-      ...t,
-      "--um-color-section-bg": this.colorBg
-    }), t;
-  }
-  footerInnerStyles() {
-    let t = {};
-    return this.width === "full-width" && (t = {
-      ...t,
-      "--um-size-page-width": "100%"
-    }), t;
-  }
-  render() {
-    return f`
+import { __decorate } from '../../node_modules/.pnpm/@rollup_plugin-typescript@11.1.6_rollup@4.16.1_tslib@2.6.2_typescript@5.4.5/node_modules/tslib/tslib.es6.js';
+import { css, LitElement, html } from 'lit';
+import { customElement } from 'lit/decorators/custom-element.js';
+import { property } from 'lit/decorators/property.js';
+import { state } from 'lit/decorators/state.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { slotInitialised } from '../../scripts/utilities/slotInitialised.js';
+import { global } from '../../styles/global.js';
+import { settings } from '../../scripts/settings.js';
+import { mergeStyles } from '../../scripts/mergeStyles.js';
+
+const { prefix } = settings;
+let Footer = class Footer extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.width = 'page-width';
+        this.paddingTop = '';
+        this.paddingBottom = '';
+        this.socialsHidden = false;
+        this.centerContent = false;
+        this._slotHasChildren = false;
+        this._optionalSlotChildren = 'socials';
+    }
+    _handleSlotChange(e) {
+        this._slotHasChildren = slotInitialised(e, this._optionalSlotChildren);
+    }
+    footerClasses() {
+        const classes = {
+            'footer': true,
+            'footer--socials-hidden': this.socialsHidden,
+            'footer--center': this.centerContent,
+            'footer--socials-show': this._slotHasChildren,
+        };
+        return classes;
+    }
+    footerStyles() {
+        let styles = {};
+        if (this.paddingTop) {
+            styles = {
+                ...styles,
+                '--umg-space-footer-padding-top': 'var(--umg-space-' + this.paddingTop + ')'
+            };
+        }
+        if (this.paddingBottom) {
+            styles = {
+                ...styles,
+                '--umg-space-footer-padding-bottom': 'var(--umg-space-' + this.paddingBottom + ')'
+            };
+        }
+        return styles;
+    }
+    footerInnerStyles() {
+        let styles = {};
+        if (this.width === 'full-width') {
+            styles = {
+                ...styles,
+                '--umg-size-content-max-width': '100%',
+            };
+        }
+        return styles;
+    }
+    render() {
+        return html `
             <footer
                 part="footer"
-                class="${u(this.footerClasses())}"
-                style="${m(this.footerStyles())}"
+                class="${classMap(this.footerClasses())}"
+                style="${styleMap(this.footerStyles())}"
                 >
                 <div
                     part="footer-inner"
                     class="footer__inner"
-                    style="${m(this.footerInnerStyles())}"
+                    style="${styleMap(this.footerInnerStyles())}"
                     >
                     <slot name="links"></slot>
-                    <div class="footer__socials">
-                        <slot name="socials"></slot>
-                    </div>
+                    <slot name="socials" @slotchange=${this._handleSlotChange}></slot>
                 </div>
             </footer>
         `;
-  }
+    }
 };
-o.styles = y([
-  h,
-  c`
+Footer.styles = mergeStyles([
+    global,
+    css `
             .footer {
-                color: rgba(var(--um-color-section-text, var(--um-color-base-text, 62,62,62)), 1);
-                background-color: rgba(var(--um-color-section-bg, var(--um-color-base-bg, 246,246,246)), 1);
+                color: var(--umg-color-base-text, rgb(0,0,0));
+                background-color: var(--umg-color-base-background, rgb(240,240,240));
+                --umg-color-icon-text: var(--umg-color-base-text);
+            }
+            @supports (color: rgb(from white r g b)) {
+                .footer {
+                    color: rgb(from var(--umg-color-base-text, rgb(0,0,0)) r g b);
+                    background-color: rgb(from var(--umg-color-base-background, rgb(240,240,240)) r g b / alpha);
+                }
             }
+
             .footer__inner {
                 display: flex;
                 align-items: center;
                 justify-content: space-between;
                 margin: 0 auto;
-                max-width: var(--um-size-page-width, 75rem);
+                max-width: var(--umg-size-content-max-width, 75rem);
+            }
+
+            slot[name=links],
+            slot[name=socials] {
+                display: block;
             }
 
             @media screen and (max-width: 48rem) {
                 .footer {
-                    padding-top: var(--um-space-footer-padding-top, 3rem);
-                    padding-bottom: var(--um-space-footer-padding-bottom, 3rem);
+                    padding-top: var(--umg-space-footer-padding-top, 3rem);
+                    padding-bottom: var(--umg-space-footer-padding-bottom, 3rem);
                 }
                 .footer__inner {
                     flex-direction: column;
-                    padding-left: calc(var(--um-space-footer-padding-left, 1.5rem) * 0.5);
-                    padding-right: calc(var(--um-space-footer-padding-right, 1.5rem) * 0.5);
+                    padding-left: var(--umg-space-base-side-padding-mobile, 1rem);
+                    padding-right: var(--umg-space-base-side-padding-mobile, 1rem);
                 }
-                .footer__socials {
-                    margin-bottom: var(--um-space-32, 2rem);
+                slot[name=socials] {
                     order: -1;
+                    display: block;
+                    margin-bottom: var(--umg-space-32, 2rem);
                 }
             }
             @media screen and (min-width: 48.06rem) {
                 .footer {
-                    padding-top: var(--um-space-footer-padding-top, 3rem);
-                    padding-bottom: var(--um-space-footer-padding-bottom, 3rem);
+                    padding-top: var(--umg-space-footer-padding-top, 3rem);
+                    padding-bottom: var(--umg-space-footer-padding-bottom, 3rem);
                 }
                 .footer__inner {
-                    gap: var(--um-space-24, 1.5rem);
-                    padding-left: var(--um-space-footer-padding-left, 1.5rem);
-                    padding-right: var(--um-space-footer-padding-right, 1.5rem);
+                    gap: var(--umg-space-24, 1.5rem);
+                    padding-left: var(--umg-space-base-side-padding, 1.5rem);
+                    padding-right: var(--umg-space-base-side-padding, 1.5rem);
                 }
             }
 
-            /* Socials hidden */
-            .footer--socials-hidden .footer__socials {
+            /* Show/hide socials slot by option or when empty */
+            slot[name=socials],
+            .footer--socials-hidden slot[name=socials] {
                 display: none;
             }
+            .footer--socials-show:not(.footer--socials-hidden) slot[name=socials] {
+                display: block;
+            }
 
             /* Centered content */
             .footer--center .footer__inner {
-                gap: var(--um-space-32, 2rem);
+                gap: var(--umg-space-32, 2rem);
                 justify-content: center;
             }
-        `
+        `,
 ]);
-e([
-  s()
-], o.prototype, "width", 2);
-e([
-  s({ type: Number })
-], o.prototype, "paddingTop", 2);
-e([
-  s({ type: Number })
-], o.prototype, "paddingBottom", 2);
-e([
-  s({ type: Boolean })
-], o.prototype, "socialsHidden", 2);
-e([
-  s({ type: Boolean })
-], o.prototype, "centerContent", 2);
-e([
-  s()
-], o.prototype, "colortext", 2);
-e([
-  s()
-], o.prototype, "colorBg", 2);
-o = e([
-  g(`${x}-footer`)
-], o);
-export {
-  o as Footer
-};
+__decorate([
+    property()
+], Footer.prototype, "width", void 0);
+__decorate([
+    property({ type: Number })
+], Footer.prototype, "paddingTop", void 0);
+__decorate([
+    property({ type: Number })
+], Footer.prototype, "paddingBottom", void 0);
+__decorate([
+    property({ type: Boolean })
+], Footer.prototype, "socialsHidden", void 0);
+__decorate([
+    property({ type: Boolean })
+], Footer.prototype, "centerContent", void 0);
+__decorate([
+    state()
+], Footer.prototype, "_slotHasChildren", void 0);
+Footer = __decorate([
+    customElement(`${prefix}-footer`)
+], Footer);
+
+export { Footer };
+//# sourceMappingURL=footer.js.map

package/dist/components/footer/footer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"footer.js","sources":["../../../src/components/footer/footer.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}

package/dist/components/footer/index.d.ts

@@ -1,2 +1,3 @@
 import { Footer } from './footer';
 export { Footer };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/footer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/footer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEjC,OAAO,EAAE,MAAM,EAAE,CAAA"}

package/dist/components/grid/grid-cell.d.ts

@@ -3,3 +3,4 @@ export declare class GridCell extends LitElement {
     render(): import("lit").TemplateResult<1>;
     static styles: import("lit").CSSResultArray;
 }
+//# sourceMappingURL=grid-cell.d.ts.map

package/dist/components/grid/grid-cell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-cell.d.ts","sourceRoot":"","sources":["../../../src/components/grid/grid-cell.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAA;AAU3C,qBAEa,QAAS,SAAQ,UAAU;IAEpC,MAAM;IAWN,MAAM,CAAC,MAAM,+BAOX;CACL"}

package/dist/components/grid/grid-cell.js

@@ -1,17 +1,14 @@
-import { css as p, LitElement as f, html as c } from "lit";
-import { customElement as n } from "lit/decorators/custom-element.js";
-import { global as g } from "../../styles/global.js";
-import { settings as v } from "../../scripts/settings.js";
-import { mergeStyles as d } from "../../scripts/mergeStyles.js";
-var _ = Object.defineProperty, a = Object.getOwnPropertyDescriptor, h = (m, e, l, t) => {
-  for (var r = t > 1 ? void 0 : t ? a(e, l) : e, s = m.length - 1, i; s >= 0; s--)
-    (i = m[s]) && (r = (t ? i(e, l, r) : i(r)) || r);
-  return t && r && _(e, l, r), r;
-};
-const { prefix: u } = v;
-let o = class extends f {
-  render() {
-    return c`
+import { __decorate } from '../../node_modules/.pnpm/@rollup_plugin-typescript@11.1.6_rollup@4.16.1_tslib@2.6.2_typescript@5.4.5/node_modules/tslib/tslib.es6.js';
+import { css, LitElement, html } from 'lit';
+import { customElement } from 'lit/decorators/custom-element.js';
+import { global } from '../../styles/global.js';
+import { settings } from '../../scripts/settings.js';
+import { mergeStyles } from '../../scripts/mergeStyles.js';
+
+const { prefix } = settings;
+let GridCell = class GridCell extends LitElement {
+    render() {
+        return html `
         <div
             class="grid-item"
             part="grid-cell"
@@ -19,19 +16,19 @@ let o = class extends f {
             <slot></slot>
         </div>
     `;
-  }
+    }
 };
-o.styles = d([
-  g,
-  p`
+GridCell.styles = mergeStyles([
+    global,
+    css `
             .grid-item {
                 height: 100%;
             }
         `
 ]);
-o = h([
-  n(`${u}-grid-cell`)
-], o);
-export {
-  o as GridCell
-};
+GridCell = __decorate([
+    customElement(`${prefix}-grid-cell`)
+], GridCell);
+
+export { GridCell };
+//# sourceMappingURL=grid-cell.js.map

package/dist/components/grid/grid-cell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-cell.js","sources":["../../../src/components/grid/grid-cell.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAQA,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,CAAA;AAIpB,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU,CAAA;IAEpC,MAAM,GAAA;AACF,QAAA,OAAO,IAAI,CAAA,CAAA;;;;;;;KAOd,CAAA;KACA;;AAEM,QAAM,CAAA,MAAA,GAAG,WAAW,CAAC;IACxB,MAAM;AACN,IAAA,GAAG,CAAA,CAAA;;;;AAIF,QAAA,CAAA;AACJ,CAAA,CAAC,CAAA;AApBO,QAAQ,GAAA,UAAA,CAAA;AAFpB,IAAA,aAAa,CAAC,CAAA,EAAG,MAAM,CAAA,UAAA,CAAY,CAAC;AAExB,CAAA,EAAA,QAAQ,CAqBpB;;;;"}

package/dist/components/grid/grid.d.ts

@@ -3,6 +3,8 @@ import './grid-cell';
 export declare class Grid extends LitElement {
     columns: number;
     mobileColumns: string;
+    spacing: string | undefined;
+    mobileSpacing: string | undefined;
     gapless?: boolean | undefined;
     fill?: boolean | undefined;
     gridClasses(): any;
@@ -10,3 +12,4 @@ export declare class Grid extends LitElement {
     render(): import("lit").TemplateResult<1>;
     static styles: import("lit").CSSResultArray;
 }
+//# sourceMappingURL=grid.d.ts.map

package/dist/components/grid/grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../src/components/grid/grid.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAA;AAY3C,OAAO,aAAa,CAAA;AAIpB,qBAEa,IAAK,SAAQ,UAAU;IAGhC,OAAO,SAAI;IAGX,aAAa,SAAM;IAGnB,OAAO,EAAE,MAAM,GAAG,SAAS,CAAA;IAG3B,aAAa,EAAE,MAAM,GAAG,SAAS,CAAA;IAGjC,OAAO,CAAC,sBAAQ;IAGhB,IAAI,CAAC,sBAAQ;IAEb,WAAW;IAYX,UAAU;IA+EV,MAAM;IAYN,MAAM,CAAC,MAAM,+BAQX;CACL"}

package/dist/components/grid/grid.js

@@ -1,103 +1,155 @@
-import { css as u, LitElement as g, html as n } from "lit";
-import { customElement as c } from "lit/decorators/custom-element.js";
-import { property as l } from "lit/decorators/property.js";
-import { classMap as a } from "lit/directives/class-map.js";
-import { styleMap as f } from "lit/directives/style-map.js";
-import { global as h } from "../../styles/global.js";
-import { grid as k } from "../../styles/grid.js";
-import { settings as y } from "../../scripts/settings.js";
-import { mergeStyles as b } from "../../scripts/mergeStyles.js";
-import "./grid-cell.js";
-var w = Object.defineProperty, v = Object.getOwnPropertyDescriptor, o = (s, r, m, i) => {
-  for (var t = i > 1 ? void 0 : i ? v(r, m) : r, p = s.length - 1, d; p >= 0; p--)
-    (d = s[p]) && (t = (i ? d(r, m, t) : d(t)) || t);
-  return i && t && w(r, m, t), t;
-};
-const { prefix: C } = y;
-let e = class extends g {
-  constructor() {
-    super(...arguments), this.columns = 4, this.mobileColumns = "1", this.gapless = !1, this.fill = !1;
-  }
-  gridClasses() {
-    const s = {};
-    return s["grid--gapless"] = !!this.gapless, s["grid--fill"] = !!this.fill, s["grid--" + this.columns + "-col-tablet"] = this.columns < 3, s["grid--3-col-tablet"] = this.columns >= 3, s["grid--" + this.columns + "-col-desktop"] = !0, s["grid--" + this.mobileColumns + "-col-tablet-down"] = !0, s;
-  }
-  gridStyles() {
-    let s = {};
-    return this.columns === 6 && (s = {
-      ...s,
-      "--um-grid-desktop-columns-width": "16.66%",
-      "--um-grid-desktop-columns": "6",
-      "--um-grid-desktop-gaps": "5",
-      "--um-grid-desktop-peek": "1.5"
-    }), this.columns === 5 && (s = {
-      ...s,
-      "--um-grid-desktop-columns-width": "20%",
-      "--um-grid-desktop-columns": "5",
-      "--um-grid-desktop-gaps": "4",
-      "--um-grid-desktop-peek": "2"
-    }), this.columns === 4 && (s = {
-      ...s,
-      "--um-grid-desktop-columns-width": "25%",
-      "--um-grid-desktop-columns": "4",
-      "--um-grid-desktop-gaps": "3",
-      "--um-grid-desktop-peek": "2.5"
-    }), this.columns === 3 && (s = {
-      ...s,
-      "--um-grid-desktop-columns-width": "33.33%",
-      "--um-grid-desktop-columns": "3",
-      "--um-grid-desktop-gaps": "2",
-      "--um-grid-desktop-peek": "3"
-    }), this.columns === 2 && (s = {
-      ...s,
-      "--um-grid-desktop-columns-width": "50%",
-      "--um-grid-desktop-columns": "2",
-      "--um-grid-desktop-gaps": "1",
-      "--um-grid-desktop-peek": "4"
-    }), this.columns === 1 && (s = {
-      ...s,
-      "--um-grid-desktop-columns-width": "100%",
-      "--um-grid-desktop-columns": "1",
-      "--um-grid-desktop-gaps": "0",
-      "--um-grid-desktop-peek": "9"
-    }), s;
-  }
-  render() {
-    return n`
+import { __decorate } from '../../node_modules/.pnpm/@rollup_plugin-typescript@11.1.6_rollup@4.16.1_tslib@2.6.2_typescript@5.4.5/node_modules/tslib/tslib.es6.js';
+import { css, LitElement, html } from 'lit';
+import { customElement } from 'lit/decorators/custom-element.js';
+import { property } from 'lit/decorators/property.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { global } from '../../styles/global.js';
+import { grid } from '../../styles/grid.js';
+import { settings } from '../../scripts/settings.js';
+import { mergeStyles } from '../../scripts/mergeStyles.js';
+import './grid-cell.js';
+
+const { prefix } = settings;
+let Grid = class Grid extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.columns = 4;
+        this.mobileColumns = '1';
+        this.gapless = false;
+        this.fill = false;
+    }
+    gridClasses() {
+        const classes = {};
+        classes['grid--gapless'] = this.gapless ? true : false;
+        classes['grid--fill'] = this.fill ? true : false;
+        classes['grid--' + this.columns + '-col-tablet'] = this.columns < 3 ? true : false;
+        classes['grid--3-col-tablet'] = this.columns >= 3 ? true : false;
+        classes['grid--' + this.columns + '-col-desktop'] = true;
+        classes['grid--' + this.mobileColumns + '-col-tablet-down'] = true;
+        return classes;
+    }
+    gridStyles() {
+        let styles = {};
+        if (this.columns === 6) {
+            styles = {
+                ...styles,
+                '--umg-grid-desktop-columns-width': '16.66%',
+                '--umg-grid-desktop-columns': '6',
+                '--umg-grid-desktop-gaps': '5',
+                '--umg-grid-desktop-peek': '1.5',
+            };
+        }
+        if (this.columns === 5) {
+            styles = {
+                ...styles,
+                '--umg-grid-desktop-columns-width': '20%',
+                '--umg-grid-desktop-columns': '5',
+                '--umg-grid-desktop-gaps': '4',
+                '--umg-grid-desktop-peek': '2',
+            };
+        }
+        if (this.columns === 4) {
+            styles = {
+                ...styles,
+                '--umg-grid-desktop-columns-width': '25%',
+                '--umg-grid-desktop-columns': '4',
+                '--umg-grid-desktop-gaps': '3',
+                '--umg-grid-desktop-peek': '2.5',
+            };
+        }
+        if (this.columns === 3) {
+            styles = {
+                ...styles,
+                '--umg-grid-desktop-columns-width': '33.33%',
+                '--umg-grid-desktop-columns': '3',
+                '--umg-grid-desktop-gaps': '2',
+                '--umg-grid-desktop-peek': '3',
+            };
+        }
+        if (this.columns === 2) {
+            styles = {
+                ...styles,
+                '--umg-grid-desktop-columns-width': '50%',
+                '--umg-grid-desktop-columns': '2',
+                '--umg-grid-desktop-gaps': '1',
+                '--umg-grid-desktop-peek': '4',
+            };
+        }
+        if (this.columns === 1) {
+            styles = {
+                ...styles,
+                '--umg-grid-desktop-columns-width': '100%',
+                '--umg-grid-desktop-columns': '1',
+                '--umg-grid-desktop-gaps': '0',
+                '--umg-grid-desktop-peek': '9',
+            };
+        }
+        if (this.spacing) {
+            styles = {
+                ...styles,
+                '--umg-space-grid-horizontal-desktop': Number(this.spacing) / 16 + 'rem',
+                '--umg-space-grid-vertical-desktop': Number(this.spacing) / 16 + 'rem',
+            };
+        }
+        if (this.mobileSpacing) {
+            styles = {
+                ...styles,
+                '--umg-space-grid-horizontal-mobile': Number(this.mobileSpacing) / 16 + 'rem',
+                '--umg-space-grid-vertical-mobile': Number(this.mobileSpacing) / 16 + 'rem',
+            };
+        }
+        else if (this.spacing) {
+            styles = {
+                ...styles,
+                '--umg-space-grid-horizontal-mobile': Number(this.spacing) / 16 + 'rem',
+                '--umg-space-grid-vertical-mobile': Number(this.spacing) / 16 + 'rem',
+            };
+        }
+        return styles;
+    }
+    render() {
+        return html `
         <div
-            class="grid${a(this.gridClasses())}"
-            style="${f(this.gridStyles())}"
+            class="grid${classMap(this.gridClasses())}"
+            style="${styleMap(this.gridStyles())}"
             part="grid"
             >
             <slot></slot>
         </div>
     `;
-  }
+    }
 };
-e.styles = b([
-  h,
-  u`
+Grid.styles = mergeStyles([
+    global,
+    css `
             :host {
                 display: block;
             }
         `,
-  k
+    grid,
 ]);
-o([
-  l({ type: Number })
-], e.prototype, "columns", 2);
-o([
-  l()
-], e.prototype, "mobileColumns", 2);
-o([
-  l({ type: Boolean })
-], e.prototype, "gapless", 2);
-o([
-  l({ type: Boolean })
-], e.prototype, "fill", 2);
-e = o([
-  c(`${C}-grid`)
-], e);
-export {
-  e as Grid
-};
+__decorate([
+    property({ type: Number })
+], Grid.prototype, "columns", void 0);
+__decorate([
+    property()
+], Grid.prototype, "mobileColumns", void 0);
+__decorate([
+    property()
+], Grid.prototype, "spacing", void 0);
+__decorate([
+    property()
+], Grid.prototype, "mobileSpacing", void 0);
+__decorate([
+    property({ type: Boolean })
+], Grid.prototype, "gapless", void 0);
+__decorate([
+    property({ type: Boolean })
+], Grid.prototype, "fill", void 0);
+Grid = __decorate([
+    customElement(`${prefix}-grid`)
+], Grid);
+
+export { Grid };
+//# sourceMappingURL=grid.js.map