@pushengineering/umg-web-components 2.0.10 → 3.0.2

package/dist/styles/fonts.js

@@ -1,164 +1,208 @@
-import { css as t } from "lit";
-const a = t`
-  .txt--headingXs,
-  .txt--headingSm,
-  .txt--headingMd,
-  .txt--headingLg,
-  .txt--headingXl,
-  .txt--heading2xl,
-  .txt--heading3xl,
-  .txt--heading4xl,
-  .txt--heading5xl,
-  .txt--heading {
-    font-family: var(--um-font-family-heading, 'Roboto Serif', Times, 'Times New Roman', Georgia, serif);
-  }
-  .txt--bodyXs,
-  .txt--bodySm,
-  .txt--bodyMd,
-  .txt--bodyLg,
-  .txt--bodyXl,
-  .txt--body2xl,
-  .txt--body3xl,
-  .txt--body4xl,
-  .txt--body5xl,
-  .txt--body {
-    font-family: var(--um-font-family-body, Roboto, Arial, Helvetica, sans-serif);
-  }
-  .txt--heading {
-    font-size: calc(var(--um-font-size-heading-scale, 1) * (var(--um-font-size, 1.25) * 1rem));
-    line-height: calc(1 + 0.15 / max(1, var(--um-font-size-heading-scale, 1)));
-  }
-  .txt--headingXs {
-    font-size: var(--um-font-size-heading-xs, 0.75rem);
-    line-height: calc(1 + 0.2 / max(1, var(--um-font-size-heading-scale, 1)));
-  }
-  .txt--headingSm {
-    font-size: var(--um-font-size-heading-sm, 0.875rem);
-    line-height: calc(1 + 0.2 / max(1, var(--um-font-size-heading-scale, 1)));
-  }
-  .txt--headingMd {
-    font-size: var(--um-font-size-heading-md, 1rem);
-    line-height: calc(1 + 0.15 / max(1, var(--um-font-size-heading-scale, 1)));
-  }
-  .txt--headingLg {
-    font-size: calc(var(--um-font-size-heading-scale, 1) * var(--um-font-size-heading-lg, 1.25rem));
-    line-height: calc(1 + 0.15 / max(1, var(--um-font-size-heading-scale, 1)));
-  }
-  .txt--headingXl {
-    font-size: calc(var(--um-font-size-heading-scale, 1) * var(--um-font-size-heading-xl, 1.5rem));
-    line-height: calc(1 + 0.15 / max(1, var(--um-font-size-heading-scale, 1)));
-  }
-  .txt--heading2xl {
-    font-size: calc(var(--um-font-size-heading-scale, 1) * var(--um-font-size-heading-2xl, 1.75rem));
-    line-height: calc(1 + 0.15 / max(1, var(--um-font-size-heading-scale, 1)));
-  }
-  .txt--heading3xl {
-    font-size: calc(var(--um-font-size-heading-scale, 1) * var(--um-font-size-heading-3xl, 2rem));
-    line-height: calc(1 + 0.15 / max(1, var(--um-font-size-heading-scale, 1)));
-  }
-  .txt--heading4xl {
-    font-size: calc(var(--um-font-size-heading-scale, 1) * var(--um-font-size-heading-4xl, 3rem));
-    line-height: calc(1 + 0 / max(1, var(--um-font-size-heading-scale, 1)));
-  }
-  .txt--heading5xl {
-    font-size: calc(var(--um-font-size-heading-scale, 1) * var(--um-font-size-heading-5xl, 4rem));
-    line-height: calc(1 + 0 / max(1, var(--um-font-size-heading-scale, 1)));
-  }
-  .txt--body {
-    font-size: calc(var(--um-font-size-body-scale, 1) * (var(--um-font-size, 1) * 1rem));
-    line-height: calc(1 + 0.3 / max(1, var(--um-font-size-body-scale, 1)));
-  }
-  .txt--bodyXs {
-    font-size: var(--um-font-size-body-xs, 0.75rem);
-    line-height: calc(1 + 0.2 / max(1, var(--um-font-size-body-scale, 1)));
-  }
-  .txt--bodySm {
-    font-size: var(--um-font-size-body-sm, 0.875rem);
-    line-height: calc(1 + 0.2 / max(1, var(--um-font-size-body-scale, 1)));
-  }
-  .txt--bodyMd {
-    font-size: calc(var(--um-font-size-body-scale, 1) * var(--um-font-size-body-md, 1rem));
-    line-height: calc(1 + 0.3 / max(1, var(--um-font-size-body-scale, 1)));
-  }
-  .txt--bodyLg {
-    font-size: calc(var(--um-font-size-body-scale, 1) * var(--um-font-size-body-lg, 1.25rem));
-    line-height: calc(1 + 0.25 / max(1, var(--um-font-size-body-scale, 1)));
-  }
-  .txt--bodyXl {
-    font-size: calc(var(--um-font-size-body-scale, 1) * var(--um-font-size-body-xl, 1.5rem));
-    line-height: calc(1 + 0.25 / max(1, var(--um-font-size-body-scale, 1)));
-  }
-  .txt--body2xl {
-    font-size: calc(var(--um-font-size-body-scale, 1) * var(--um-font-size-body-2xl, 1.75rem));
-    line-height: calc(1 + 0.15 / max(1, var(--um-font-size-body-scale, 1)));
-  }
-  .txt--body3xl {
-    font-size: calc(var(--um-font-size-body-scale, 1) * var(--um-font-size-body-3xl, 2rem));
-    line-height: calc(1 + 0.15 / max(1, var(--um-font-size-body-scale, 1)));
-  }
-  .txt--body4xl {
-    font-size: calc(var(--um-font-size-body-scale, 1) * var(--um-font-size-body-4xl, 3rem));
-    line-height: calc(1 + 0 / max(1, var(--um-font-size-body-scale, 1)));
-  }
-  .txt--body5xl {
-    font-size: calc(var(--um-font-size-body-scale, 1) * var(--um-font-size-body-5xl, 4rem));
-    line-height: calc(1 + 0 / max(1, var(--um-font-size-body-scale, 1)));
-  }
-`, i = t`
-.txt--light {
-  font-weight: var(--um-font-weight-light, 300);
-}
-.txt--regular {
-  font-weight: var(--um-font-weight-regular, 400);
-}
-.txt--medium {
-  font-weight: var(--um-font-weight-medium, 500);
-}
-.txt--semibold {
-  font-weight: var(--um-font-weight-semibold, 600);
-}
-.txt--bold {
-  font-weight: var(--um-font-weight-bold, 700);
-}
-.txt--extrabold {
-  font-weight: var(--um-font-weight-extrabold, 800);
-}
-.txt--black {
-  font-weight: var(--um-font-weight-black, 900);
-}
-`, o = t`
+import { css } from 'lit';
+
+const fontFamily = css `
+    .txt--headingXs,
+    .txt--headingSm,
+    .txt--headingMd,
+    .txt--headingLg,
+    .txt--headingXl,
+    .txt--heading2xl,
+    .txt--heading3xl,
+    .txt--heading4xl,
+    .txt--heading5xl,
+    .txt--heading {
+        font-family: var(--umg-font-heading-family, var(--umg-font-heading-family-default, inherit));
+    }
+    .txt--bodyXs,
+    .txt--bodySm,
+    .txt--bodyMd,
+    .txt--bodyLg,
+    .txt--bodyXl,
+    .txt--body2xl,
+    .txt--body3xl,
+    .txt--body4xl,
+    .txt--body5xl,
+    .txt--body {
+        font-family: var(--umg-font-body-family, var(--umg-font-body-family-default, inherit));
+    }
+`;
+const fontSizes = css `
+    .txt--heading-custom {
+        font-size: calc(var(--umg-font-heading-scale, 1) * var(--umg-font-base-size, 1.5));
+        line-height: calc(1 + 0.15 / max(1, var(--umg-font-heading-scale, 1)));
+    }
+    .txt--heading {
+        font-size: calc(var(--umg-font-heading-scale, 1) * var(--umg-font-heading-size, 1.5));
+        line-height: calc(1 + 0.15 / max(1, var(--umg-font-heading-scale, 1)));
+    }
+    .txt--headingXs {
+        font-size: var(--umg-font-heading-size-xs, 0.75rem);
+        line-height: calc(1 + 0.2 / max(1, var(--umg-font-heading-scale, 1)));
+    }
+    .txt--headingSm {
+        font-size: var(--umg-font-heading-size-sm, 0.875rem);
+        line-height: calc(1 + 0.2 / max(1, var(--umg-font-heading-scale, 1)));
+    }
+    .txt--headingMd {
+        font-size: var(--umg-font-heading-size-md, 1rem);
+        line-height: calc(1 + 0.15 / max(1, var(--umg-font-heading-scale, 1)));
+    }
+    .txt--headingLg {
+        font-size: calc(var(--umg-font-heading-scale, 1) * var(--umg-font-heading-size-lg, 1.25rem));
+        line-height: calc(1 + 0.15 / max(1, var(--umg-font-heading-scale, 1)));
+    }
+    .txt--headingXl {
+        font-size: calc(var(--umg-font-heading-scale, 1) * var(--umg-font-heading-size-xl, 1.5rem));
+        line-height: calc(1 + 0.15 / max(1, var(--umg-font-heading-scale, 1)));
+    }
+    .txt--heading2xl {
+        font-size: calc(var(--umg-font-heading-scale, 1) * var(--umg-font-heading-size-2xl, 1.75rem));
+        line-height: calc(1 + 0.15 / max(1, var(--umg-font-heading-scale, 1)));
+    }
+    .txt--heading3xl {
+        font-size: calc(var(--umg-font-heading-scale, 1) * var(--umg-font-heading-size-3xl, 2rem));
+        line-height: calc(1 + 0.15 / max(1, var(--umg-font-heading-scale, 1)));
+    }
+    .txt--heading4xl {
+        font-size: calc(var(--umg-font-heading-scale, 1) * var(--umg-font-heading-size-4xl, 3rem));
+        line-height: calc(1 + 0 / max(1, var(--umg-font-heading-scale, 1)));
+    }
+    .txt--heading5xl {
+        font-size: calc(var(--umg-font-heading-scale, 1) * var(--umg-font-heading-size-5xl, 4rem));
+        line-height: calc(1 + 0 / max(1, var(--umg-font-heading-scale, 1)));
+    }
+    .txt--body-custom {
+        font-size: calc(var(--umg-font-body-scale, 1) * var(--umg-font-base-size, 1));
+        line-height: calc(1 + 0.3 / max(1, var(--umg-font-body-scale, 1)));
+    }
+    .txt--body {
+        font-size: calc(var(--umg-font-body-scale, 1) * var(--umg-font-body-size, 1));
+        line-height: calc(1 + 0.3 / max(1, var(--umg-font-body-scale, 1)));
+    }
+    .txt--bodyXs {
+        font-size: var(--umg-font-body-size-xs, 0.75rem);
+        line-height: calc(1 + 0.2 / max(1, var(--umg-font-body-scale, 1)));
+    }
+    .txt--bodySm {
+        font-size: var(--umg-font-body-size-sm, 0.875rem);
+        line-height: calc(1 + 0.2 / max(1, var(--umg-font-body-scale, 1)));
+    }
+    .txt--bodyMd {
+        font-size: calc(var(--umg-font-body-scale, 1) * var(--umg-font-body-size-md, 1rem));
+        line-height: calc(1 + 0.3 / max(1, var(--umg-font-body-scale, 1)));
+    }
+    .txt--bodyLg {
+        font-size: calc(var(--umg-font-body-scale, 1) * var(--umg-font-body-size-lg, 1.25rem));
+        line-height: calc(1 + 0.25 / max(1, var(--umg-font-body-scale, 1)));
+    }
+    .txt--bodyXl {
+        font-size: calc(var(--umg-font-body-scale, 1) * var(--umg-font-body-size-xl, 1.5rem));
+        line-height: calc(1 + 0.25 / max(1, var(--umg-font-body-scale, 1)));
+    }
+    .txt--body2xl {
+        font-size: calc(var(--umg-font-body-scale, 1) * var(--umg-font-body-size-2xl, 1.75rem));
+        line-height: calc(1 + 0.15 / max(1, var(--umg-font-body-scale, 1)));
+    }
+    .txt--body3xl {
+        font-size: calc(var(--umg-font-body-scale, 1) * var(--umg-font-body-size-3xl, 2rem));
+        line-height: calc(1 + 0.15 / max(1, var(--umg-font-body-scale, 1)));
+    }
+    .txt--body4xl {
+        font-size: calc(var(--umg-font-body-scale, 1) * var(--umg-font-body-size-4xl, 3rem));
+        line-height: calc(1 + 0 / max(1, var(--umg-font-body-scale, 1)));
+    }
+    .txt--body5xl {
+        font-size: calc(var(--umg-font-body-scale, 1) * var(--umg-font-body-size-5xl, 4rem));
+        line-height: calc(1 + 0 / max(1, var(--umg-font-body-scale, 1)));
+    }
+`;
+const fontColors = css `
+        .txt--color-default {
+            color: rgb(var(--umg-color-base-text));
+        }
+        .txt--color-subdued {
+            color: rgb(var(--umg-color-base-text-subdued));
+        }
+        .txt--color-warning {
+            color: rgb(var(--umg-color-base-text-warning));
+        }
+        .txt--color-inverse {
+            color: rgb(var(--umg-color-base-text-inverse));
+        }
+    @supports (color: rgb(from white r g b)) {
+        .txt--color-default {
+            color: rgb(from var(--umg-color-base-text) r g b);
+        }
+        .txt--color-subdued {
+            color: rgb(from var(--umg-color-base-text-subdued) r g b);
+        }
+        .txt--color-warning {
+            color: rgb(from var(--umg-color-base-text-warning) r g b);
+        }
+        .txt--color-inverse {
+            color: rgb(from var(--umg-color-base-text-inverse) r g b);
+        }
+    }
+`;
+const fontWeights = css `
+    .txt--inherit {
+        font-weight: var(--umg-font-base-weight, 400);
+    }
+    .txt--light {
+        font-weight: var(--umg-font-base-weight-light, 300);
+    }
+    .txt--regular {
+        font-weight: var(--umg-font-base-weight-regular, 400);
+    }
+    .txt--medium {
+        font-weight: var(--umg-font-base-weight-medium, 500);
+    }
+    .txt--semibold {
+        font-weight: var(--umg-font-base-weight-semibold, 600);
+    }
+    .txt--bold {
+        font-weight: var(--umg-font-base-weight-bold, 700);
+    }
+    .txt--extrabold {
+        font-weight: var(--umg-font-base-weight-extrabold, 800);
+    }
+    .txt--black {
+        font-weight: var(--umg-font-base-weight-black, 900);
+    }
+`;
+const fontMargins = css `
     .txt--headingXs {
-      margin-bottom: var(--um-space-4, 0.25rem);
+        margin-bottom: var(--umg-space-4, 0.25rem);
     }
     .txt--headingSm {
-      margin-bottom: var(--um-space-8, 0.5rem);
+        margin-bottom: var(--umg-space-8, 0.5rem);
     }
     .txt--headingMd {
-      margin-bottom: var(--um-space-12, 0.75rem);
+        margin-bottom: var(--umg-space-12, 0.75rem);
     }
     .txt--headingLg {
-      margin-bottom: var(--um-space-12, 0.75rem);
+        margin-bottom: var(--umg-space-12, 0.75rem);
     }
     .txt--headingXl {
-      margin-bottom: var(--um-space-16, 1rem);
+        margin-bottom: var(--umg-space-16, 1rem);
     }
     .txt--heading2xl {
-      margin-bottom: var(--um-space-16, 1rem);
+        margin-bottom: var(--umg-space-16, 1rem);
     }
     .txt--heading3xl {
-      margin-bottom: var(--um-space-16, 1rem);
+        margin-bottom: var(--umg-space-16, 1rem);
     }
     .txt--heading4xl {
-      margin-bottom: var(--um-space-20, 1.25rem);
+        margin-bottom: var(--umg-space-20, 1.25rem);
     }
     .txt--heading5xl {
-      margin-bottom: var(--um-space-24, 1.5rem);
+        margin-bottom: var(--umg-space-24, 1.5rem);
     }
     .txt--bodyXs {
-      margin-bottom: var(--um-space-4, 0.25rem);
+        margin-bottom: var(--umg-space-4, 0.25rem);
     }
     .txt--bodySm {
-      margin-bottom: var(--um-space-8, 0.5rem);
+        margin-bottom: var(--umg-space-8, 0.5rem);
     }
     .txt--bodyMd,
     .txt--bodyLg,
