@pushengineering/umg-web-components 2.0.0

package/dist/packages/web-components/components/box/box.js

@@ -0,0 +1,208 @@
+import "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/reactive-element.js";
+import { html as h } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/lit-html.js";
+import { LitElement as l } from "../../../../node_modules/.pnpm/lit-element@4.0.4/node_modules/lit-element/lit-element.js";
+import { customElement as x } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/custom-element.js";
+import { property as d } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/property.js";
+import { state as m } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/state.js";
+import { styleMap as c } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/directives/style-map.js";
+import { classMap as u } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/directives/class-map.js";
+import { mergePaddingArrays as p, paddingToRem as b, paddingToCssShorthandArray as f } from "../../scripts/utilities/paddingTransformations.js";
+import { global as v } from "../../styles/global.js";
+import { settings as _ } from "../../scripts/settings.js";
+import { mergeStyles as y } from "../../scripts/mergeStyles.js";
+import { css as P } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/css-tag.js";
+var w = Object.defineProperty, B = Object.getOwnPropertyDescriptor, i = (o, r, s, a) => {
+  for (var e = a > 1 ? void 0 : a ? B(r, s) : r, n = o.length - 1, g; n >= 0; n--)
+    (g = o[n]) && (e = (a ? g(r, s, e) : g(e)) || e);
+  return a && e && w(r, s, e), e;
+};
+const { prefix: R } = _;
+let t = class extends l {
+  constructor() {
+    super(...arguments), this.width = "expand", this.colorBlend = !1, this.blendDirection = "to-top", this.border = !1, this.borderRadius = "0";
+  }
+  firstUpdated() {
+    this._mergedPadding = p(this.getPadding()), this._mobilePadding = b(this.mobilePadding);
+  }
+  updated(o) {
+    (o.has("padding") || o.has("paddingTop") || o.has("paddingRight") || o.has("paddingBottom") || o.has("paddingLeft") || o.has("mobilePadding")) && (this._mergedPadding = p(this.getPadding()), this._mobilePadding = b(this.mobilePadding));
+  }
+  getPadding() {
+    const o = [], r = f(this.padding);
+    if (r && o.push(...o, r), (this.paddingTop || this.paddingRight || this.paddingBottom || this.paddingLeft) && o.push(...o, [
+      this.paddingTop !== void 0 ? this.paddingTop : "",
+      this.paddingRight !== void 0 ? this.paddingRight : "",
+      this.paddingBottom !== void 0 ? this.paddingBottom : "",
+      this.paddingLeft !== void 0 ? this.paddingLeft : ""
+    ]), o.length)
+      return o;
+  }
+  boxStyles() {
+    let o = {};
+    return this.maxWidth !== void 0 && this.maxWidth > 0 ? this.style.maxWidth = this.maxWidth / 16 + "rem" : this.maxWidth !== void 0 && this.maxWidth <= 0 && (this.style.maxWidth = "100%"), this.colorText && (o = {
+      ...o,
+      "--um-color-box-text": this.colorText
+    }), this.colorBg && (o = {
+      ...o,
+      "--um-color-box-bg": this.colorBg
+    }), this.opacity !== void 0 && (o = {
+      ...o,
+      "--um-opacity-box-bg": this.opacity
+    }), this.borderRadius !== "0" && (o = {
+      ...o,
+      "--um-border-box-radius": "var(--um-border-radius-" + this.borderRadius + ")"
+    }), this._mergedPadding && (o = {
+      ...o,
+      "--um-space-box-padding-top": this._mergedPadding.unitless.top,
+      "--um-space-box-padding-right": this._mergedPadding.unitless.right,
+      "--um-space-box-padding-bottom": this._mergedPadding.unitless.bottom,
+      "--um-space-box-padding-left": this._mergedPadding.unitless.left,
+      "--um-space-box-padding-top-rem": this._mergedPadding.rem.top,
+      "--um-space-box-padding-right-rem": this._mergedPadding.rem.right,
+      "--um-space-box-padding-bottom-rem": this._mergedPadding.rem.bottom,
+      "--um-space-box-padding-left-rem": this._mergedPadding.rem.left
+    }), this._mobilePadding && (o = {
+      ...o,
+      "--um-space-box-mobile-padding": this._mobilePadding
+    }), o;
+  }
+  boxClasses() {
+    const o = {};
+    return this.colorBlend && (o["box--gradient"] = !0, o["box--gradient-" + this.blendDirection] = !0), this._mergedPadding ? o["box--responsive-padding"] = !0 : o["box--fixed-padding"] = !0, this.border && (o["box--border"] = !0), this.borderRadius !== "0" && (o["box--border-radius"] = !0), o;
+  }
+  render() {
+    return h`
+            <div
+                class="box${u(this.boxClasses())}"
+                style="${c(this.boxStyles())}"
+                part="box"
+                >
+                <div class="box__content" part="box-content">
+                    <slot></slot>
+                </div>
+            </div>
+        `;
+  }
+};
+t.styles = y([
+  v,
+  P`
+            :host {
+                display: block;
+                width: var(--um-size-box-width, 100%);
+            }
+            :host([width=shrink]) {
+                width: fit-content;
+            }
+            :host([width=auto]) {
+                width: auto;
+            }
+            .box {
+                height: 100%;
+            }
+            .box--border {
+                border: rgb(var(--um-color-border, 235,235,235)) var(--um-border-box-width, 0.0625rem) solid;
+            }
+            .box--border-radius {
+                border-radius: var(--um-border-box-radius, 0);
+                overflow: hidden;
+            }
+            .box__content {
+                color: rgba(var(--um-color-box-text, var(--um-color-section-text, 0,0,0)), 1);
+                background-color: rgba(var(--um-color-box-bg, var(--um-color-section-bg, 245,245,245)), var(--um-opacity-box-bg, 1));
+                height: 100%;
+            }
+
+            /* Gradient background */
+            .box--gradient.box--gradient-to-top .box__content {
+                background-image: linear-gradient(to top, rgb(var(--um-color-box-bg), 1), rgb(var(--um-color-box-bg), var(--um-opacity-box-bg, 1)));
+            }
+            .box--gradient.box--gradient-to-bottom .box__content {
+                background-image: linear-gradient(to bottom, rgb(var(--um-color-box-bg), 1), rgb(var(--um-color-box-bg), var(--um-opacity-box-bg, 1)));
+            }
+            .box--gradient.box--gradient-to-left .box__content {
+                background-image: linear-gradient(to left, rgb(var(--um-color-box-bg), 1), rgb(var(--um-color-box-bg), var(--um-opacity-box-bg, 1)));
+            }
+            .box--gradient.box--gradient-to-right .box__content {
+                background-image: linear-gradient(to right, rgb(var(--um-color-box-bg), 1), rgb(var(--um-color-box-bg), var(--um-opacity-box-bg, 1)));
+            }
+
+            /* responsive padding */
+            .box--responsive-padding .box__content {
+                padding-top: clamp(1rem, 100vw * 0.08, var(--um-space-box-padding-top-rem));
+                padding-right: clamp(1rem, 100vw * 0.08, var(--um-space-box-padding-right-rem));
+                padding-bottom: clamp(1rem, 100vw * 0.08, var(--um-space-box-padding-bottom-rem));
+                padding-left: clamp(1rem, 100vw * 0.08, var(--um-space-box-padding-left-rem));
+            }
+
+            /* Fixed padding */
+            .box--fixed-padding .box__content {
+                padding: var(--um-space-box-padding, 0.5rem);
+            }
+
+            @media screen and (max-width: 48rem) {
+                .box__content,
+                .box--responsive-padding .box__content,
+                .box--fixed-padding .box__content {
+                    padding: var(--um-space-box-mobile-padding, 0.5rem);
+                }
+            }
+        `
+]);
+i([
+  d()
+], t.prototype, "width", 2);
+i([
+  d({ type: Number })
+], t.prototype, "maxWidth", 2);
+i([
+  d()
+], t.prototype, "padding", 2);
+i([
+  d()
+], t.prototype, "mobilePadding", 2);
+i([
+  d()
+], t.prototype, "paddingTop", 2);
+i([
+  d()
+], t.prototype, "paddingRight", 2);
+i([
+  d()
+], t.prototype, "paddingBottom", 2);
+i([
+  d()
+], t.prototype, "paddingLeft", 2);
+i([
+  d()
+], t.prototype, "colorText", 2);
+i([
+  d()
+], t.prototype, "colorBg", 2);
+i([
+  d({ type: Boolean })
+], t.prototype, "colorBlend", 2);
+i([
+  d()
+], t.prototype, "blendDirection", 2);
+i([
+  d({ type: Boolean })
+], t.prototype, "border", 2);
+i([
+  d()
+], t.prototype, "borderRadius", 2);
+i([
+  d()
+], t.prototype, "opacity", 2);
+i([
+  m()
+], t.prototype, "_mergedPadding", 2);
+i([
+  m()
+], t.prototype, "_mobilePadding", 2);
+t = i([
+  x(`${R}-box`)
+], t);
+export {
+  t as Box
+};

