@pushengineering/umg-web-components 2.0.1 → 2.0.3

package/dist/components/box/box.js

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

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

@@ -0,0 +1,2 @@
+import { Box } from './box';
+export { Box };

package/dist/components/button/button.d.ts

@@ -0,0 +1,31 @@
+import { LitElement } from 'lit';
+import type { ButtonType, ButtonAs, ButtonSize, ButtonAlignLabel, ButtonStyle, LinkTarget, PaddingScale } from '../../types';
+export declare class Button extends LitElement {
+    as: ButtonAs;
+    type: ButtonType;
+    for: string | undefined;
+    clickAction?: string | undefined;
+    url?: string | undefined;
+    target: LinkTarget;
+    size: ButtonSize;
+    buttonStyle: ButtonStyle;
+    borderRadius: PaddingScale | undefined;
+    textAlign: ButtonAlignLabel;
+    disabled: boolean;
+    fullWidth: boolean;
+    extendInteraction: boolean;
+    extendInteractionHidden: boolean;
+    colorBg: string | undefined;
+    colorBgOpacity: string | undefined;
+    colorText: string | undefined;
+    loading: boolean;
+    constructor();
+    private _extendedInteraction;
+    handleClick(): void;
+    buttonClasses(): any;
+    buttonStyles(): {};
+    buttonAs(): import("lit").TemplateResult<1> | undefined;
+    buttonContent(): import("lit").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
+    static styles: import("lit").CSSResultArray;
+}

package/dist/{packages/web-components/components → components}/button/button.js

@@ -1,23 +1,20 @@
-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";
+import { css as h, LitElement as m, html as r } from "lit";
+import { customElement as g } from "lit/decorators/custom-element.js";
+import { property as n } from "lit/decorators/property.js";
+import { ifDefined as d } from "lit/directives/if-defined.js";
+import { classMap as c } from "lit/directives/class-map.js";
+import { styleMap as p } from "lit/directives/style-map.js";
+import { global as f } from "../../styles/global.js";
+import { buttonState as y } from "../../styles/button.js";
+import { settings as v } from "../../scripts/settings.js";
+import { mergeStyles as x } from "../../scripts/mergeStyles.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 {
+const { prefix: z } = v;
+let t = class extends m {
   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();
   }
@@ -75,8 +72,8 @@ let t = class extends h {
       return r`
                 <button
                     type=${this.type}
-                    class="button${p(this.buttonClasses())}"
-                    style="${c(this.buttonStyles())}"
+                    class="button${c(this.buttonClasses())}"
+                    style="${p(this.buttonStyles())}"
                     aria-controls="${d(this.for)}"
                     clickAction="${d(this.clickAction)}"
                     ?disabled=${this.disabled}
@@ -90,8 +87,8 @@ let t = class extends h {
       return r`
                 <a 
                     href="${this.url}"
-                    class="button${p(this.buttonClasses())}"
-                    style="${c(this.buttonStyles())}"
+                    class="button${c(this.buttonClasses())}"
+                    style="${p(this.buttonStyles())}"
                     target="${this.target}"
                     ?disabled=${this.disabled}
                     part="button"
@@ -124,10 +121,10 @@ let t = class extends h {
       `;
   }
 };
-t.styles = v([
-  g,
+t.styles = x([
   f,
-  x`
+  y,
+  h`
             /* Parent */
             :host([fullwidth]) {
                 width: 100%;
@@ -181,7 +178,7 @@ t.styles = v([
             }
             .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);
+                color: inherit;
                 border: none;
                 padding: 0;
             }
@@ -329,7 +326,7 @@ e([
   n({ type: Boolean })
 ], t.prototype, "loading", 2);
 t = e([
-  m(`${z}-button`)
+  g(`${z}-button`)
 ], t);
 export {
   t as Button

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

@@ -0,0 +1,2 @@
+import { Button } from './button';
+export { Button };

package/dist/components/button-group/button-group.d.ts

@@ -0,0 +1,12 @@
+import { LitElement } from 'lit';
+import type { GroupSpacing, GroupAlign } from '../../types';
+export declare class ButtonGroup extends LitElement {
+    spacing: GroupSpacing;
+    justify: GroupAlign;
+    mobileJustify: GroupAlign;
+    stack: boolean;
+    mobileStack: boolean;
+    buttonGroupClasses(): any;
+    render(): import("lit").TemplateResult<1>;
+    static styles: import("lit").CSSResultArray;
+}

package/dist/{packages/web-components/components → components}/button-group/button-group.js

@@ -1,21 +1,18 @@
-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";
+import { css as n, LitElement as m, html as c } from "lit";
+import { customElement as b } from "lit/decorators/custom-element.js";
+import { property as e } from "lit/decorators/property.js";
+import { classMap as f } from "lit/directives/class-map.js";
+import { global as g } from "../../styles/global.js";
+import { groupSpacing as h, groupJustify as y, groupMobileJustify as d } from "../../styles/group.js";
+import { settings as w } from "../../scripts/settings.js";
+import { mergeStyles as k } from "../../scripts/mergeStyles.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);
+  for (var s = p > 1 ? void 0 : p ? x(i, u) : i, l = t.length - 1, a; l >= 0; l--)
+    (a = t[l]) && (s = (p ? a(i, u, s) : a(s)) || s);
   return p && s && v(i, u, s), s;
 };
-const { prefix: j } = d;
-let o = class extends n {
+const { prefix: j } = w;
+let o = class extends m {
   constructor() {
     super(...arguments), this.spacing = "normal", this.justify = "start", this.mobileJustify = "start", this.stack = !1, this.mobileStack = !1;
   }
@@ -26,19 +23,19 @@ let o = class extends n {
     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`
+    return c`
             <div
                 part="button-group"
-                class="${b(this.buttonGroupClasses())}"
+                class="${f(this.buttonGroupClasses())}"
                 >
                 <slot part="button"></slot>
             </div>
         `;
   }
 };