@@ -167,22 +211,20 @@ const a = t`
     .txt--body3xl,
     .txt--body4xl,
     .txt--body5xl {
-      margin-bottom: var(--pu-space-12, 0.75rem);
+        margin-bottom: var(--umg-space-12, 0.75rem);
     }
-`, n = t`
+`;
+const fontStyle = css `
     .txt--italic {
-      font-style: italic;
+        font-style: italic;
     }
     .txt--oblique {
-      font-style: oblique;
+        font-style: oblique;
     }
     .txt--normal {
-      font-style: normal;
+        font-style: normal;
     }
 `;
-export {
-  o as fontMargins,
-  a as fontSizes,
-  n as fontStyle,
-  i as fontWeights
-};
+
+export { fontColors, fontFamily, fontMargins, fontSizes, fontStyle, fontWeights };
+//# sourceMappingURL=fonts.js.map

package/dist/styles/fonts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fonts.js","sources":["../../src/styles/fonts.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAGO,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;EAyB5B;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyF3B;AAGM,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2B5B;AAGM,MAAM,WAAW,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;EAyB7B;AAGM,MAAM,WAAW,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2C7B;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;"}

package/dist/styles/global.d.ts

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

package/dist/styles/global.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"global.d.ts","sourceRoot":"","sources":["../../src/styles/global.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM,yBAuClB,CAAA"}