package/dist/packages/web-components/components/button/button.js

@@ -0,0 +1,336 @@
+import "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/reactive-element.js";
+import { html as r } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/lit-html.js";
+import { LitElement as h } from "../../../../node_modules/.pnpm/lit-element@4.0.4/node_modules/lit-element/lit-element.js";
+import { customElement as m } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/custom-element.js";
+import { property as n } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/property.js";
+import { ifDefined as d } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/directives/if-defined.js";
+import { classMap as p } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/directives/class-map.js";
+import { styleMap as c } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/directives/style-map.js";
+import { global as g } from "../../styles/global.js";
+import { buttonState as f } from "../../styles/button.js";
+import { settings as y } from "../../scripts/settings.js";
+import { mergeStyles as v } from "../../scripts/mergeStyles.js";
+import { css as x } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/css-tag.js";
+var w = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, e = (o, a, l, s) => {
+  for (var i = s > 1 ? void 0 : s ? _(a, l) : a, u = o.length - 1, b; u >= 0; u--)
+    (b = o[u]) && (i = (s ? b(a, l, i) : b(i)) || i);
+  return s && i && w(a, l, i), i;
+};
+const { prefix: z } = y;
+let t = class extends h {
+  constructor() {
+    super(), this.as = "button", this.type = "button", this.for = void 0, this.clickAction = void 0, this.url = void 0, this.target = "_self", this.size = "medium", this.buttonStyle = "solid", this.textAlign = "center", this.disabled = !1, this.fullWidth = !1, this.extendInteraction = !1, this.extendInteractionHidden = !1, this.loading = !1, this._extendedInteraction();
+  }
+  async _extendedInteraction() {
+    await this.updateComplete, !this.disabled && this.as === "link" && this.url !== void 0 && this.extendInteraction && this.dispatchEvent(new CustomEvent("extend-interaction", {
+      detail: {
+        url: this.url,
+        target: this.target
+      },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  handleClick() {
+    if (!this.disabled && this.clickAction) {
+      const o = new CustomEvent(this.clickAction, {
+        bubbles: !0,
+        composed: !0
+      });
+      this.dispatchEvent(o);
+    }
+  }
+  buttonClasses() {
+    const o = {
+      "btn--plain": this.buttonStyle === "plain",
+      "btn--plain-underline": this.buttonStyle === "plain-underline",
+      "btn--outline": this.buttonStyle === "outline",
+      "btn--fullwidth": this.fullWidth,
+      "btn--extend": this.extendInteraction,
+      "btn--extend-hidden": this.extendInteractionHidden,
+      "btn--loading": this.loading
+    };
+    return o["btn--size-" + this.size] = !0, o["btn--text-align-" + this.textAlign] = !0, o;
+  }
+  buttonStyles() {
+    let o = {};
+    return this.colorText && (o = {
+      ...o,
+      "--um-color-button-primary-text": this.colorText,
+      "--um-color-button-secondary-bg": this.colorText
+    }), this.colorBg && (o = {
+      ...o,
+      "--um-color-button-primary-bg": this.colorBg,
+      "--um-color-button-secondary-text": this.colorBg
+    }), this.colorBgOpacity && (o = {
+      ...o,
+      "--um-opacity-button-bg": this.colorBgOpacity
+    }), this.borderRadius && this.borderRadius !== "0" && (o = {
+      ...o,
+      "--um-border-button-radius": "var(--um-border-radius-" + this.borderRadius + ")"
+    }), o;
+  }
+  buttonAs() {
+    if (this.as === "button" || this.url === void 0 || this.url === "")
+      return r`
+                <button
+                    type=${this.type}
+                    class="button${p(this.buttonClasses())}"
+                    style="${c(this.buttonStyles())}"
+                    aria-controls="${d(this.for)}"
+                    clickAction="${d(this.clickAction)}"
+                    ?disabled=${this.disabled}
+                    @click=${this.handleClick}
+                    part="button"
+                    >
+                    ${this.buttonContent()}
+                </button>
+            `;
+    if (this.url)
+      return r`
+                <a 
+                    href="${this.url}"
+                    class="button${p(this.buttonClasses())}"
+                    style="${c(this.buttonStyles())}"
+                    target="${this.target}"
+                    ?disabled=${this.disabled}
+                    part="button"
+                    >
+                    ${this.buttonContent()}
+                </a> 
+            `;
+  }
+  buttonContent() {
+    return this.loading ? r`
+                <slot name="label"></slot>
+                <slot>
+                    <span class="button__label">Label</span>
+                </slot>
+                <svg class="button__spinner" width="16" height="16" xmlns="http://www.w3.org/2000/svg" focusable="false" role="presentation" aria-hidden="true" viewBox="0 0 512 512">
+                    <path d="M463.9 376c7.6 4.4 17.5 1.8 21.4-6.1c17.1-34.3 26.7-73 26.7-113.9C512 120 405.9 8.8 272 .5c-8.8-.5-16 6.7-16 15.5v0c0 8.8 7.2 15.9 16 16.6C388.2 40.8 480 137.7 480 256c0 35.1-8.1 68.3-22.5 97.9c-3.9 8-1.3 17.7 6.4 22.2v0z"/>
+                </svg>
+            ` : r`
+                <span class="button__label">
+                    <slot name="label"></slot>
+                    <slot>
+                        Label
+                    </slot>
+                </span>
+                `;
+  }
+  render() {
+    return r`
+            ${this.buttonAs()}
+      `;
+  }
+};
+t.styles = v([
+  g,
+  f,
+  x`
+            /* Parent */
+            :host([fullwidth]) {
+                width: 100%;
+            }
+
+            :host([extendInteractionHidden]) {
+                display: block;
+                overflow: hidden;
+                width: 0;
+                height: 0!important;
+                margin: -1px;
+                padding: 0;
+                border: 0;
+                clip: rect(0 0 0 0);
+            }
+
+            .button {
+                line-height: 0;
+                height: var(--um-size-button-height, var(--um-space-48, 2.5rem));
+                width: var(--um-size-button-width, auto);
+            }
+
+            .button__label {
+                display: flex;
+                gap: 0.25rem;
+                align-items: center;
+                justify-content: center;
+            }
+
+            /* State */
+            .btn--outline {
+                background-color: transparent;
+                border-color: rgb(var(--um-color-button-primary-bg, var(--um-color-page-text, 62, 62, 62)), 1);
+                color: rgb(var(--um-color-button-primary-bg, var(--um-color-page-text, 62, 62, 62)), 1);
+            }
+            .btn--outline[disabled],
+            .btn--outline[disabled]:hover {
+                cursor: default;
+                color: rgb(var(--um-color-base-text-disabled,136, 136, 136), 0.7);
+                background-color: transparent;
+                border-color: rgb(var(--um-color-base-text-disabled,136, 136, 136), 0.7);
+                box-shadow: none;
+            }
+            .btn--outline:hover {
+                box-shadow: 0 0 0 0.0625rem rgb(var(--um-color-button-primary-bg, var(--um-color-page-text, 62, 62, 62)), 0.8);
+                border-color: transparent;
+            }
+            .btn--outline:focus-visible {
+                outline-offset: 3px;
+                outline: var(--um-border-width-20, 0.125rem) solid rgb(var(--um-color-button-primary-bg, var(--um-color-page-text, 62, 62, 62)),1);
+            }
+            .btn--plain, .btn--plain-underline {
+                background-color: transparent;
+                color: rgb(var(--um-color-button-primary-bg, var(--um-color-page-text, 62, 62, 62)),1);
+                border: none;
+                padding: 0;
+            }
+            .btn--plain:not(.btn--plain-underline):not([disabled]):hover {
+                text-decoration: underline;
+                text-underline-offset: 0.3rem;
+            }
+            .btn--plain-underline {
+                text-decoration: underline;
+                text-underline-offset: 0.3rem;
+                transition: text-decoration-color 0.2s;
+            }
+            .btn--plain-underline:not([disabled]):hover {
+                text-decoration-color: rgb(var(--um-color-button-primary-bg, var(--um-color-page-text, 62, 62, 62)),0.5)
+            }
+
+            /* Text alignment */
+            .btn--text-align-left .button__label  {
+                justify-content: start;
+            }
+            .btn--text-align-center .button__label  {
+                justify-content: center;
+            }
+            .btn--text-align-right .button__label  {
+                justify-content: end;
+            }
+
+            /* Width */
+            .btn--fullwidth {
+                width: 100%;
+            }
+
+            /* Size */
+            .btn--size-large:not(.btn--plain) {
+                --um-size-button-height: var(--um-space-48, 3rem);
+                padding: 0 var(--um-space-32, 2rem);
+            }
+            .btn--size-medium:not(.btn--plain) {
+                --um-size-button-height: var(--um-space-48, 2.5rem);
+                padding: 0 var(--um-space-20, 1.5rem);
+            }
+            .btn--size-small:not(.btn--plain) {
+                --um-size-button-height: var(--um-space-32, 2rem);
+                padding: 0 var(--um-space-12, 0.75rem);
+                font-size: var(--um-font-size-body-sm);
+                font-weight: var(--um-font-weight-regular);
+            }
+            .btn--size-slim:not(.btn--plain) {
+                --um-size-button-height: var(--um-space-24, 1.5rem);
+                font-weight: var(--um-font-weight-regular);
+                font-size: var(--um-font-size-body-xs);
+                padding: 0 var(--um-space-8, 0.5rem);
+            }
+
+            /* Behaviour */
+            .btn--extend:after,
+            .btn--extend-hidden:after {
+                content: '';
+                position:absolute;
+                top:0;
+                left:0;
+                height: 100%;
+                width: 100%;
+                z-index: 1;
+                cursor: pointer;
+            }
+
+            /* Loading state */
+            .btn--loading {
+                position: relative;
+            }
+            .btn--loading ::slotted(*),
+            .btn--loading .button__label {
+                opacity: 0;
+            }
+            .button__spinner {
+                animation-name: spin;
+                animation-duration: 500ms;
+                animation-timing-function: cubic-bezier(0, 0, 1, 1);
+                animation-iteration-count: infinite;
+                animation-direction: both;
+                fill: currentColor;
+                height: 1rem;
+                left: 50%;
+                margin: calc(var(--um-space-16, 1rem) / 2 * -1) 0 0 calc(var(--um-space-16, 1rem) / 2 * -1);
+                position: absolute;
+                top: 50%;
+                width: 1rem;
+            }
+            @keyframes spin {to{transform: rotate(1turn)}};
+        `
+]);
+e([
+  n()
+], t.prototype, "as", 2);
+e([
+  n()
+], t.prototype, "type", 2);
+e([
+  n()
+], t.prototype, "for", 2);
+e([
+  n()
+], t.prototype, "clickAction", 2);
+e([
+  n()
+], t.prototype, "url", 2);
+e([
+  n()
+], t.prototype, "target", 2);
+e([
+  n()
+], t.prototype, "size", 2);
+e([
+  n()
+], t.prototype, "buttonStyle", 2);
+e([
+  n()
+], t.prototype, "borderRadius", 2);
+e([
+  n()
+], t.prototype, "textAlign", 2);
+e([
+  n({ type: Boolean, reflect: !0 })
+], t.prototype, "disabled", 2);
+e([
+  n({ type: Boolean })
+], t.prototype, "fullWidth", 2);
+e([
+  n({ type: Boolean })
+], t.prototype, "extendInteraction", 2);
+e([
+  n({ type: Boolean })
+], t.prototype, "extendInteractionHidden", 2);
+e([
+  n()
+], t.prototype, "colorBg", 2);
+e([
+  n()
+], t.prototype, "colorBgOpacity", 2);
+e([
+  n()
+], t.prototype, "colorText", 2);
+e([
+  n({ type: Boolean })
+], t.prototype, "loading", 2);
+t = e([
+  m(`${z}-button`)
+], t);
+export {
+  t as Button
+};

package/dist/packages/web-components/components/button-group/button-group.js

@@ -0,0 +1,98 @@
+import "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/reactive-element.js";
+import { html as m } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/lit-html.js";
+import { LitElement as n } from "../../../../node_modules/.pnpm/lit-element@4.0.4/node_modules/lit-element/lit-element.js";
+import { customElement as c } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/custom-element.js";
+import { property as e } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/property.js";
+import { classMap as b } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/directives/class-map.js";
+import { global as f } from "../../styles/global.js";
+import { groupSpacing as g, groupJustify as h, groupMobileJustify as y } from "../../styles/group.js";
+import { settings as d } from "../../scripts/settings.js";
+import { mergeStyles as w } from "../../scripts/mergeStyles.js";
+import { css as k } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/css-tag.js";
+var v = Object.defineProperty, x = Object.getOwnPropertyDescriptor, r = (t, i, u, p) => {
+  for (var s = p > 1 ? void 0 : p ? x(i, u) : i, a = t.length - 1, l; a >= 0; a--)
+    (l = t[a]) && (s = (p ? l(i, u, s) : l(s)) || s);
+  return p && s && v(i, u, s), s;
+};
+const { prefix: j } = d;
+let o = class extends n {
+  constructor() {
+    super(...arguments), this.spacing = "normal", this.justify = "start", this.mobileJustify = "start", this.stack = !1, this.mobileStack = !1;
+  }
+  buttonGroupClasses() {
+    const t = {
+      "button-group": !0
+    };
+    return t["group-spacing--" + this.spacing] = !0, t["group-justify--" + this.justify] = !0, t["group-mobile-justify--" + this.mobileJustify] = !0, t["group--stack"] = this.stack, t["group--mobile-stack"] = this.mobileStack, t;
+  }
+  render() {
+    return m`
+            <div
+                part="button-group"
+                class="${b(this.buttonGroupClasses())}"
+                >
+                <slot part="button"></slot>
+            </div>
+        `;
+  }
+};
+o.styles = w([
+  f,
+  k`
+            :host([stack]), :host([mobileStack]) {
+                display: block;
+                width: var(--um-size-button-width, 100%);
+            }
+            .button-group {
+                align-items: center;
+                display: flex;
+                flex-wrap: wrap;
+                width: 100%;
+            }
+
+            @media screen and (max-width: 48rem) {
+                .button-group.group--mobile-stack {
+                    flex-direction: column;
+                }
+                .button-group.group--mobile-stack ::slotted(*) {
+                    display: block;
+                    width: 100%;
+                    --um-size-button-width: 100%
+                }
+            }
+            @media screen and (min-width: 48.06rem) {
+                .button-group.group--stack {
+                    flex-direction: column;
+                }
+                .button-group.group--stack ::slotted(*) {
+                    display: block;
+                    width: 100%;
+                    --um-size-button-width: 100%
+                }
+            }
+        `,
+  g,
+  h,
+  y
+]);
+r([
+  e()
+], o.prototype, "spacing", 2);
+r([
+  e()
+], o.prototype, "justify", 2);
+r([
+  e()
+], o.prototype, "mobileJustify", 2);
+r([
+  e({ type: Boolean })
+], o.prototype, "stack", 2);
+r([
+  e({ type: Boolean })
+], o.prototype, "mobileStack", 2);
+o = r([
+  c(`${j}-button-group`)
+], o);
+export {
+  o as ButtonGroup
+};