@universal-material/web 3.0.15 → 3.0.17

package/card/card-content.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"card-content.styles.d.ts","sourceRoot":"","sources":["../../src/card/card-content.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAYlB,CAAC"}
+{"version":3,"file":"card-content.styles.d.ts","sourceRoot":"","sources":["../../src/card/card-content.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAgBlB,CAAC"}

package/card/card-content.styles.js

@@ -11,5 +11,9 @@ export const styles = css `
   :host([has-content]) {
     padding: var(--u-card-padding, 16px);
   }
+
+  slot {
+    border-radius: inherit;
+  }
 `;
 //# sourceMappingURL=card-content.styles.js.map

package/card/card-content.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"card-content.styles.js","sourceRoot":"","sources":["../../src/card/card-content.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;CAYzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    display: block;\n  }\n\n  :host(:has(slot > *)) {\n    display: none;\n  }\n\n  :host([has-content]) {\n    padding: var(--u-card-padding, 16px);\n  }\n`;\n"]}
+{"version":3,"file":"card-content.styles.js","sourceRoot":"","sources":["../../src/card/card-content.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;CAgBzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    display: block;\n  }\n\n  :host(:has(slot > *)) {\n    display: none;\n  }\n\n  :host([has-content]) {\n    padding: var(--u-card-padding, 16px);\n  }\n\n  slot {\n    border-radius: inherit;\n  }\n`;\n"]}

package/card/card.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"card.styles.d.ts","sourceRoot":"","sources":["../../src/card/card.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAyBlB,CAAC"}
+{"version":3,"file":"card.styles.d.ts","sourceRoot":"","sources":["../../src/card/card.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA6BlB,CAAC"}

package/card/card.styles.js

@@ -24,5 +24,9 @@ export const styles = css `
   :host([variant=outlined]) {
     border: var(--u-outlined-card-outline-width, 1px) solid var(--u-outlined-card-outline-color, var(--u-color-outline-variant, rgb(202, 196, 208)));
   }
+
+  slot {
+    border-radius: inherit;
+  }
 `;
 //# sourceMappingURL=card.styles.js.map

package/card/card.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.styles.js","sourceRoot":"","sources":["../../src/card/card.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;CAyBzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    display: block;\n    position: relative;\n    border-radius: var(--u-card-shape-corner, var(--u-shape-corner-medium, 12px));\n  }\n\n  :host(:not(:first-child)) {\n    margin-top: 8px;\n  }\n\n  :host([variant=elevated]) {\n    background-color: var(--u-color-surface-container-low, rgb(247, 242, 250));\n  }\n  :host([variant=elevated]) u-elevation {\n    --u-elevation-level: var(--u-elevated-card-elevation-level, 1);\n  }\n\n  :host([variant=filled]) {\n    background-color: var(--u-color-surface-container-highest, rgb(230, 224, 233));\n  }\n\n  :host([variant=outlined]) {\n    border: var(--u-outlined-card-outline-width, 1px) solid var(--u-outlined-card-outline-color, var(--u-color-outline-variant, rgb(202, 196, 208)));\n  }\n`;\n"]}
+{"version":3,"file":"card.styles.js","sourceRoot":"","sources":["../../src/card/card.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    display: block;\n    position: relative;\n    border-radius: var(--u-card-shape-corner, var(--u-shape-corner-medium, 12px));\n  }\n\n  :host(:not(:first-child)) {\n    margin-top: 8px;\n  }\n\n  :host([variant=elevated]) {\n    background-color: var(--u-color-surface-container-low, rgb(247, 242, 250));\n  }\n  :host([variant=elevated]) u-elevation {\n    --u-elevation-level: var(--u-elevated-card-elevation-level, 1);\n  }\n\n  :host([variant=filled]) {\n    background-color: var(--u-color-surface-container-highest, rgb(230, 224, 233));\n  }\n\n  :host([variant=outlined]) {\n    border: var(--u-outlined-card-outline-width, 1px) solid var(--u-outlined-card-outline-color, var(--u-color-outline-variant, rgb(202, 196, 208)));\n  }\n\n  slot {\n    border-radius: inherit;\n  }\n`;\n"]}

package/container/container.d.ts