package/dist/styles/global.js

@@ -1,20 +1,28 @@
-import { css as o } from "lit";
-const e = o`
+import { css } from 'lit';
+
+const global = css `
     *, *:before, *:after {
         box-sizing: border-box;
     }
 
     *:focus-visible:not(umg-button-icon) {
-        outline: 0.125rem solid rgba(var(--um-color-page-text, 0,0,0), 1);
+        outline: 0.125rem solid rgba(var(--umg-color-base-background, 0,0,0), 0.5);
         outline-offset: 0.1875rem;
-        box-shadow: 0 0 0 0.15rem rgb(var(--um-color-page-bg, 255,255,255)),0 0 0.25rem 0.2rem rgba(var(--um-color-page-text, 62,62,62), 0.3);
+        box-shadow: 0 0 0 0.15rem rgb(var(--umg-color-base-text, 255,255,255)),0 0 0.25rem 0.2rem rgba(var(--umg-color-base-background, 0,0,0), 0.5);
+    }
+    @supports (color: rgb(from white r g b)) {
+        *:focus-visible:not(umg-button-icon)  {
+            outline: 0.125rem solid rgb(from var(--umg-color-base-background, rgb(0,0,0)) r g b / alpha);
+            outline-offset: 0.1875rem;
+            box-shadow: 0 0 0 0.15rem rgb(from var(--umg-color-base-text, rgb(255,255,255)) r g b / alpha), 0 0 0.25rem 0.2rem rgb(from var(--umg-color-base-background, rgb(0,0,0)) r g b / alpha);
+        }
     }
     
     h1,h2,h3,h4,h5,h6 {
-        font-family: var(--um-font-family-heading, 'Roboto Serif', Times, 'Times New Roman', Georgia, serif);
+        font-family: var(--umg-font-heading-family, 'Roboto Serif', Times, 'Times New Roman', Georgia, serif);
     }
     p {
-        font-family: var(--um-font-family-body, Roboto, Arial, Helvetica, sans-serif);
+        font-family: var(--umg-font-body-family, Roboto, Arial, Helvetica, sans-serif);
     }
     summary {
         -webkit-tap-highlight-color: transparent;
@@ -32,6 +40,6 @@ const e = o`
         word-wrap: normal !important;
     }
 `;
-export {
-  e as global
-};
+
+export { global };
+//# sourceMappingURL=global.js.map

package/dist/styles/global.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"global.js","sources":["../../src/styles/global.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAGO,MAAM,MAAM,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/styles/grid.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../src/styles/grid.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,IAAI,yBA0GhB,CAAA"}

package/dist/styles/grid.js

@@ -1,20 +1,21 @@
-import { css as r } from "lit";
-const d = r`
+import { css } from 'lit';
+
+const grid = css `
 
     /* Grid layout */
     .grid {
         display: flex;
         flex-wrap: wrap;
-        row-gap: var(--um-space-grid-mobile-vertical, 0.5rem);
-        column-gap: var(--um-space-grid-mobile-horizontal, 0.5rem);
+        row-gap: var(--umg-space-grid-vertical-mobile, 0.5rem);
+        column-gap: var(--umg-space-grid-horizontal-mobile, 0.5rem);
         list-style: none;
         margin: 0;
         padding: 0;
     }
     @media screen and (min-width: 48.06rem) {
         .grid {
-            row-gap: var(--um-space-grid-desktop-vertical, 1.5rem);
-            column-gap: var(--um-space-grid-desktop-horizontal, 1.5rem);
+            row-gap: var(--umg-space-grid-vertical-desktop, 1.5rem);
+            column-gap: var(--umg-space-grid-horizontal-desktop, 1.5rem);
         }
     }
 
@@ -23,7 +24,7 @@ const d = r`
     /* grid..grid--columns class for grids with non-slotted grid items */
    .grid:not(.grid--columns) ::slotted(*),
    .grid > * {
-        width: calc(25% - var(--um-space-grid-mobile-horizontal, 0.5rem) * 3 / 4);
+        width: calc(25% - var(--umg-space-grid-horizontal-mobile, 0.5rem) * 3 / 4);
         flex-grow: 0;
         flex-shrink: 0;
     }
@@ -45,7 +46,7 @@ const d = r`
         }
         .grid--2-col-tablet-down:not(.grid--columns) ::slotted(*),
         .grid--2-col-tablet-down > * {
-            width: calc( 50% - var(--um-space-grid-mobile-horizontal, 0.5rem) / 2 );
+            width: calc( 50% - var(--umg-space-grid-horizontal-mobile, 0.5rem) / 2 );
         }
     }
 
