@pushengineering/umg-web-components 2.0.10 → 3.0.1

package/dist/components/section/section.js

@@ -1,412 +1,114 @@
-import { css as g, LitElement as u, html as l } from "lit";
-import { customElement as f } from "lit/decorators/custom-element.js";
-import { property as o } from "lit/decorators/property.js";
-import { state as m } from "lit/decorators/state.js";
-import { classMap as p } from "lit/directives/class-map.js";
-import { styleMap as h } from "lit/directives/style-map.js";
-import { paddingToCssShorthandArray as b, mergePaddingArrays as _ } from "../../scripts/utilities/paddingTransformations.js";
-import { global as w } from "../../styles/global.js";
-import { settings as v } from "../../scripts/settings.js";
-import { mergeStyles as y } from "../../scripts/mergeStyles.js";
-var x = Object.defineProperty, P = Object.getOwnPropertyDescriptor, i = (e, a, r, d) => {
-  for (var n = d > 1 ? void 0 : d ? P(a, r) : a, s = e.length - 1, c; s >= 0; s--)
-    (c = e[s]) && (n = (d ? c(a, r, n) : c(n)) || n);
-  return d && n && x(a, r, n), n;
-};
-const { prefix: S } = v;
-let t = class extends u {
-  constructor() {
-    super(...arguments), this.outerWidth = "full-width", this.innerWidth = "page-width", this.compactHeader = !1, this.mobileBleed = !1, this._withoutHeader = !0, this._withoutFooter = !0, this.isNumeric = (e) => (typeof e == "number" || typeof e == "string" && e.trim() !== "") && !isNaN(e);
-  }
-  handleSlotchange(e) {
-    e.target && e.target.getAttribute("name") === "footer-link" && (this._withoutFooter = !1), (e.target && e.target.getAttribute("name") === "toolbar" || e.target.getAttribute("name") === "title" || e.target.getAttribute("name") === "header-link" || e.target.getAttribute("name") === "subtitle" || e.target.getAttribute("name") === "description") && (this._withoutHeader = !1);
-  }
-  firstUpdated() {
-    this.mobilePadding && this.convertMobilePadding(this.mobilePadding);
-  }
-  updated(e) {
-    e.has("mobilePadding") && this.mobilePadding && this.mobilePadding && this.convertMobilePadding(this.mobilePadding);
-  }
-  convertMobilePadding(e) {
-    if (e) {
-      const r = [b(e)];
-      this._mobilePadding = _(r);
+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 { styleMap } from 'lit/directives/style-map.js';
+import { global } from '../../styles/global.js';
+import { section } from './styles/section.js';
+import './section-block.js';
+import { settings } from '../../scripts/settings.js';
+import { mergeStyles } from '../../scripts/mergeStyles.js';
+
+const { prefix } = settings;
+let Section = class Section extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.as = 'section';
     }
-  }
-  sectionClasses() {
-    const e = {
-      section: !0,
-      "section--compact-header": this.compactHeader,
-      "section--without-header": this._withoutHeader,
-      "section--without-footer": this._withoutFooter
-    };
-    return this.outerWidth && (e["section-width--" + this.outerWidth] = !0), e;
-  }
-  sectionInnerClasses() {
-    const e = {};
-    return this.innerWidth && !this.isNumeric(this.innerWidth) && (e["section-inner-width--" + this.innerWidth] = !0), this.mobileBleed && (e["section-inner--bleed-content"] = !0), e;
-  }
-  sectionStyles() {
-    let e = {};
-    return this.innerWidth && this.isNumeric(this.innerWidth) && (e = {
-      ...e,
-      "--um-size-page-width": Number(this.innerWidth) / 16 + "rem"
-    }), this.maxInnerWidth && (e = {
-      ...e,
-      "--um-size-max-section-width": this.maxInnerWidth / 16 + "rem"
-    }), this.colorText && (e = {
-      ...e,
-      "--um-color-section-text": this.colorText
-    }), this.colorBg && (e = {
-      ...e,
-      "--um-color-section-bg": this.colorBg
-    }), this.paddingTop && (e = {
-      ...e,
-      "--um-space-section-padding-top": Number(this.paddingTop) / 16 + "rem"
-    }), this.paddingBottom && (e = {
-      ...e,
-      "--um-space-section-padding-bottom": Number(this.paddingBottom) / 16 + "rem"
-    }), this.paddingLeft && (e = {
-      ...e,
-      "--um-space-section-padding-left": Number(this.paddingLeft) / 16 + "rem"
-    }), this.paddingRight && (e = {
-      ...e,
-      "--um-space-section-padding-right": Number(this.paddingRight) / 16 + "rem"
-    }), this._mobilePadding && typeof this._mobilePadding == "object" && "rem" in this._mobilePadding && (e = {
-      ...e,
-      "--um-space-section-mobile-padding-top": this._mobilePadding.rem.top,
-      "--um-space-section-mobile-padding-right": this._mobilePadding.rem.right,
-      "--um-space-section-mobile-padding-bottom": this._mobilePadding.rem.bottom,
-      "--um-space-section-mobile-padding-left": this._mobilePadding.rem.left
-    }), e;
-  }
-  headerStyles() {
-    let e = {};
-    return this._withoutHeader && (e = {
-      ...e,
-      display: "none"
-    }), e;
-  }
-  footerStyles() {
-    let e = {};
-    return this._withoutFooter && (e = {
-      ...e,
-      display: "none"
-    }), e;
-  }
-  header() {
-    return l`
-            <div
-                part="section-header"
-                class="section__header"
-                style="${h(this.headerStyles())}"
-                >
-                <div class="header">
-                    <slot
-                        name="toolbar"
-                        @slotchange=${this.handleSlotchange}
-                        >
-                    </slot>
-                    <div part="header__main" class="header-main">
-                        <div class="title" part="header-title">
-                            <slot 
-                                name="title" 
-                                @slotchange=${this.handleSlotchange}
-                                >
-                            </slot>
-                        </div>
-                        <div class="header__link" part="header-link">
-                            <slot 
-                                name="header-link" 
-                                @slotchange=${this.handleSlotchange}
-                                >
-                            </slot>
-                        </div>
-                    </div>
-                    <slot 
-                        name="subtitle" 
-                        @slotchange=${this.handleSlotchange}
-                        >
-                    </slot>
-                    <slot 
-                        name="description" 
-                        @slotchange=${this.handleSlotchange}
-                        >
-                    </slot>
-                </div>
-            </div>
+    sectionStyles() {
+        let styles = {};
+        if (this.spacing) {
+            styles = {
+                ...styles,
+                '--umg-space-grid-vertical-desktop': this.spacing,
+            };
+        }
+        if (this.mobileSpacing) {
+            styles = {
+                ...styles,
+                '--umg-space-grid-vertical-mobile': this.mobileSpacing,
+            };
+        }
+        return styles;
+    }
+    sectionAs() {
+        if (this.as === 'section') {
+            return html `
+                <section
+                    class="section"
+                    style="${styleMap(this.sectionStyles())}"
+                    part="section"
+                    >
+                    <slot></slot>
+                    <slot name="content"></slot>
+                </section>
             `;
-  }
-  footer() {
-    return l`
-            <div
-                part="section_footer"
-                class="section__footer"
-                style="${h(this.footerStyles())}"
-                >
-                <div class="footer">
-                    <div class="footer__link" part="footer-link">
-                        <slot
-                            name="footer-link"
-                            @slotchange=${this.handleSlotchange}
-                            >
-                        </slot>
-                    </div>
-                </div>
-            </div>
-        `;
-  }
-  render() {
-    return l`
-            <section
-                class="${p(this.sectionClasses())}"
-                style="${h(this.sectionStyles())}"
-                part="section"
-                >
+        }
+        else if (this.as === 'header') {
+            return html `
+                <header
+                    class="section"
+                    style="${styleMap(this.sectionStyles())}"
+                    part="header"
+                    >
+                    <slot></slot>
+                    <slot name="content"></slot>
+                </header>
+            `;
+        }
+        else if (this.as === 'footer') {
+            return html `
+                <footer
+                    class="section"
+                    style="${styleMap(this.sectionStyles())}"
+                    part="footer"
+                    >
+                    <slot></slot>
+                    <slot name="content"></slot>
+                </footer>
+            `;
+        }
+        else {
+            return html `
                 <div
-                    class="section__inner${p(this.sectionInnerClasses())}"
-                    part="section-inner"
+                    class="section"
+                    style="${styleMap(this.sectionStyles())}"
+                    part="section"
                     >
-                    ${this.header()}
-                    <div
-                        class="section__content"
-                        part="section-content"
-                        >
-                        <slot name="content"></slot>
-                    </div>
-                    ${this.footer()}
+                    <slot></slot>
+                    <slot name="content"></slot>
                 </div>
-            </section>
-      `;
-  }
+            `;
+        }
+    }
+    render() {
+        return html `
+            ${this.sectionAs()}
+        `;
+    }
 };
-t.styles = y([
-  w,
-  g`
+Section.styles = mergeStyles([
+    global,
+    section,
+    css `
             :host {
                 display: block;
                 width: 100%;
             }
-
-            /* Layout */
-            .section {
-                margin: 0 auto;
-                margin-top: var(--um-space-section-margin-top, 0);
-                margin-bottom: var(--um-space-section-margin-bottom, 0);
-                max-width: var(--um-size-page-width, 75rem);
-                width: 100%;
-            }
-
-            .section__inner {
-                color: rgb(var(--um-color-section-text, var(--um-color-page-text, var(--um-color-base-text))), 1);
-                background-color: rgb(var(--um-color-section-bg, var(--um-color-page-bg, var(--um-color-base-bg))), 1);
-            }
-
-            /* Section widths */
-
-            /* Outer section width */
-            .section.section-width--full-width,
-            .section.section-width--full-bleed {
-                max-width: 100%;
-            }
-
-            /* Content areas width */
-            .section__header,
-            .section__content,
-            .section__footer {
-                margin: 0 auto;
-                max-width:  var(--um-size-page-width, 75rem);
-                width: 100%;
-            }
-
-            /* Content areas page width */
-            .section-inner-width--page-width .section__header,
-            .section-inner-width--page-width .section__content,
-            .section-inner-width--page-width .section__footer {
-                margin: 0 auto;
-                max-width:  var(--um-size-page-width, 75rem);
-                width: 100%;
-            }
-
-            /* Content only 100% */
-            .section-inner-width--full-width .section__content,
-            .section-inner-width--full-bleed .section__content {
-                max-width: 100%;
-            }
-
-             /* Content all areas 100% width */
-            .section-inner-width--full-bleed .section__header,
-            .section-inner-width--full-bleed .section__content,
-            .section-inner-width--full-bleed .section__footer,
-            .section-inner-width--full-width .section__header,
-            .section-inner-width--full-width .section__content,
-            .section-inner-width--full-width .section__footer {
-                margin: 0 auto;
-                max-width:  var(--um-size-max-section-width, var(--um-size-max-page-width));
-                width: 100%;
-            }
-            
-            /* Header */
-            .header {
-                display: flex;
-                flex-direction: column;
-                gap: var(--um--space-16, 1rem);
-                padding-top: var(--um-space-section-padding-top, 1.5rem);
-                padding-bottom: var(--um-space-32, 2rem);
-            }
-            @media only screen and (max-width: 48rem) {
-                .header {
-                    padding-top: var(--um-space-section-mobile-padding-top, 1.5rem);
-                }
-            }
-            
-            .header-main {
-                display: flex;
-                align-items: center;
-                column-gap: var(--um-space-16, 1rem);
-                row-gap: var(--um-space-12, 0.75rem);
-                flex-wrap: wrap;
-            }
-            .header-main .title {
-                flex: 1;
-            }
-            
-            @media screen and (max-width: 48rem) {
-                .header-main .title {
-                    flex: 1 0 100%;
-                }
-            }
-            
-            /* Compact header */
-            .section--compact-header .header {
-                gap: 0;
-                padding-bottom: var(--um-space-12, 0.75rem);
-            }
-            
-            /* Footer */
-            .footer {
-                display: flex;
-                justify-content: center;
-                padding-top: var(--um-space-32, 2rem);
-                padding-bottom: var(--um-space-section-padding-bottom, 1.5rem);
-            }
-            @media only screen and (max-width: 48rem) {
-                .footer {
-                    padding-bottom: var(--um-space-section-mobile-padding-bottom, 1.5rem);
-                }
-            }
-
-            /* Empty header and footer */
-            .section--without-header .section__header,
-            .section--without-footer .section__footer {
-                display: none;
-            }
-
-            /* Padding states */
-            .section__inner > * {
-                padding-left: var(--um-space-section-padding-left, 1.5rem);
-                padding-right: var(--um-space-section-padding-right, 1.5rem);
-            }
-            @media only screen and (max-width: 48rem) {
-                .section__inner > * {
-                    padding-left: var(--um-space-section-mobile-padding-left, 1rem);
-                    padding-right: var(--um-space-section-mobile-padding-right, 1rem);
-                }
-            }
-
-            .section--without-header :not(.section-inner-width--full-bleed) .section__content {
-                padding-top: var(--um-space-section-padding-top, 1.5rem);
-            }
-            .section--without-footer :not(.section-inner-width--full-bleed) .section__content {
-                padding-bottom: var(--um-space-section-padding-bottom, 1.5rem);
-            }
-            @media only screen and (max-width: 48rem) {
-                .section--without-header :not(.section-inner-width--full-bleed, .section-inner--bleed-content) .section__content {
-                    padding-top: var(--um-space-section-mobile-padding-top, 1.5rem);
-                }
-                .section--without-footer :not(.section-inner-width--full-bleed, .section-inner--bleed-content) .section__content {
-                    padding-bottom: var(--um-space-section-mobile-padding-bottom, 1.5rem);
-                }
-            }
-
-            /* Header and footer always padded */
-            .section-inner-width--full-bleed .section__header,
-            .section-inner-width--full-bleed .section__footer {
-                padding-left: var(--um-space-section-padding-left, 1.5rem);
-                padding-right: var(--um-space-section-padding-right, 1.5rem);
-            }
-            @media only screen and (max-width: 48rem) {
-                .section-inner-width--full-bleed .section__header,
-                .section-inner-width--full-bleed .section__footer {
-                    padding-left: var(--um-space-section-mobile-padding-left, 1rem);
-                    padding-right: var(--um-space-section-mobile-padding-right, 1rem);
-                }
-            }
-
-            /* All outer page values - mobile content expands full bleed on sides */
-            @media only screen and (max-width: 48.06rem) {
-                .section-inner--bleed-content .section__content {
-                    padding-top: 0;
-                    padding-right: 0;
-                    padding-bottom: 0;
-                    padding-left: 0;
-                }
-            }
-
-            /* Full bleed inner section - remove all content padding */
-            .section-inner-width--full-bleed .section__content {
-                padding: 0;
-            }
-        `
+        `,
 ]);
-i([
-  o()
-], t.prototype, "outerWidth", 2);
-i([
-  o()
-], t.prototype, "innerWidth", 2);
-i([
-  o({ type: Number })
-], t.prototype, "maxInnerWidth", 2);
-i([
-  o({ type: Boolean })
-], t.prototype, "compactHeader", 2);
-i([
-  o({ type: Boolean })
-], t.prototype, "mobileBleed", 2);
-i([
-  o()
-], t.prototype, "mobilePadding", 2);
-i([
-  o()
-], t.prototype, "paddingTop", 2);
-i([
-  o()
-], t.prototype, "paddingBottom", 2);
-i([
-  o()
-], t.prototype, "paddingLeft", 2);
-i([
-  o()
-], t.prototype, "paddingRight", 2);
-i([
-  o()
-], t.prototype, "colorBg", 2);
-i([
-  o()
-], t.prototype, "colorText", 2);
-i([
-  m()
-], t.prototype, "_withoutHeader", 2);
-i([
-  m()
-], t.prototype, "_withoutFooter", 2);
-i([
-  m()
-], t.prototype, "_mobilePadding", 2);
-t = i([
-  f(`${S}-section`)
-], t);
-export {
-  t as Section
-};
+__decorate([
+    property()
+], Section.prototype, "as", void 0);
+__decorate([
+    property()
+], Section.prototype, "spacing", void 0);
+__decorate([
+    property()
+], Section.prototype, "mobileSpacing", void 0);
+Section = __decorate([
+    customElement(`${prefix}-section`)
+], Section);
+
+export { Section };
+//# sourceMappingURL=section.js.map

package/dist/components/section/section.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"section.js","sources":["../../../src/components/section/section.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;AAaA,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,CAAA;AAIpB,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU,CAAA;AAAhC,IAAA,WAAA,GAAA;;QAGH,IAAE,CAAA,EAAA,GAAG,SAAS,CAAA;KA6FjB;IArFG,aAAa,GAAA;QACT,IAAI,MAAM,GAAG,EAAE,CAAA;AAEf,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;AAEd,YAAA,MAAM,GAAG;AACL,gBAAA,GAAG,MAAM;gBACT,mCAAmC,EAAE,IAAI,CAAC,OAAO;aACpD,CAAA;SACJ;AACD,QAAA,IAAI,IAAI,CAAC,aAAa,EAAE;AAEpB,YAAA,MAAM,GAAG;AACL,gBAAA,GAAG,MAAM;gBACT,kCAAkC,EAAE,IAAI,CAAC,aAAa;aACzD,CAAA;SACJ;AAED,QAAA,OAAO,MAAM,CAAA;KAChB;IAED,SAAS,GAAA;AACL,QAAA,IAAI,IAAI,CAAC,EAAE,KAAK,SAAS,EAAE;AACvB,YAAA,OAAO,IAAI,CAAA,CAAA;;;AAGM,2BAAA,EAAA,QAAQ,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAA;;;;;;aAM9C,CAAA;SACJ;AAAM,aAAA,IAAI,IAAI,CAAC,EAAE,KAAK,QAAQ,EAAE;AAC7B,YAAA,OAAO,IAAI,CAAA,CAAA;;;AAGM,2BAAA,EAAA,QAAQ,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAA;;;;;;aAM9C,CAAA;SACJ;AAAM,aAAA,IAAI,IAAI,CAAC,EAAE,KAAK,QAAQ,EAAE;AAC7B,YAAA,OAAO,IAAI,CAAA,CAAA;;;AAGM,2BAAA,EAAA,QAAQ,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAA;;;;;;aAM9C,CAAA;SACJ;aAAM;AACH,YAAA,OAAO,IAAI,CAAA,CAAA;;;AAGM,2BAAA,EAAA,QAAQ,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAA;;;;;;aAM9C,CAAA;SACJ;KACJ;IAED,MAAM,GAAA;AACF,QAAA,OAAO,IAAI,CAAA,CAAA;cACL,IAAI,CAAC,SAAS,EAAE,CAAA;SACrB,CAAA;KACJ;;AAEM,OAAM,CAAA,MAAA,GAAG,WAAW,CAAC;IACxB,MAAM;IACN,OAAO;AACP,IAAA,GAAG,CAAA,CAAA;;;;;AAKF,QAAA,CAAA;AACJ,CAAA,CAAC,CAAA;AA5FF,UAAA,CAAA;AADC,IAAA,QAAQ,EAAE;AACG,CAAA,EAAA,OAAA,CAAA,SAAA,EAAA,IAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGd,UAAA,CAAA;AADC,IAAA,QAAQ,EAAE;AACgB,CAAA,EAAA,OAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAG3B,UAAA,CAAA;AADC,IAAA,QAAQ,EAAE;AACsB,CAAA,EAAA,OAAA,CAAA,SAAA,EAAA,eAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AATxB,OAAO,GAAA,UAAA,CAAA;AAFnB,IAAA,aAAa,CAAC,CAAA,EAAG,MAAM,CAAA,QAAA,CAAU,CAAC;AAEtB,CAAA,EAAA,OAAO,CAgGnB;;;;"}

package/dist/components/section/styles/block.d.ts

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

package/dist/components/section/styles/block.d.ts.map

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

package/dist/components/section/styles/block.js

@@ -0,0 +1,19 @@
+import { css } from 'lit';
+
+const block = css `
+
+    /* Colour */
+    .section-block {
+        color: var(--umg-color-base-text);
+        background-color: var(--umg-color-base-background);
+    }
+    @supports (color: rgb(from white r g b)) {
+        .section-block {
+            color: rgb(from var(--umg-color-base-text) r g b / alpha);
+            background-color: rgb(from var(--umg-color-base-background) r g b / alpha);
+        }
+    }
+`;
+
+export { block };
+//# sourceMappingURL=block.js.map

package/dist/components/section/styles/block.js.map

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

package/dist/components/section/styles/content.d.ts

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

package/dist/components/section/styles/content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"content.d.ts","sourceRoot":"","sources":["../../../../src/components/section/styles/content.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,yBA+EnB,CAAA"}

package/dist/components/section/styles/content.js

@@ -0,0 +1,85 @@
+import { css } from 'lit';
+
+const content = css `
+
+    .section-content {
+        margin-top: 0;
+        margin-right: auto;
+        margin-bottom: 0;
+        margin-left: auto;
+        max-width: var(--umg-size-content-max-width, 75rem);
+    }
+    
+    /* Content width */
+    .section-content--page-width {
+        max-width: var(--umg-size-content-max-width, 75rem);
+    }
+    .section-content--full-width,
+    .section-content--side-bleed:not(.section-content--page-width),
+    .section-content--full-bleed:not(.section-content--page-width) {
+        max-width:  var(--umg-size-screen-max-width, 100%);
+    }
+
+    /* Content spacing */
+    .section-content {
+        display: flex;
+        flex-direction: column;
+        gap: var(--umg-space-grid-vertical-desktop);
+    }
+    @media screen and (max-width: 48rem) {
+        .section-content {
+            gap: var(--umg-space-grid-vertical-mobile);
+        }
+    }
+
+    @media only screen and (min-width: 48.06rem) {
+        .section-content--padded {
+            padding-top: var(--umg-space-block-top-padding, 0);
+            padding-bottom: var(--umg-space-block-bottom-padding, 2rem);
+            padding-left: var(--umg-space-base-side-padding, 1.5rem);
+            padding-right: var(--umg-space-base-side-padding, 1.5rem);
+        }
+        .section-content--side-bleed {
+            padding-top: var(--umg-space-block-top-padding, 0);
+            padding-bottom: var(--umg-space-block-bottom-padding, 2rem);
+            padding-left: 0;
+            padding-right: 0;
+        }
+        .section-content.section-content--full-bleed {
+            padding: 0;
+        }
+
+        .section-content--center {
+            display: flex;
+            justify-content: center;
+            text-align: center;
+        }
+    }
+
+    @media only screen and (max-width: 48rem) {
+        .section-content--mobile-padded {
+            padding-top: var(--umg-space-block-top-padding-mobile, 0);
+            padding-bottom: var(--umg-space-block-bottom-padding-mobile, 1.5rem);
+            padding-left: var(--umg-space-base-side-padding-mobile, 1.5rem);
+            padding-right: var(--umg-space-base-side-padding-mobile, 1.5rem);
+        }
+        .section-content--mobile-side-bleed {
+            padding-top: var(--umg-space-block-top-padding-mobile, 0);
+            padding-bottom: var(--umg-space-block-bottom-padding-mobile, 1.5rem);
+            padding-left: 0;
+            padding-right: 0;
+        }
+        .section-content.section-content--mobile-full-bleed {
+            padding: 0;
+        }
+
+        .section-content--mobile-center {
+            display: flex;
+            justify-content: center;
+            text-align: center;
+        }
+    }
+`;
+
+export { content };
+//# sourceMappingURL=content.js.map

package/dist/components/section/styles/content.js.map

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

package/dist/components/section/styles/section.d.ts

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

package/dist/components/section/styles/section.d.ts.map

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