-o.styles = w([
-  f,
-  k`
+o.styles = k([
+  g,
+  n`
             :host([stack]), :host([mobileStack]) {
                 display: block;
                 width: var(--um-size-button-width, 100%);
@@ -71,9 +68,9 @@ o.styles = w([
                 }
             }
         `,
-  g,
   h,
-  y
+  y,
+  d
 ]);
 r([
   e()
@@ -91,7 +88,7 @@ r([
   e({ type: Boolean })
 ], o.prototype, "mobileStack", 2);
 o = r([
-  c(`${j}-button-group`)
+  b(`${j}-button-group`)
 ], o);
 export {
   o as ButtonGroup

package/dist/components/button-group/index.d.ts

@@ -0,0 +1,2 @@
+import { ButtonGroup } from './button-group';
+export { ButtonGroup };

package/dist/components/button-icon/button-icon.d.ts

@@ -0,0 +1,31 @@
+import { LitElement } from 'lit';
+import type { ButtonAs, ButtonType, LinkTarget, Icons, FontBodySize } from '../../types';
+import '../icon/';
+export declare class ButtonIcon extends LitElement {
+    as: ButtonAs;
+    for?: string | undefined;
+    clickAction?: string | undefined;
+    url?: string | undefined;
+    target: LinkTarget;
+    type: ButtonType;
+    icon: Icons;
+    size: FontBodySize;
+    extendInteraction: boolean;
+    disabled: boolean;
+    padding: string;
+    border: boolean;
+    borderRadius: string | undefined;
+    borderWidth: string | undefined;
+    colorText: string | undefined;
+    colorBg: string | undefined;
+    colorBgOpacity: string | undefined;
+    label: string;
+    constructor();
+    private _extendedInteraction;
+    handleClick(): void;
+    buttonIconClasses(): any;
+    buttonIconStyles(): {};
+    buttonAs(): import("lit").TemplateResult<1> | undefined;
+    render(): import("lit").TemplateResult<1>;
+    static styles: import("lit").CSSResultArray;
+}

package/dist/{packages/web-components/components → components}/button-icon/button-icon.js

@@ -1,24 +1,21 @@
-import "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/reactive-element.js";
-import { html as l } 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 e } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/property.js";
-import { ifDefined as b } 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 d } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/directives/style-map.js";
-import { global as f } from "../../styles/global.js";
-import { iconSize as y } from "../../styles/icon-size.js";
-import { settings as g } from "../../scripts/settings.js";
-import { mergeStyles as v } from "../../scripts/mergeStyles.js";
+import { css as h, LitElement as m, html as l } from "lit";
+import { customElement as f } from "lit/decorators/custom-element.js";
+import { property as e } from "lit/decorators/property.js";
+import { ifDefined as b } from "lit/directives/if-defined.js";
+import { classMap as d } from "lit/directives/class-map.js";
+import { styleMap as p } from "lit/directives/style-map.js";
+import { global as y } from "../../styles/global.js";
+import { iconSize as g } from "../../styles/icon-size.js";
+import { settings as v } from "../../scripts/settings.js";
+import { mergeStyles as x } from "../../scripts/mergeStyles.js";
 import "../icon/icon.js";
-import { css as x } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/css-tag.js";
-var $ = Object.defineProperty, w = Object.getOwnPropertyDescriptor, i = (t, n, a, s) => {
-  for (var r = s > 1 ? void 0 : s ? w(n, a) : n, c = t.length - 1, u; c >= 0; c--)
-    (u = t[c]) && (r = (s ? u(n, a, r) : u(r)) || r);
-  return s && r && $(n, a, r), r;
+var $ = Object.defineProperty, w = Object.getOwnPropertyDescriptor, i = (t, n, c, s) => {
+  for (var r = s > 1 ? void 0 : s ? w(n, c) : n, a = t.length - 1, u; a >= 0; a--)
+    (u = t[a]) && (r = (s ? u(n, c, r) : u(r)) || r);
+  return s && r && $(n, c, r), r;
 };
-const { prefix: I } = g;
-let o = class extends h {
+const { prefix: I } = v;
+let o = class extends m {
   constructor() {
     super(), this.as = "button", this.for = void 0, this.clickAction = void 0, this.url = void 0, this.target = "_self", this.type = "button", this.icon = "user", this.size = "xLarge", this.extendInteraction = !1, this.disabled = !1, this.padding = "", this.border = !1, this.label = "Accessible", this._extendedInteraction();
   }
@@ -69,7 +66,7 @@ let o = class extends h {
       "--um-color-button-icon-text": this.colorText
     }), this.size && (t = {
       ...t,
-      "--um-font-size-button-icon": y(this.size)
+      "--um-font-size-button-icon": g(this.size)
     }), t;
   }
   buttonAs() {
@@ -77,8 +74,8 @@ let o = class extends h {
       return l`
                 <button
                     type=${this.type}
-                    class="button-icon${p(this.buttonIconClasses())}"
-                    style="${d(this.buttonIconStyles())}"
+                    class="button-icon${d(this.buttonIconClasses())}"
+                    style="${p(this.buttonIconStyles())}"
                     ?disabled=${this.disabled}
                     aria-label=${this.label}
                     aria-controls=${b(this.for)}
@@ -98,8 +95,8 @@ let o = class extends h {
       return l`
                 <a
                     href="${this.url}"
-                    class="button-icon${p(this.buttonIconClasses())}"
-                    style="${d(this.buttonIconStyles())}"
+                    class="button-icon${d(this.buttonIconClasses())}"
+                    style="${p(this.buttonIconStyles())}"
                     target="${this.target}"
                     ?disabled=${this.disabled}
                     aria-label=${this.label}
@@ -120,9 +117,9 @@ let o = class extends h {
       `;
   }
 };
-o.styles = v([
-  f,
-  x`
+o.styles = x([
+  y,
+  h`
             :host {
                 display: inline-flex;
             }
@@ -239,7 +236,7 @@ i([
   e()
 ], o.prototype, "label", 2);
 o = i([
-  m(`${I}-button-icon`)
+  f(`${I}-button-icon`)
 ], o);
 export {
   o as ButtonIcon

package/dist/components/button-icon/index.d.ts

@@ -0,0 +1,2 @@
+import { ButtonIcon } from './button-icon';
+export { ButtonIcon };

package/dist/components/caption-card/caption-card.d.ts

@@ -0,0 +1,38 @@
+import { LitElement } from 'lit';
+import { EventManager } from '../../classes/event-manager/event-manager.js';
+import type { ContentAlign, DecimalZeroToOne, BoxPosition } from '../../types';
+import '../box/';
+import '../vertical-stack/';
+import '../popover/';
+export declare class CaptionCard extends LitElement {
+    position: BoxPosition;
+    align: ContentAlign | undefined;
+    justify: ContentAlign | undefined;
+    padding?: string | undefined;
+    mobilePadding?: string | undefined;
+    spacing?: string | undefined;
+    colorBg: string | undefined;
+    colorText: string | undefined;
+    opacityBg: string | undefined;
+    colorBlend: boolean;
+    border: boolean;
+    borderRadius: undefined | string;
+    colorOverlay: undefined | string;
+    opacityOverlay: DecimalZeroToOne;
+    cardPopover: boolean;
+    _mediaAspectRatio: undefined | string;
+    _mobileMediaAspectRatio: undefined | string;
+    _popoverVisible: boolean;
+    cardEventManager: EventManager;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _eventsHandler;
+    popoverClose(): void;
+    cardClasses(): any;
+    cardStyles(): {};
+    captionClasses(): any;
+    popoverContent(): import("lit").TemplateResult<1> | undefined;
+    render(): import("lit").TemplateResult<1>;
+    static styles: import("lit").CSSResultArray;
+}