@@ -53,15 +54,15 @@ const d = r`
     @media screen and (min-width: 30.06rem) and (max-width: 48rem) {
         .grid--4-col-tablet:not(.grid--columns) ::slotted(*),
         .grid--4-col-tablet > * {
-            width: calc(25% - var(--um-space-grid-mobile-horizontal, 1rem) * 3 / 4);
+            width: calc(25% - var(--umg-space-grid-horizontal-mobile, 1rem) * 3 / 4);
         }
         .grid--3-col-tablet:not(.grid--columns) ::slotted(*),
         .grid--3-col-tablet > * {
-            width: calc(33.33% - var(--um-space-grid-mobile-horizontal, 1rem) * 2 / 3);
+            width: calc(33.33% - var(--umg-space-grid-horizontal-mobile, 1rem) * 2 / 3);
         }
         .grid--2-col-tablet:not(.grid--columns) ::slotted(*),
         .grid--2-col-tablet > * {
-            width: calc(50% - var(--um-space-grid-mobile-horizontal, 1rem) / 2);
+            width: calc(50% - var(--umg-space-grid-horizontal-mobile, 1rem) / 2);
         }
         .grid--1-col-tablet:not(.grid--columns) ::slotted(*),
         .grid--1-col-tablet > * {
@@ -73,15 +74,15 @@ const d = r`
     @media screen and (min-width: 48.06rem) and (max-width: 64rem) {
         .grid--4-col-tablet:not(.grid--columns) ::slotted(*),
         .grid--4-col-tablet > * {
-            width: calc(25% - var(--um-space-grid-desktop-horizontal, 1rem) * 3 / 4);
+            width: calc(25% - var(--umg-space-grid-horizontal-desktop, 1rem) * 3 / 4);
         }
         .grid--3-col-tablet:not(.grid--columns) ::slotted(*),
         .grid--3-col-tablet > * {
-            width: calc(33.33% - var(--um-space-grid-desktop-horizontal, 1rem) * 2 / 3);
+            width: calc(33.33% - var(--umg-space-grid-horizontal-desktop, 1rem) * 2 / 3);
         }
         .grid--2-col-tablet:not(.grid--columns) ::slotted(*),
         .grid--2-col-tablet > * {
-            width: calc(50% - var(--um-space-grid-desktop-horizontal, 1rem) / 2);
+            width: calc(50% - var(--umg-space-grid-horizontal-desktop, 1rem) / 2);
         }
         .grid--1-col-tablet:not(.grid--columns) ::slotted(*),
         .grid--1-col-tablet > * {
@@ -94,18 +95,18 @@ const d = r`
         .grid:not(.grid--columns) ::slotted(*),
         .grid > * {
              width: calc(
-                 var(--um-grid-desktop-columns-width, 25%)
-                 - var(--um-space-grid-desktop-horizontal, 1.5rem)
-                 * var(--um-grid-desktop-gaps, 3)
-                 / var(--um-grid-desktop-columns, 4)
+                 var(--umg-grid-desktop-columns-width, 25%)
+                 - var(--umg-space-grid-horizontal-desktop, 1.5rem)
+                 * var(--umg-grid-desktop-gaps, 3)
+                 / var(--umg-grid-desktop-columns, 4)
              );
          }
         .grid--2-col-desktop:not(.grid--columns) ::slotted(*),
         .grid--2-col-desktop > * {
-            width: calc(50% - var(--um-space-grid-desktop-horizontal, 1rem) / 2);
+            width: calc(50% - var(--umg-space-grid-horizontal-desktop, 1rem) / 2);
          }
     }
 `;
-export {
-  d as grid
-};
+
+export { grid };
+//# sourceMappingURL=grid.js.map

package/dist/styles/grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.js","sources":["../../src/styles/grid.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAQO,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/styles/group.d.ts

@@ -0,0 +1,6 @@
+export declare const groupSpacing: import("lit").CSSResult;
+export declare const groupJustify: import("lit").CSSResult;
+export declare const groupMobileJustify: import("lit").CSSResult;
+export declare const groupAlign: import("lit").CSSResult;
+export declare const groupMobileAlign: import("lit").CSSResult;
+//# sourceMappingURL=group.d.ts.map

package/dist/styles/group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"group.d.ts","sourceRoot":"","sources":["../../src/styles/group.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,YAAY,yBAyBxB,CAAA;AAGD,eAAO,MAAM,YAAY,yBAwBxB,CAAA;AAED,eAAO,MAAM,kBAAkB,yBAwB9B,CAAA;AACD,eAAO,MAAM,UAAU,yBAkBtB,CAAA;AAED,eAAO,MAAM,gBAAgB,yBAkB5B,CAAA"}