@@ -1,8 +1,7 @@
-import { HTMLTemplateResult, LitElement } from 'lit';
-export type UmSpacingSizes = 'none' | 'small' | 'medium ' | 'large' | 'extra-large';
-export declare class UmContainer extends LitElement {
-    static styles: import("lit").CSSResult;
-    margin: UmSpacingSizes | undefined;
+import { HTMLTemplateResult } from 'lit';
+import { GridBase } from './grid-base.js';
+export declare class UmContainer extends GridBase {
+    static styles: import("lit").CSSResult[];
     render(): HTMLTemplateResult;
 }
 declare global {

package/container/container.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../src/container/container.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAK3D,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,aAAa,CAAC;AAEpF,qBACa,WAAY,SAAQ,UAAU;IAEzC,OAAgB,MAAM,0BAAU;IAEL,MAAM,EAAE,cAAc,GAAG,SAAS,CAAC;IAErD,MAAM,IAAI,kBAAkB;CAGtC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,WAAW,CAAC;KAC5B;CACF"}
+{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../src/container/container.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,MAAM,KAAK,CAAC;AAK/C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAG1C,qBACa,WAAY,SAAQ,QAAQ;IAEvC,OAAgB,MAAM,4BAIpB;IAEO,MAAM,IAAI,kBAAkB;CAGtC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,WAAW,CAAC;KAC5B;CACF"}

package/container/container.js

@@ -4,18 +4,22 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { styles as baseStyles } from '../shared/base.styles.js';
 import { styles } from './container.styles.js';
-let UmContainer = class UmContainer extends LitElement {
+import { GridBase } from './grid-base.js';
+import { styles as gridBaseStyles } from './grid-base.styles.js';
+let UmContainer = class UmContainer extends GridBase {
     render() {
         return html `<slot></slot>`;
     }
 };
-UmContainer.styles = styles;
-__decorate([
-    property({ reflect: true })
-], UmContainer.prototype, "margin", void 0);
+UmContainer.styles = [
+    baseStyles,
+    gridBaseStyles,
+    styles
+];
 UmContainer = __decorate([
     customElement('u-container')
 ], UmContainer);

package/container/container.js.map

@@ -1 +1 @@
-{"version":3,"file":"container.js","sourceRoot":"","sources":["../../src/container/container.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAsB,UAAU,EAAE,MAAM,KAAK,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAKxC,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAMhC,MAAM;QACb,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AANe,kBAAM,GAAG,MAAM,AAAT,CAAU;AAEL;IAA1B,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;2CAAoC;AAJnD,WAAW;IADvB,aAAa,CAAC,aAAa,CAAC;GAChB,WAAW,CASvB","sourcesContent":["import { html, HTMLTemplateResult, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { styles } from './container.styles.js';\n\nexport type UmSpacingSizes = 'none' | 'small' | 'medium ' | 'large' | 'extra-large';\n\n@customElement('u-container')\nexport class UmContainer extends LitElement {\n\n  static override styles = styles;\n\n  @property({reflect: true}) margin: UmSpacingSizes | undefined;\n\n  override render(): HTMLTemplateResult {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-container': UmContainer;\n  }\n}\n"]}
+{"version":3,"file":"container.js","sourceRoot":"","sources":["../../src/container/container.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAsB,MAAM,KAAK,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAG1D,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,QAAQ;IAQ9B,MAAM;QACb,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AARe,kBAAM,GAAG;IACvB,UAAU;IACV,cAAc;IACd,MAAM;CACP,AAJqB,CAIpB;AANS,WAAW;IADvB,aAAa,CAAC,aAAa,CAAC;GAChB,WAAW,CAWvB","sourcesContent":["import { html, HTMLTemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators.js';\n\nimport { styles as baseStyles } from '../shared/base.styles.js';\nimport { styles } from './container.styles.js';\nimport { GridBase } from './grid-base.js';\nimport { styles as gridBaseStyles } from './grid-base.styles.js';\n\n@customElement('u-container')\nexport class UmContainer extends GridBase {\n\n  static override styles = [\n    baseStyles,\n    gridBaseStyles,\n    styles\n  ];\n\n  override render(): HTMLTemplateResult {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-container': UmContainer;\n  }\n}\n"]}

package/container/container.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"container.styles.d.ts","sourceRoot":"","sources":["../../src/container/container.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAwClB,CAAC"}
+{"version":3,"file":"container.styles.d.ts","sourceRoot":"","sources":["../../src/container/container.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBASlB,CAAC"}

package/container/container.styles.js

@@ -1,38 +1,7 @@
 import { css } from 'lit';
 export const styles = css `
-  :host {
-    --_grid-spacing-small: var(--u-spacing-sm, 8px);
-    --_grid-spacing-medium: var(--u-spacing-md, 16px);
-    --_grid-spacing-large: var(--u-spacing-lg, 24px);
-    --_grid-spacing-extra-large: var(--u-spacing-xl, 40px);
-  }
-
-  :host([margin=none]) {
-    --_container-margin: 0;
-  }
-
-  :host([margin=small]) {
-    --_container-margin: var(--u-container-margin, var(--_grid-spacing-small));
-  }
-
-  :host([margin=medium]) {
-    --_container-margin: var(--u-container-margin, var(--_grid-spacing-medium));
-  }
-
-  :host([margin=large]) {
-    --_container-margin: var(--u-container-margin, var(--_grid-spacing-large));
-  }
-
-  :host([margin=extra-large]) {
-    --_container-margin: var(--u-container-margin, var(--_grid-spacing-extra-large));
-  }
-
   :host {
     display: block;
-    width: 100%;
-    max-width: var(--u-container-max-width, 992px);
-    margin-inline: auto;
-    padding: var(--_container-margin, var(--_grid-spacing-medium));
   }
 
   :host::after {

package/container/container.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"container.styles.js","sourceRoot":"","sources":["../../src/container/container.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    --_grid-spacing-small: var(--u-spacing-sm, 8px);\n    --_grid-spacing-medium: var(--u-spacing-md, 16px);\n    --_grid-spacing-large: var(--u-spacing-lg, 24px);\n    --_grid-spacing-extra-large: var(--u-spacing-xl, 40px);\n  }\n\n  :host([margin=none]) {\n    --_container-margin: 0;\n  }\n\n  :host([margin=small]) {\n    --_container-margin: var(--u-container-margin, var(--_grid-spacing-small));\n  }\n\n  :host([margin=medium]) {\n    --_container-margin: var(--u-container-margin, var(--_grid-spacing-medium));\n  }\n\n  :host([margin=large]) {\n    --_container-margin: var(--u-container-margin, var(--_grid-spacing-large));\n  }\n\n  :host([margin=extra-large]) {\n    --_container-margin: var(--u-container-margin, var(--_grid-spacing-extra-large));\n  }\n\n  :host {\n    display: block;\n    width: 100%;\n    max-width: var(--u-container-max-width, 992px);\n    margin-inline: auto;\n    padding: var(--_container-margin, var(--_grid-spacing-medium));\n  }\n\n  :host::after {\n    content: \"\";\n    display: block;\n  }\n`;\n"]}
+{"version":3,"file":"container.styles.js","sourceRoot":"","sources":["../../src/container/container.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;CASzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    display: block;\n  }\n\n  :host::after {\n    content: \"\";\n    display: block;\n  }\n`;\n"]}

package/container/grid-base.d.ts

@@ -0,0 +1,10 @@
+import { LitElement } from 'lit';
+export type UmSpacingSizes = 'none' | 'small' | 'medium ' | 'large' | 'extra-large';
+export declare abstract class GridBase extends LitElement {
+    margin: UmSpacingSizes | undefined;
+    marginSmall: UmSpacingSizes | undefined;
+    marginMedium: UmSpacingSizes | undefined;
+    marginLarge: UmSpacingSizes | undefined;
+    marginExtraLarge: UmSpacingSizes | undefined;
+}
+//# sourceMappingURL=grid-base.d.ts.map

package/container/grid-base.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-base.d.ts","sourceRoot":"","sources":["../../src/container/grid-base.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAGjC,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,aAAa,CAAC;AAEpF,8BAAsB,QAAS,SAAQ,UAAU;IAEpB,MAAM,EAAE,cAAc,GAAG,SAAS,CAAC;IACX,WAAW,EAAE,cAAc,GAAG,SAAS,CAAC;IACxC,YAAY,EAAE,cAAc,GAAG,SAAS,CAAC;IACzC,WAAW,EAAE,cAAc,GAAG,SAAS,CAAC;IACxC,gBAAgB,EAAE,cAAc,GAAG,SAAS,CAAC;CACjG"}

package/container/grid-base.js

@@ -0,0 +1,26 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+export class GridBase extends LitElement {
+}
+__decorate([
+    property({ reflect: true })
+], GridBase.prototype, "margin", void 0);
+__decorate([
+    property({ attribute: 'margin-sm', reflect: true })
+], GridBase.prototype, "marginSmall", void 0);
+__decorate([
+    property({ attribute: 'margin-md', reflect: true })
+], GridBase.prototype, "marginMedium", void 0);
+__decorate([
+    property({ attribute: 'margin-lg', reflect: true })
+], GridBase.prototype, "marginLarge", void 0);
+__decorate([
+    property({ attribute: 'margin-xl', reflect: true })
+], GridBase.prototype, "marginExtraLarge", void 0);
+//# sourceMappingURL=grid-base.js.map

package/container/grid-base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-base.js","sourceRoot":"","sources":["../../src/container/grid-base.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAI7C,MAAM,OAAgB,QAAS,SAAQ,UAAU;CAOhD;AAL4B;IAA1B,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;wCAAoC;AACX;IAAlD,QAAQ,CAAC,EAAC,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;6CAAyC;AACxC;IAAlD,QAAQ,CAAC,EAAC,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;8CAA0C;AACzC;IAAlD,QAAQ,CAAC,EAAC,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;6CAAyC;AACxC;IAAlD,QAAQ,CAAC,EAAC,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;kDAA8C","sourcesContent":["import { LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nexport type UmSpacingSizes = 'none' | 'small' | 'medium ' | 'large' | 'extra-large';\n\nexport abstract class GridBase extends LitElement {\n\n  @property({reflect: true}) margin: UmSpacingSizes | undefined;\n  @property({attribute: 'margin-sm', reflect: true}) marginSmall: UmSpacingSizes | undefined;\n  @property({attribute: 'margin-md', reflect: true}) marginMedium: UmSpacingSizes | undefined;\n  @property({attribute: 'margin-lg', reflect: true}) marginLarge: UmSpacingSizes | undefined;\n  @property({attribute: 'margin-xl', reflect: true}) marginExtraLarge: UmSpacingSizes | undefined;\n}\n"]}

package/container/grid-base.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=grid-base.styles.d.ts.map

package/container/grid-base.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-base.styles.d.ts","sourceRoot":"","sources":["../../src/container/grid-base.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA4GlB,CAAC"}

package/container/grid-base.styles.js

@@ -0,0 +1,111 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    --_grid-spacing-sm: var(--u-spacing-sm, 8px);
+    --_grid-spacing-md: var(--u-spacing-md, 16px);
+    --_grid-spacing-lg: var(--u-spacing-lg, 24px);
+    --_grid-spacing-xl: var(--u-spacing-xl, 40px);
+    --_grid-spacing-default: var(--u-grid-spacing-default, var(--_grid-spacing-md));
+    --_grid-margin: var(--u-grid-margin-default, var(--_grid-spacing-default));
+  }
+
+  :host([margin=none]) {
+    --_grid-margin: 0;
+  }
+
+  :host([margin=small]) {
+    --_grid-margin: var(--u-grid-margin, var(--_grid-spacing-sm));
+  }
+
+  :host([margin=medium]) {
+    --_grid-margin: var(--u-grid-margin, var(--_grid-spacing-md));
+  }
+
+  :host([margin=large]) {
+    --_grid-margin: var(--u-grid-margin, var(--_grid-spacing-lg));
+  }
+
+  :host([margin=extra-large]) {
+    --_grid-margin: var(--u-grid-margin, var(--_grid-spacing-xl));
+  }
+
+  @media (min-width: 600px) {
+    :host([margin-sm=none]) {
+      --_grid-margin: 0;
+    }
+    :host([margin-sm=small]) {
+      --_grid-margin: var(--u-grid-margin, var(--_grid-spacing-sm));
+    }
+    :host([margin-sm=medium]) {
+      --_grid-margin: var(--u-grid-margin, var(--_grid-spacing-md));
+    }
+    :host([margin-sm=large]) {
+      --_grid-margin: var(--u-grid-margin, var(--_grid-spacing-lg));
+    }
+    :host([margin-sm=extra-large]) {
+      --_grid-margin: var(--u-grid-margin, var(--_grid-spacing-xl));
+    }
+  }
+  @media (min-width: 840px) {
+    :host([margin-md=none]) {
+      --_grid-margin: 0;
+    }
+    :host([margin-md=small]) {
+      --_grid-margin: var(--u-grid-margin, var(--_grid-spacing-sm));
+    }
+    :host([margin-md=medium]) {
+      --_grid-margin: var(--u-grid-margin, var(--_grid-spacing-md));
+    }
+    :host([margin-md=large]) {
+      --_grid-margin: var(--u-grid-margin, var(--_grid-spacing-lg));
+    }
+    :host([margin-md=extra-large]) {
+      --_grid-margin: var(--u-grid-margin, var(--_grid-spacing-xl));
+    }
+  }
+  @media (min-width: 1200px) {
+    :host([margin-lg=none]) {
+      --_grid-margin: 0;
+    }
+    :host([margin-lg=small]) {
+      --_grid-margin: var(--u-grid-margin, var(--_grid-spacing-sm));
+    }
+    :host([margin-lg=medium]) {
+      --_grid-margin: var(--u-grid-margin, var(--_grid-spacing-md));
+    }
+    :host([margin-lg=large]) {
+      --_grid-margin: var(--u-grid-margin, var(--_grid-spacing-lg));
+    }
+    :host([margin-lg=extra-large]) {
+      --_grid-margin: var(--u-grid-margin, var(--_grid-spacing-xl));
+    }
+  }
+  @media (min-width: 1600px) {
+    :host([margin-xl=none]) {
+      --_grid-margin: 0;
+    }
+    :host([margin-xl=small]) {
+      --_grid-margin: var(--u-grid-margin, var(--_grid-spacing-sm));
+    }
+    :host([margin-xl=medium]) {
+      --_grid-margin: var(--u-grid-margin, var(--_grid-spacing-md));
+    }
+    :host([margin-xl=large]) {
+      --_grid-margin: var(--u-grid-margin, var(--_grid-spacing-lg));
+    }
+    :host([margin-xl=extra-large]) {
+      --_grid-margin: var(--u-grid-margin, var(--_grid-spacing-xl));
+    }
+  }
+  :host {
+    width: 100%;
+    max-width: var(--u-container-max-width, 992px);
+    margin-inline: auto;
+    padding: var(--u-grid-margin, var(--_grid-margin));
+  }
+  :host:host::after {
+    content: "";
+    display: block;
+  }
+`;
+//# sourceMappingURL=grid-base.styles.js.map

package/container/grid-base.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-base.styles.js","sourceRoot":"","sources":["../../src/container/grid-base.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4GzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    --_grid-spacing-sm: var(--u-spacing-sm, 8px);\n    --_grid-spacing-md: var(--u-spacing-md, 16px);\n    --_grid-spacing-lg: var(--u-spacing-lg, 24px);\n    --_grid-spacing-xl: var(--u-spacing-xl, 40px);\n    --_grid-spacing-default: var(--u-grid-spacing-default, var(--_grid-spacing-md));\n    --_grid-margin: var(--u-grid-margin-default, var(--_grid-spacing-default));\n  }\n\n  :host([margin=none]) {\n    --_grid-margin: 0;\n  }\n\n  :host([margin=small]) {\n    --_grid-margin: var(--u-grid-margin, var(--_grid-spacing-sm));\n  }\n\n  :host([margin=medium]) {\n    --_grid-margin: var(--u-grid-margin, var(--_grid-spacing-md));\n  }\n\n  :host([margin=large]) {\n    --_grid-margin: var(--u-grid-margin, var(--_grid-spacing-lg));\n  }\n\n  :host([margin=extra-large]) {\n    --_grid-margin: var(--u-grid-margin, var(--_grid-spacing-xl));\n  }\n\n  @media (min-width: 600px) {\n    :host([margin-sm=none]) {\n      --_grid-margin: 0;\n    }\n    :host([margin-sm=small]) {\n      --_grid-margin: var(--u-grid-margin, var(--_grid-spacing-sm));\n    }\n    :host([margin-sm=medium]) {\n      --_grid-margin: var(--u-grid-margin, var(--_grid-spacing-md));\n    }\n    :host([margin-sm=large]) {\n      --_grid-margin: var(--u-grid-margin, var(--_grid-spacing-lg));\n    }\n    :host([margin-sm=extra-large]) {\n      --_grid-margin: var(--u-grid-margin, var(--_grid-spacing-xl));\n    }\n  }\n  @media (min-width: 840px) {\n    :host([margin-md=none]) {\n      --_grid-margin: 0;\n    }\n    :host([margin-md=small]) {\n      --_grid-margin: var(--u-grid-margin, var(--_grid-spacing-sm));\n    }\n    :host([margin-md=medium]) {\n      --_grid-margin: var(--u-grid-margin, var(--_grid-spacing-md));\n    }\n    :host([margin-md=large]) {\n      --_grid-margin: var(--u-grid-margin, var(--_grid-spacing-lg));\n    }\n    :host([margin-md=extra-large]) {\n      --_grid-margin: var(--u-grid-margin, var(--_grid-spacing-xl));\n    }\n  }\n  @media (min-width: 1200px) {\n    :host([margin-lg=none]) {\n      --_grid-margin: 0;\n    }\n    :host([margin-lg=small]) {\n      --_grid-margin: var(--u-grid-margin, var(--_grid-spacing-sm));\n    }\n    :host([margin-lg=medium]) {\n      --_grid-margin: var(--u-grid-margin, var(--_grid-spacing-md));\n    }\n    :host([margin-lg=large]) {\n      --_grid-margin: var(--u-grid-margin, var(--_grid-spacing-lg));\n    }\n    :host([margin-lg=extra-large]) {\n      --_grid-margin: var(--u-grid-margin, var(--_grid-spacing-xl));\n    }\n  }\n  @media (min-width: 1600px) {\n    :host([margin-xl=none]) {\n      --_grid-margin: 0;\n    }\n    :host([margin-xl=small]) {\n      --_grid-margin: var(--u-grid-margin, var(--_grid-spacing-sm));\n    }\n    :host([margin-xl=medium]) {\n      --_grid-margin: var(--u-grid-margin, var(--_grid-spacing-md));\n    }\n    :host([margin-xl=large]) {\n      --_grid-margin: var(--u-grid-margin, var(--_grid-spacing-lg));\n    }\n    :host([margin-xl=extra-large]) {\n      --_grid-margin: var(--u-grid-margin, var(--_grid-spacing-xl));\n    }\n  }\n  :host {\n    width: 100%;\n    max-width: var(--u-container-max-width, 992px);\n    margin-inline: auto;\n    padding: var(--u-grid-margin, var(--_grid-margin));\n  }\n  :host:host::after {\n    content: \"\";\n    display: block;\n  }\n`;\n"]}

package/container/grid.d.ts

@@ -0,0 +1,32 @@
+import { HTMLTemplateResult } from 'lit';
+import './container.js';
+import { GridBase, UmSpacingSizes } from './grid-base.js';
+export declare class UmGrid extends GridBase {
+    static styles: import("lit").CSSResult[];
+    gutter: UmSpacingSizes | undefined;
+    gutterSmall: UmSpacingSizes | undefined;
+    gutterMedium: UmSpacingSizes | undefined;
+    gutterLarge: UmSpacingSizes | undefined;
+    gutterExtraLarge: UmSpacingSizes | undefined;
+    cols: number;
+    colsSmall: number | undefined;
+    colsMedium: number | undefined;
+    colsLarge: number | undefined;
+    colsExtraLarge: number | undefined;
+    templateColumns: number | undefined;
+    templateColumnsSmall: number | undefined;
+    templateColumnsMedium: number | undefined;
+    templateColumnsLarge: number | undefined;
+    templateColumnsExtraLarge: number | undefined;
+    render(): HTMLTemplateResult;
+    attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
+    private setColumnsVariable;
+    private setTemplateColumnsVariable;
+    private setProperty;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-grid': UmGrid;
+    }
+}
+//# sourceMappingURL=grid.d.ts.map

package/container/grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../src/container/grid.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,MAAM,KAAK,CAAC;AAG/C,OAAO,gBAAgB,CAAC;AAExB,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAI1D,qBACa,MAAO,SAAQ,QAAQ;IAElC,OAAgB,MAAM,4BAIpB;IAEyB,MAAM,EAAE,cAAc,GAAG,SAAS,CAAC;IACX,WAAW,EAAE,cAAc,GAAG,SAAS,CAAC;IACxC,YAAY,EAAE,cAAc,GAAG,SAAS,CAAC;IACzC,WAAW,EAAE,cAAc,GAAG,SAAS,CAAC;IACxC,gBAAgB,EAAE,cAAc,GAAG,SAAS,CAAC;IAErE,IAAI,SAAK;IACa,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,cAAc,EAAE,MAAM,GAAG,SAAS,CAAC;IAE1B,eAAe,EAAE,MAAM,GAAG,SAAS,CAAa;IAC7C,oBAAoB,EAAE,MAAM,GAAG,SAAS,CAAC;IACzC,qBAAqB,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1C,oBAAoB,EAAE,MAAM,GAAG,SAAS,CAAC;IACzC,yBAAyB,EAAE,MAAM,GAAG,SAAS,CAAC;IAElG,MAAM,IAAI,kBAAkB;IAI5B,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI;IAczF,OAAO,CAAC,kBAAkB;IAS1B,OAAO,CAAC,0BAA0B;IAMlC,OAAO,CAAC,WAAW;CAQpB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,QAAQ,EAAE,MAAM,CAAC;KAClB;CACF"}

package/container/grid.js

@@ -0,0 +1,106 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import './container.js';
+import { styles as baseStyles } from '../shared/base.styles';
+import { GridBase } from './grid-base.js';
+import { styles as gridBaseStyles } from './grid-base.styles.js';
+import { styles } from './grid.styles.js';
+let UmGrid = class UmGrid extends GridBase {
+    constructor() {
+        super(...arguments);
+        this.cols = 1;
+        this.templateColumns = undefined;
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+    attributeChangedCallback(name, _old, value) {
+        super.attributeChangedCallback(name, _old, value);
+        if (name.startsWith('cols')) {
+            this.setColumnsVariable(name, value);
+            return;
+        }
+        if (name.startsWith('template-columns')) {
+            this.setTemplateColumnsVariable(name, value);
+            return;
+        }
+    }
+    setColumnsVariable(name, value) {
+        const propertyName = `--_${name}`;
+        this.setProperty(propertyName, value
+            ? `repeat(${value}, minmax(0, 1fr))`
+            : null);
+    }
+    setTemplateColumnsVariable(name, value) {
+        const propertyName = `--_${name}`;
+        this.setProperty(propertyName, value);
+    }
+    setProperty(name, value) {
+        if (value) {
+            this.style.setProperty(name, value);
+            return;
+        }
+        this.style.removeProperty(name);
+    }
+};
+UmGrid.styles = [
+    baseStyles,
+    gridBaseStyles,
+    styles
+];
+__decorate([
+    property({ reflect: true })
+], UmGrid.prototype, "gutter", void 0);
+__decorate([
+    property({ attribute: 'gutter-sm', reflect: true })
+], UmGrid.prototype, "gutterSmall", void 0);
+__decorate([
+    property({ attribute: 'gutter-md', reflect: true })
+], UmGrid.prototype, "gutterMedium", void 0);
+__decorate([
+    property({ attribute: 'gutter-lg', reflect: true })
+], UmGrid.prototype, "gutterLarge", void 0);
+__decorate([
+    property({ attribute: 'gutter-xl', reflect: true })
+], UmGrid.prototype, "gutterExtraLarge", void 0);
+__decorate([
+    property({ reflect: true })
+], UmGrid.prototype, "cols", void 0);
+__decorate([
+    property({ attribute: 'cols-sm', reflect: true })
+], UmGrid.prototype, "colsSmall", void 0);
+__decorate([
+    property({ attribute: 'cols-md', reflect: true })
+], UmGrid.prototype, "colsMedium", void 0);
+__decorate([
+    property({ attribute: 'cols-lg', reflect: true })
+], UmGrid.prototype, "colsLarge", void 0);
+__decorate([
+    property({ attribute: 'cols-xl', reflect: true })
+], UmGrid.prototype, "colsExtraLarge", void 0);
+__decorate([
+    property({ attribute: 'template-columns', reflect: true })
+], UmGrid.prototype, "templateColumns", void 0);
+__decorate([
+    property({ attribute: 'template-columns-sm', reflect: true })
+], UmGrid.prototype, "templateColumnsSmall", void 0);
+__decorate([
+    property({ attribute: 'template-columns-md', reflect: true })
+], UmGrid.prototype, "templateColumnsMedium", void 0);
+__decorate([
+    property({ attribute: 'template-columns-lg', reflect: true })
+], UmGrid.prototype, "templateColumnsLarge", void 0);
+__decorate([
+    property({ attribute: 'template-columns-xl', reflect: true })
+], UmGrid.prototype, "templateColumnsExtraLarge", void 0);
+UmGrid = __decorate([
+    customElement('u-grid')
+], UmGrid);
+export { UmGrid };
+//# sourceMappingURL=grid.js.map

package/container/grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.js","sourceRoot":"","sources":["../../src/container/grid.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, HTMLTemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport './container.js';\nimport { styles as baseStyles } from '../shared/base.styles';\nimport { GridBase, UmSpacingSizes } from './grid-base.js';\nimport { styles as gridBaseStyles } from './grid-base.styles.js';\nimport { styles } from './grid.styles.js';\n\n@customElement('u-grid')\nexport class UmGrid extends GridBase {\n\n  static override styles = [\n    baseStyles,\n    gridBaseStyles,\n    styles\n  ];\n\n  @property({reflect: true}) gutter: UmSpacingSizes | undefined;\n  @property({attribute: 'gutter-sm', reflect: true}) gutterSmall: UmSpacingSizes | undefined;\n  @property({attribute: 'gutter-md', reflect: true}) gutterMedium: UmSpacingSizes | undefined;\n  @property({attribute: 'gutter-lg', reflect: true}) gutterLarge: UmSpacingSizes | undefined;\n  @property({attribute: 'gutter-xl', reflect: true}) gutterExtraLarge: UmSpacingSizes | undefined;\n\n  @property({reflect: true}) cols = 1;\n  @property({attribute: 'cols-sm', reflect: true}) colsSmall: number | undefined;\n  @property({attribute: 'cols-md', reflect: true}) colsMedium: number | undefined;\n  @property({attribute: 'cols-lg', reflect: true}) colsLarge: number | undefined;\n  @property({attribute: 'cols-xl', reflect: true}) colsExtraLarge: number | undefined;\n\n  @property({attribute: 'template-columns', reflect: true}) templateColumns: number | undefined = undefined;\n  @property({attribute: 'template-columns-sm', reflect: true}) templateColumnsSmall: number | undefined;\n  @property({attribute: 'template-columns-md', reflect: true}) templateColumnsMedium: number | undefined;\n  @property({attribute: 'template-columns-lg', reflect: true}) templateColumnsLarge: number | undefined;\n  @property({attribute: 'template-columns-xl', reflect: true}) templateColumnsExtraLarge: number | undefined;\n\n  override render(): HTMLTemplateResult {\n    return html`<slot></slot>`;\n  }\n\n  override attributeChangedCallback(name: string, _old: string | null, value: string | null) {\n    super.attributeChangedCallback(name, _old, value);\n\n    if (name.startsWith('cols')) {\n      this.setColumnsVariable(name, value);\n      return;\n    }\n\n    if (name.startsWith('template-columns')) {\n      this.setTemplateColumnsVariable(name, value);\n      return;\n    }\n  }\n\n  private setColumnsVariable(name: string, value: string | null): void {\n\n    const propertyName = `--_${name}`;\n\n    this.setProperty(propertyName, value\n      ? `repeat(${value}, minmax(0, 1fr))`\n      : null);\n  }\n\n  private setTemplateColumnsVariable(name: string, value: string | null): void {\n\n    const propertyName = `--_${name}`;\n    this.setProperty(propertyName, value);\n  }\n\n  private setProperty(name: string, value: string | null): void {\n    if (value) {\n      this.style.setProperty(name, value)\n      return;\n    }\n\n    this.style.removeProperty(name);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-grid': UmGrid;\n  }\n}\n"]}

package/container/grid.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=grid.styles.d.ts.map

package/container/grid.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.styles.d.ts","sourceRoot":"","sources":["../../src/container/grid.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAmIlB,CAAC"}

package/container/grid.styles.js

@@ -0,0 +1,134 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+    --_grid-gutter: var(--u-grid-gutter-default, var(--u-grid-spacing-default, var(--_grid-spacing-default)));
+  }
+
+  :host([gutter=none]) {
+    --_grid-gutter: 0;
+  }
+
+  :host([gutter=small]) {
+    --_grid-gutter: var(--_grid-spacing-sm);
+  }
+
+  :host([gutter=medium]) {
+    --_grid-gutter: var(--_grid-spacing-md);
+  }
+
+  :host([gutter=large]) {
+    --_grid-gutter: var(--_grid-spacing-lg);
+  }
+
+  :host([gutter=extra-large]) {
+    --_grid-gutter: var(--_grid-spacing-xl);
+  }
+
+  :host([cols]) slot {
+    --_grid-template-columns: var(--_cols);
+  }
+
+  :host([template-columns]) slot {
+    --_grid-template-columns: var(--_template-columns);
+  }
+
+  @media (min-width: 600px) {
+    :host([gutter-sm=none]) {
+      --_grid-gutter: 0;
+    }
+    :host([gutter-sm=small]) {
+      --_grid-gutter: var(--_grid-spacing-sm);
+    }
+    :host([gutter-sm=medium]) {
+      --_grid-gutter: var(--_grid-spacing-md);
+    }
+    :host([gutter-sm=large]) {
+      --_grid-gutter: var(--_grid-spacing-lg);
+    }
+    :host([gutter-sm=extra-large]) {
+      --_grid-gutter: var(--_grid-spacing-xl);
+    }
+    :host([cols-sm]) slot {
+      --_grid-template-columns: var(--_cols-sm);
+    }
+    :host([template-columns-sm]) slot {
+      --_grid-template-columns: var(--_template-columns-sm);
+    }
+  }
+  @media (min-width: 840px) {
+    :host([gutter-md=none]) {
+      --_grid-gutter: 0;
+    }
+    :host([gutter-md=small]) {
+      --_grid-gutter: var(--_grid-spacing-sm);
+    }
+    :host([gutter-md=medium]) {
+      --_grid-gutter: var(--_grid-spacing-md);
+    }
+    :host([gutter-md=large]) {
+      --_grid-gutter: var(--_grid-spacing-lg);
+    }
+    :host([gutter-md=extra-large]) {
+      --_grid-gutter: var(--_grid-spacing-xl);
+    }
+    :host([cols-md]) slot {
+      --_grid-template-columns: var(--_cols-md);
+    }
+    :host([template-columns-md]) slot {
+      --_grid-template-columns: var(--_template-columns-md);
+    }
+  }
+  @media (min-width: 1200px) {
+    :host([gutter-lg=none]) {
+      --_grid-gutter: 0;
+    }
+    :host([gutter-lg=small]) {
+      --_grid-gutter: var(--_grid-spacing-sm);
+    }
+    :host([gutter-lg=medium]) {
+      --_grid-gutter: var(--_grid-spacing-md);
+    }
+    :host([gutter-lg=large]) {
+      --_grid-gutter: var(--_grid-spacing-lg);
+    }
+    :host([gutter-lg=extra-large]) {
+      --_grid-gutter: var(--_grid-spacing-xl);
+    }
+    :host([cols-lg]) slot {
+      --_grid-template-columns: var(--_cols-lg);
+    }
+    :host([template-columns-lg]) slot {
+      --_grid-template-columns: var(--_template-columns-lg);
+    }
+  }
+  @media (min-width: 1600px) {
+    :host([gutter-xl=none]) {
+      --_grid-gutter: 0;
+    }
+    :host([gutter-xl=small]) {
+      --_grid-gutter: var(--_grid-spacing-sm);
+    }
+    :host([gutter-xl=medium]) {
+      --_grid-gutter: var(--_grid-spacing-md);
+    }
+    :host([gutter-xl=large]) {
+      --_grid-gutter: var(--_grid-spacing-lg);
+    }
+    :host([gutter-xl=extra-large]) {
+      --_grid-gutter: var(--_grid-spacing-xl);
+    }
+    :host([cols-xl]) slot {
+      --_grid-template-columns: var(--_cols-xl);
+    }
+    :host([template-columns-xl]) slot {
+      --_grid-template-columns: var(--_template-columns-xl);
+    }
+  }
+  slot {
+    display: grid;
+    grid-template-columns: var(--_grid-template-columns);
+    gap: var(--u-grid-gutter, var(--_grid-gutter));
+  }
+`;
+//# sourceMappingURL=grid.styles.js.map

package/container/grid.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.styles.js","sourceRoot":"","sources":["../../src/container/grid.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmIzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    display: block;\n    --_grid-gutter: var(--u-grid-gutter-default, var(--u-grid-spacing-default, var(--_grid-spacing-default)));\n  }\n\n  :host([gutter=none]) {\n    --_grid-gutter: 0;\n  }\n\n  :host([gutter=small]) {\n    --_grid-gutter: var(--_grid-spacing-sm);\n  }\n\n  :host([gutter=medium]) {\n    --_grid-gutter: var(--_grid-spacing-md);\n  }\n\n  :host([gutter=large]) {\n    --_grid-gutter: var(--_grid-spacing-lg);\n  }\n\n  :host([gutter=extra-large]) {\n    --_grid-gutter: var(--_grid-spacing-xl);\n  }\n\n  :host([cols]) slot {\n    --_grid-template-columns: var(--_cols);\n  }\n\n  :host([template-columns]) slot {\n    --_grid-template-columns: var(--_template-columns);\n  }\n\n  @media (min-width: 600px) {\n    :host([gutter-sm=none]) {\n      --_grid-gutter: 0;\n    }\n    :host([gutter-sm=small]) {\n      --_grid-gutter: var(--_grid-spacing-sm);\n    }\n    :host([gutter-sm=medium]) {\n      --_grid-gutter: var(--_grid-spacing-md);\n    }\n    :host([gutter-sm=large]) {\n      --_grid-gutter: var(--_grid-spacing-lg);\n    }\n    :host([gutter-sm=extra-large]) {\n      --_grid-gutter: var(--_grid-spacing-xl);\n    }\n    :host([cols-sm]) slot {\n      --_grid-template-columns: var(--_cols-sm);\n    }\n    :host([template-columns-sm]) slot {\n      --_grid-template-columns: var(--_template-columns-sm);\n    }\n  }\n  @media (min-width: 840px) {\n    :host([gutter-md=none]) {\n      --_grid-gutter: 0;\n    }\n    :host([gutter-md=small]) {\n      --_grid-gutter: var(--_grid-spacing-sm);\n    }\n    :host([gutter-md=medium]) {\n      --_grid-gutter: var(--_grid-spacing-md);\n    }\n    :host([gutter-md=large]) {\n      --_grid-gutter: var(--_grid-spacing-lg);\n    }\n    :host([gutter-md=extra-large]) {\n      --_grid-gutter: var(--_grid-spacing-xl);\n    }\n    :host([cols-md]) slot {\n      --_grid-template-columns: var(--_cols-md);\n    }\n    :host([template-columns-md]) slot {\n      --_grid-template-columns: var(--_template-columns-md);\n    }\n  }\n  @media (min-width: 1200px) {\n    :host([gutter-lg=none]) {\n      --_grid-gutter: 0;\n    }\n    :host([gutter-lg=small]) {\n      --_grid-gutter: var(--_grid-spacing-sm);\n    }\n    :host([gutter-lg=medium]) {\n      --_grid-gutter: var(--_grid-spacing-md);\n    }\n    :host([gutter-lg=large]) {\n      --_grid-gutter: var(--_grid-spacing-lg);\n    }\n    :host([gutter-lg=extra-large]) {\n      --_grid-gutter: var(--_grid-spacing-xl);\n    }\n    :host([cols-lg]) slot {\n      --_grid-template-columns: var(--_cols-lg);\n    }\n    :host([template-columns-lg]) slot {\n      --_grid-template-columns: var(--_template-columns-lg);\n    }\n  }\n  @media (min-width: 1600px) {\n    :host([gutter-xl=none]) {\n      --_grid-gutter: 0;\n    }\n    :host([gutter-xl=small]) {\n      --_grid-gutter: var(--_grid-spacing-sm);\n    }\n    :host([gutter-xl=medium]) {\n      --_grid-gutter: var(--_grid-spacing-md);\n    }\n    :host([gutter-xl=large]) {\n      --_grid-gutter: var(--_grid-spacing-lg);\n    }\n    :host([gutter-xl=extra-large]) {\n      --_grid-gutter: var(--_grid-spacing-xl);\n    }\n    :host([cols-xl]) slot {\n      --_grid-template-columns: var(--_cols-xl);\n    }\n    :host([template-columns-xl]) slot {\n      --_grid-template-columns: var(--_template-columns-xl);\n    }\n  }\n  slot {\n    display: grid;\n    grid-template-columns: var(--_grid-template-columns);\n    gap: var(--u-grid-gutter, var(--_grid-gutter));\n  }\n`;\n"]}

package/index.d.ts

@@ -5,6 +5,7 @@ import './button/button-set.js';
 import './card/card.js';
 import './checkbox/checkbox.js';
 import './container/container.js';
+import './container/grid.js';
 import './divider/divider.js';
 import './elevation/elevation.js';
 import './ripple/ripple.js';
@@ -18,6 +19,8 @@ export * from './card/card.js';
 export * from './card/card-content.js';
 export * from './card/card-media.js';
 export * from './checkbox/checkbox.js';
+export * from './container/grid-base.js';
+export * from './container/grid.js';
 export * from './container/container.js';
 export * from './divider/divider.js';
 export * from './elevation/elevation.js';

package/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAC;AAC5B,OAAO,iBAAiB,CAAC;AACzB,OAAO,yBAAyB,CAAC;AACjC,OAAO,wBAAwB,CAAC;AAChC,OAAO,gBAAgB,CAAC;AACxB,OAAO,wBAAwB,CAAC;AAChC,OAAO,0BAA0B,CAAC;AAClC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,0BAA0B,CAAC;AAClC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,kBAAkB,CAAC;AAE1B,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAC;AAC5B,OAAO,iBAAiB,CAAC;AACzB,OAAO,yBAAyB,CAAC;AACjC,OAAO,wBAAwB,CAAC;AAChC,OAAO,gBAAgB,CAAC;AACxB,OAAO,wBAAwB,CAAC;AAChC,OAAO,0BAA0B,CAAC;AAClC,OAAO,qBAAqB,CAAC;AAC7B,OAAO,sBAAsB,CAAC;AAC9B,OAAO,0BAA0B,CAAC;AAClC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,kBAAkB,CAAC;AAE1B,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,0BAA0B,CAAC"}

package/index.js

@@ -5,6 +5,7 @@ import './button/button-set.js';
 import './card/card.js';
 import './checkbox/checkbox.js';
 import './container/container.js';
+import './container/grid.js';
 import './divider/divider.js';
 import './elevation/elevation.js';
 import './ripple/ripple.js';
@@ -18,6 +19,8 @@ export * from './card/card.js';
 export * from './card/card-content.js';
 export * from './card/card-media.js';
 export * from './checkbox/checkbox.js';
+export * from './container/grid-base.js';
+export * from './container/grid.js';
 export * from './container/container.js';
 export * from './divider/divider.js';
 export * from './elevation/elevation.js';

package/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAC;AAC5B,OAAO,iBAAiB,CAAC;AACzB,OAAO,yBAAyB,CAAC;AACjC,OAAO,wBAAwB,CAAC;AAChC,OAAO,gBAAgB,CAAC;AACxB,OAAO,wBAAwB,CAAC;AAChC,OAAO,0BAA0B,CAAC;AAClC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,0BAA0B,CAAC;AAClC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,kBAAkB,CAAC;AAE1B,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,0BAA0B,CAAC","sourcesContent":["import './button/button.js';\nimport './button/fab.js';\nimport './button/icon-button.js';\nimport './button/button-set.js';\nimport './card/card.js';\nimport './checkbox/checkbox.js';\nimport './container/container.js';\nimport './divider/divider.js';\nimport './elevation/elevation.js';\nimport './ripple/ripple.js';\nimport './table/table.js';\n\nexport * from './button/button-base.js';\nexport * from './button/button.js';\nexport * from './button/fab.js';\nexport * from './button/icon-button.js';\nexport * from './button/button-set.js';\nexport * from './card/card.js';\nexport * from './card/card-content.js';\nexport * from './card/card-media.js';\nexport * from './checkbox/checkbox.js';\nexport * from './container/container.js';\nexport * from './divider/divider.js';\nexport * from './elevation/elevation.js';\nexport * from './ripple/ripple.js';\nexport * from './table/table.js';\nexport * from './theme/theme-builder.js';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAC;AAC5B,OAAO,iBAAiB,CAAC;AACzB,OAAO,yBAAyB,CAAC;AACjC,OAAO,wBAAwB,CAAC;AAChC,OAAO,gBAAgB,CAAC;AACxB,OAAO,wBAAwB,CAAC;AAChC,OAAO,0BAA0B,CAAC;AAClC,OAAO,qBAAqB,CAAC;AAC7B,OAAO,sBAAsB,CAAC;AAC9B,OAAO,0BAA0B,CAAC;AAClC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,kBAAkB,CAAC;AAE1B,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,0BAA0B,CAAC","sourcesContent":["import './button/button.js';\nimport './button/fab.js';\nimport './button/icon-button.js';\nimport './button/button-set.js';\nimport './card/card.js';\nimport './checkbox/checkbox.js';\nimport './container/container.js';\nimport './container/grid.js';\nimport './divider/divider.js';\nimport './elevation/elevation.js';\nimport './ripple/ripple.js';\nimport './table/table.js';\n\nexport * from './button/button-base.js';\nexport * from './button/button.js';\nexport * from './button/fab.js';\nexport * from './button/icon-button.js';\nexport * from './button/button-set.js';\nexport * from './card/card.js';\nexport * from './card/card-content.js';\nexport * from './card/card-media.js';\nexport * from './checkbox/checkbox.js';\nexport * from './container/grid-base.js';\nexport * from './container/grid.js';\nexport * from './container/container.js';\nexport * from './divider/divider.js';\nexport * from './elevation/elevation.js';\nexport * from './ripple/ripple.js';\nexport * from './table/table.js';\nexport * from './theme/theme-builder.js';\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@universal-material/web",
-  "version": "3.0.15",
+  "version": "3.0.17",
   "description": "Material web components",
   "type": "module",
   "keywords": [