@pushengineering/umg-web-components 2.0.1 → 2.0.3

package/dist/components/logo/logo.d.ts

@@ -0,0 +1,19 @@
+import { LitElement } from 'lit';
+import '../image/';
+export declare class Logo extends LitElement {
+    url: string;
+    height: number;
+    title: string;
+    showTitle: boolean;
+    imgSrc?: string | undefined;
+    imgSrcSet?: string | undefined;
+    imgSizes?: string | undefined;
+    imgWidth: number;
+    imgHeight: number;
+    logoStyles(): {};
+    logoClasses(): any;
+    titleClasses(): any;
+    image(): import("lit").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
+    static styles: import("lit").CSSResultArray;
+}

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

@@ -1,32 +1,29 @@
-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 c } from "../../../../node_modules/.pnpm/lit-element@4.0.4/node_modules/lit-element/lit-element.js";
-import { customElement as y } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/custom-element.js";
-import { property as o } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/property.js";
-import { ifDefined as p } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/directives/if-defined.js";
-import { classMap as n } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/directives/class-map.js";
-import { styleMap as f } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/directives/style-map.js";
-import { global as u } from "../../styles/global.js";
-import { settings as d } from "../../scripts/settings.js";
-import { mergeStyles as v } from "../../scripts/mergeStyles.js";
+import { css as c, LitElement as y, html as m } from "lit";
+import { customElement as f } from "lit/decorators/custom-element.js";
+import { property as i } from "lit/decorators/property.js";
+import { ifDefined as p } from "lit/directives/if-defined.js";
+import { classMap as n } from "lit/directives/class-map.js";
+import { styleMap as u } from "lit/directives/style-map.js";
+import { global as d } from "../../styles/global.js";
+import { settings as v } from "../../scripts/settings.js";
+import { mergeStyles as w } from "../../scripts/mergeStyles.js";
 import "../image/image.js";
-import { css as w } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/css-tag.js";
-var S = Object.defineProperty, b = Object.getOwnPropertyDescriptor, e = (i, l, g, r) => {
-  for (var s = r > 1 ? void 0 : r ? b(l, g) : l, h = i.length - 1, a; h >= 0; h--)
-    (a = i[h]) && (s = (r ? a(l, g, s) : a(s)) || s);
+var S = Object.defineProperty, b = Object.getOwnPropertyDescriptor, e = (o, l, g, r) => {
+  for (var s = r > 1 ? void 0 : r ? b(l, g) : l, h = o.length - 1, a; h >= 0; h--)
+    (a = o[h]) && (s = (r ? a(l, g, s) : a(s)) || s);
   return r && s && S(l, g, s), s;
 };
-const { prefix: $ } = d;
-let t = class extends c {
+const { prefix: $ } = v;
+let t = class extends y {
   constructor() {
     super(...arguments), this.url = "/", this.height = 80, this.title = "Logo Title", this.showTitle = !1, this.imgWidth = 80, this.imgHeight = 80;
   }
   logoStyles() {
-    let i = {};
-    return i = {
-      ...i,
+    let o = {};
+    return o = {
+      ...o,
       "--um-size-logo-height": this.height / 16 + "rem"
-    }, i;
+    }, o;
   }
   logoClasses() {
     return {
@@ -62,7 +59,7 @@ let t = class extends c {
     return m`
             <h1
                 class="logo${n(this.logoClasses())}"
-                style=${f(this.logoStyles())}
+                style=${u(this.logoStyles())}
                 part="logo"
                 >
                 <a href="${this.url}">
@@ -75,9 +72,9 @@ let t = class extends c {
       `;
   }
 };
-t.styles = v([
-  u,
-  w`
+t.styles = w([
+  d,
+  c`
             :host {
                 display: block;
             }
@@ -127,34 +124,34 @@ t.styles = v([
         `
 ]);
 e([
-  o()
+  i()
 ], t.prototype, "url", 2);
 e([
-  o({ type: Number })
+  i({ type: Number })
 ], t.prototype, "height", 2);
 e([
-  o()
+  i()
 ], t.prototype, "title", 2);
 e([
-  o({ type: Boolean })
+  i({ type: Boolean })
 ], t.prototype, "showTitle", 2);
 e([
-  o({ type: String })
+  i({ type: String })
 ], t.prototype, "imgSrc", 2);
 e([
-  o({ type: String })
+  i({ type: String })
 ], t.prototype, "imgSrcSet", 2);
 e([
-  o({ type: String })
+  i({ type: String })
 ], t.prototype, "imgSizes", 2);
 e([
-  o({ type: Number })
+  i({ type: Number })
 ], t.prototype, "imgWidth", 2);
 e([
-  o({ type: Number })
+  i({ type: Number })
 ], t.prototype, "imgHeight", 2);
 t = e([
-  y(`${$}-logo`)
+  f(`${$}-logo`)
 ], t);
 export {
   t as Logo

package/dist/components/media-gallery/index.d.ts

@@ -0,0 +1,2 @@
+import { MediaGallery } from './media-gallery';
+export { MediaGallery };

package/dist/components/media-gallery/media-gallery.d.ts

@@ -0,0 +1,14 @@
+import { LitElement } from 'lit';
+import { EventManager } from '../../classes/event-manager/event-manager.js';
+import { SlideEvent } from '../../classes/event-manager/types.js';
+import './media.js';
+export declare class MediaGallery extends LitElement {
+    _mediaItems: Array<HTMLElement>;
+    _slideItems: Array<HTMLElement>;
+    mediaEventManager: EventManager;
+    constructor();
+    protected _customEventsHandler: (e: SlideEvent) => void;
+    private _updateActiveMedia;
+    render(): import("lit").TemplateResult<1>;
+    static styles: import("lit").CSSResultArray;
+}

package/dist/{packages/web-components/components → components}/media-gallery/media-gallery.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 n } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/lit-html.js";
-import { LitElement as v } from "../../../../node_modules/.pnpm/lit-element@4.0.4/node_modules/lit-element/lit-element.js";
-import { customElement as p } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/custom-element.js";
-import { queryAssignedElements as d } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
-import { global as c } from "../../styles/global.js";
-import { settings as u } from "../../scripts/settings.js";
-import { mergeStyles as f } from "../../scripts/mergeStyles.js";
-import { EventManager as h } from "../../classes/event-manager/event-manager.js";
+import { css as n, LitElement as v, html as c } from "lit";
+import { customElement as p } from "lit/decorators/custom-element.js";
+import { queryAssignedElements as d } from "lit/decorators.js";
+import { global as u } from "../../styles/global.js";
+import { settings as h } from "../../scripts/settings.js";
+import { mergeStyles as b } from "../../scripts/mergeStyles.js";
+import { EventManager as f } from "../../classes/event-manager/event-manager.js";
 import "./media.js";
-import { css as b } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/css-tag.js";
-var g = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, l = (t, e, r, a) => {
-  for (var i = a > 1 ? void 0 : a ? _(e, r) : e, m = t.length - 1, o; m >= 0; m--)
-    (o = t[m]) && (i = (a ? o(e, r, i) : o(i)) || i);
+var g = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, o = (t, e, r, a) => {
+  for (var i = a > 1 ? void 0 : a ? _(e, r) : e, m = t.length - 1, l; m >= 0; m--)
+    (l = t[m]) && (i = (a ? l(e, r, i) : l(i)) || i);
   return a && i && g(e, r, i), i;
 };
-const { prefix: y } = u;
+const { prefix: y } = h;
 let s = class extends v {
   constructor() {
-    super(), this.mediaEventManager = new h(this), this._customEventsHandler = (t) => {
+    super(), this.mediaEventManager = new f(this), this._customEventsHandler = (t) => {
       t.type === "active-media" && this._updateActiveMedia(t.detail.mediaId);
     }, this.mediaEventManager.addEventListener("active-media", this._customEventsHandler);
   }
@@ -27,7 +24,7 @@ let s = class extends v {
     });
   }
   render() {
-    return n`
+    return c`
             <div class="media-gallery">
                 <div class="media-main">
                     <div class="media-stack">
@@ -41,9 +38,9 @@ let s = class extends v {
       `;
   }
 };
-s.styles = f([
-  c,
-  b`
+s.styles = b([
+  u,
+  n`
             .media-main {
                 padding-bottom: var(--um-space-grid-desktop-vertical, var(--um-space-16, 1rem));
             }
@@ -68,13 +65,13 @@ s.styles = f([
             }
         `
 ]);
-l([
+o([
   d({ slot: "media", selector: "umg-media" })
 ], s.prototype, "_mediaItems", 2);
-l([
+o([
   d({ slot: "thumbnail-slider", selector: "umg-thumbnail-slider" })
 ], s.prototype, "_slideItems", 2);
-s = l([
+s = o([
   p(`${y}-media-gallery`)
 ], s);
 export {

package/dist/components/media-gallery/media.d.ts

@@ -0,0 +1,5 @@
+import { LitElement } from 'lit';
+export declare class Media extends LitElement {
+    mediaId: string;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/media-gallery/media.js

@@ -0,0 +1,29 @@
+import { LitElement as f, html as l } from "lit";
+import { property as a } from "lit/decorators/property.js";
+import { customElement as c } from "lit/decorators/custom-element.js";
+import { settings as u } from "../../scripts/settings.js";
+var d = Object.defineProperty, v = Object.getOwnPropertyDescriptor, n = (i, e, o, t) => {
+  for (var r = t > 1 ? void 0 : t ? v(e, o) : e, s = i.length - 1, m; s >= 0; s--)
+    (m = i[s]) && (r = (t ? m(e, o, r) : m(r)) || r);
+  return t && r && d(e, o, r), r;
+};
+const { prefix: _ } = u;
+let p = class extends f {
+  constructor() {
+    super(...arguments), this.mediaId = "";
+  }
+  render() {
+    return l`
+            <slot></slot>
+        `;
+  }
+};
+n([
+  a()
+], p.prototype, "mediaId", 2);
+p = n([
+  c(`${_}-media`)
+], p);
+export {
+  p as Media
+};

package/dist/components/media-text/index.d.ts

@@ -0,0 +1,2 @@
+import { MediaText } from './media-text';
+export { MediaText };

package/dist/components/media-text/media-text.d.ts

@@ -0,0 +1,30 @@
+import { LitElement } from 'lit';
+import { BoxHeight, MediaSize } from '../../types';
+import '../box/';
+import '../vertical-stack/';
+export declare class MediaText extends LitElement {
+    setSizeBy: string;
+    mediaHeight: BoxHeight;
+    mediaWidth: MediaSize;
+    mediaOnRight: boolean;
+    blendMedia: boolean;
+    alignContent: string;
+    mobileAlignContent: string;
+    justifyContent: string;
+    mobileJustifyContent: string;
+    spacing: string;
+    padding: string | undefined;
+    mobilePadding: string | undefined;
+    paddingTop: string | undefined;
+    paddingRight: string | undefined;
+    paddingBottom: string | undefined;
+    paddingLeft: string | undefined;
+    colorBg: string | undefined;
+    colorText: string | undefined;
+    opacity: string | undefined;
+    gridClasses(): any;
+    contentStackClasses(): any;
+    mediaTextStyles(): {};
+    render(): import("lit").TemplateResult<1>;
+    static styles: import("lit").CSSResultArray;
+}

package/dist/{packages/web-components/components → components}/media-text/media-text.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 p } 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 c } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/custom-element.js";
-import { property as a } 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 g } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/directives/class-map.js";
-import { styleMap as x } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/directives/style-map.js";
+import { css as p, LitElement as h, html as c } from "lit";
+import { customElement as x } from "lit/decorators/custom-element.js";
+import { property as a } from "lit/decorators/property.js";
+import { ifDefined as d } from "lit/directives/if-defined.js";
+import { classMap as g } from "lit/directives/class-map.js";
+import { styleMap as y } from "lit/directives/style-map.js";
 import "../box/box.js";
 import "../vertical-stack/vertical-stack.js";
 import { global as _ } from "../../styles/global.js";
-import { mediaSize as y } from "./styles/media-size.js";
-import { settings as f } from "../../scripts/settings.js";
+import { mediaSize as f } from "./styles/media-size.js";
+import { settings as b } from "../../scripts/settings.js";
 import { mergeStyles as u } from "../../scripts/mergeStyles.js";
-import { css as b } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/css-tag.js";
-var v = Object.defineProperty, C = Object.getOwnPropertyDescriptor, e = (i, r, s, n) => {
-  for (var o = n > 1 ? void 0 : n ? C(r, s) : r, m = i.length - 1, l; m >= 0; m--)
-    (l = i[m]) && (o = (n ? l(r, s, o) : l(o)) || o);
-  return n && o && v(r, s, o), o;
+var v = Object.defineProperty, C = Object.getOwnPropertyDescriptor, e = (i, n, s, r) => {
+  for (var o = r > 1 ? void 0 : r ? C(n, s) : n, m = i.length - 1, l; m >= 0; m--)
+    (l = i[m]) && (o = (r ? l(n, s, o) : l(o)) || o);
+  return r && o && v(n, s, o), o;
 };
-const { prefix: w } = f;
+const { prefix: $ } = b;
 let t = class extends h {
   constructor() {
     super(...arguments), this.setSizeBy = "width", this.mediaHeight = "adapt", this.mediaWidth = "medium", this.mediaOnRight = !1, this.blendMedia = !1, this.alignContent = "center", this.mobileAlignContent = "center", this.justifyContent = "center", this.mobileJustifyContent = "center", this.spacing = "8";
@@ -40,10 +37,10 @@ let t = class extends h {
     }, i;
   }
   render() {
-    return p`
+    return c`
             <div
                 class="media-text"
-                style="${x(this.mediaTextStyles())}"
+                style="${y(this.mediaTextStyles())}"
                 part="media-text"
                 >
                 <div
@@ -68,10 +65,11 @@ let t = class extends h {
                             paddingLeft="${d(this.paddingLeft)}"
                             paddingRight="${d(this.paddingRight)}"
                             paddingBottom="${d(this.paddingBottom)}"
+                            adaptivePadding
                             colortext="${d(this.colorText)}"
                             colorBg="${d(this.colorBg)}"
                             opacity="${d(this.opacity)}"
-                            width="expand"
+                            width="fill"
                             exportparts="box,box-content"
                             >
                             <umg-vertical-stack
@@ -93,8 +91,8 @@ let t = class extends h {
 };
 t.styles = u([
   _,
-  y,
-  b`
+  f,
+  p`
             :host {
                 display: block;
                 width: 100%;
@@ -196,18 +194,6 @@ t.styles = u([
                 .media-right .media-text__container {
                     flex-direction: row-reverse;
                 }
-                /* Constrain text width */
-                .media-text__grid:not(.media-text__grid--2Xlarge, .media-text__grid--xLarge) .justify--start.media-text__content-stack {
-                    max-width: 80%;
-                }
-                .media-text__grid:not(.media-text__grid--2Xlarge, .media-text__grid--xLarge) .justify--end.media-text__content-stack {
-                    max-width: 80%;
-                    margin-left: auto;
-                }
-                .media-text__grid:not(.media-text__grid--2Xlarge, .media-text__grid--xLarge) .justify--center.media-text__content-stack {
-                    max-width: 80%;
-                    margin: 0 auto;
-                }
             }
         `
 ]);
@@ -269,7 +255,7 @@ e([
   a()
 ], t.prototype, "opacity", 2);
 t = e([
-  c(`${w}-media-text`)
+  x(`${$}-media-text`)
 ], t);
 export {
   t as MediaText

package/dist/components/media-text/styles/media-size.d.ts

@@ -0,0 +1 @@
+export declare const mediaSize: import("lit").CSSResult;

package/dist/{packages/web-components/components → components}/media-text/styles/media-size.js

@@ -1,8 +1,5 @@
-import "../../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/reactive-element.js";
-import "../../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/lit-html.js";
-import "../../../../../node_modules/.pnpm/lit-element@4.0.4/node_modules/lit-element/lit-element.js";
-import { css as e } from "../../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/css-tag.js";
-const m = e`
+import { css as e } from "lit";
+const i = e`
 
     @media screen and (min-width: 48.06rem ) {
         .media-text__grid {
@@ -15,10 +12,10 @@ const m = e`
             display: flex;
         }
         .media-text__grid.media-height .media-text__media {
-            flex: 0 1 auto;
+            flex: 1 1 40%;
         }
         .media-text__grid.media-height .media-text__content {
-            flex: 1 0 auto;
+            flex: 1 1 60%;
         }
         .media-text__grid.media-height--xsmall {
             height: 15rem;
@@ -115,5 +112,5 @@ const m = e`
 
 `;
 export {
-  m as mediaSize
+  i as mediaSize
 };

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

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

package/dist/components/menu/menu.d.ts

@@ -0,0 +1,36 @@
+import { LitElement, nothing } from 'lit';
+import type { PageWidth } from '../../types';
+import '../disclosure/';
+interface MenuData {
+    linkText: string;
+    linkUrl: string;
+    linkClasses: Array<string>;
+    subItems: Array<MenuData>;
+}
+export declare class Menu extends LitElement {
+    src: string;
+    data?: MenuData[];
+    layout: string;
+    vertical: boolean;
+    hideMenuTitle: boolean;
+    width: PageWidth;
+    divider: boolean;
+    colorText: undefined | string;
+    colorBg: undefined | string;
+    constructor();
+    disconnectedCallback(): void;
+    firstUpdated(): Promise<void>;
+    fetchData(): Promise<void>;
+    private _outsideClick;
+    private _handleMenuEvents;
+    private _closeDisclosures;
+    menuStyles(): {};
+    menuClasses(): any;
+    menuListClasses(): any;
+    menuTitle(title: string): import("lit").TemplateResult<1> | typeof nothing;
+    menuItemClasses(classes: Array<string>): string | undefined;
+    menuList(): import("lit").TemplateResult<1> | undefined;
+    render(): import("lit").TemplateResult<1>;
+    static styles: import("lit").CSSResultArray;
+}
+export {};

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

@@ -1,25 +1,22 @@
-import "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/reactive-element.js";
-import { html as n, nothing as d } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/lit-html.js";
-import { LitElement as p } from "../../../../node_modules/.pnpm/lit-element@4.0.4/node_modules/lit-element/lit-element.js";
-import { customElement as h } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/custom-element.js";
-import { property as a } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/property.js";
-import { styleMap as v } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/directives/style-map.js";
-import { classMap as c } 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 { settings as _ } from "../../scripts/settings.js";
+import { css as d, LitElement as p, html as n, nothing as h } from "lit";
+import { customElement as v } from "lit/decorators/custom-element.js";
+import { property as o } from "lit/decorators/property.js";
+import { styleMap as f } from "lit/directives/style-map.js";
+import { classMap as c } from "lit/directives/class-map.js";
+import { global as _ } from "../../styles/global.js";
+import { settings as y } from "../../scripts/settings.js";
 import { mergeStyles as b } from "../../scripts/mergeStyles.js";
 import "../disclosure/disclosure.js";
-import { css as y } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/css-tag.js";
-var g = Object.defineProperty, x = Object.getOwnPropertyDescriptor, o = (e, t, i, l) => {
+var g = Object.defineProperty, x = Object.getOwnPropertyDescriptor, a = (e, t, i, l) => {
   for (var r = l > 1 ? void 0 : l ? x(t, i) : t, u = e.length - 1, m; u >= 0; u--)
     (m = e[u]) && (r = (l ? m(t, i, r) : m(r)) || r);
   return l && r && g(t, i, r), r;
 };
-const { prefix: w } = _;
+const { prefix: w } = y;
 let s = class extends p {
   constructor() {
     super(), this.src = "", this.layout = "extended", this.vertical = !1, this.hideMenuTitle = !1, this.width = "page-width", this.divider = !1, this._outsideClick = (e) => {
-      console.log("outside click"), e.composedPath().includes(this) || this._closeDisclosures();
+      e.composedPath().includes(this) || this._closeDisclosures();
     }, this.addEventListener("summary-click", this._handleMenuEvents);
   }
   disconnectedCallback() {
@@ -85,7 +82,11 @@ let s = class extends p {
                         ${e}
                     </span>
                 </li>
-            ` : d;
+            ` : h;
+  }
+  menuItemClasses(e) {
+    if (Array.isArray(e) && e.length)
+      return e.join(" ");
   }
   menuList() {
     if (this.data)
@@ -94,7 +95,7 @@ let s = class extends p {
                 <ul
                     part="menu"
                     class="menu${c(this.menuClasses())}"
-                    style="${v(this.menuStyles())}"
+                    style="${f(this.menuStyles())}"
                     >
                     ${this.data.map((e) => n`
                         <li>
@@ -148,7 +149,7 @@ let s = class extends p {
                                     </div>
                                 </umg-disclosure>
                             ` : n`
-                                <a class="menu__link" part="submenu-title" href="${e.linkUrl}">
+                                <a class="menu__link" part="submenu-title ${this.menuItemClasses(e.linkClasses)}" href="${e.linkUrl}">
                                     ${e.linkText}
                                 </a>
                             `}
@@ -165,8 +166,8 @@ let s = class extends p {
   }
 };
 s.styles = b([
-  f,
-  y`
+  _,
+  d`
             .menu {
                 display: flex;
                 gap: var(--um-space-8, 0.5rem);
@@ -293,35 +294,35 @@ s.styles = b([
             }
         `
 ]);
-o([
-  a()
+a([
+  o()
 ], s.prototype, "src", 2);
-o([
-  a({ type: Object })
+a([
+  o({ type: Object })
 ], s.prototype, "data", 2);
-o([
-  a()
+a([
+  o()
 ], s.prototype, "layout", 2);
-o([
-  a({ type: Boolean })
+a([
+  o({ type: Boolean })
 ], s.prototype, "vertical", 2);
-o([
-  a({ type: Boolean })
+a([
+  o({ type: Boolean })
 ], s.prototype, "hideMenuTitle", 2);
-o([
-  a()
+a([
+  o()
 ], s.prototype, "width", 2);
-o([
-  a({ type: Boolean })
+a([
+  o({ type: Boolean })
 ], s.prototype, "divider", 2);
-o([
-  a()
+a([
+  o()
 ], s.prototype, "colorText", 2);
-o([
-  a()
+a([
+  o()
 ], s.prototype, "colorBg", 2);
-s = o([
-  h(`${w}-menu`)
+s = a([
+  v(`${w}-menu`)
 ], s);
 export {
   s as Menu

package/dist/components/menu-bar/index.d.ts

@@ -0,0 +1,2 @@
+import { MenuBar } from './menu-bar';
+export { MenuBar };

package/dist/components/menu-bar/menu-bar.d.ts

@@ -0,0 +1,16 @@
+import { LitElement } from 'lit';
+import '../box';
+import '../link-group';
+export declare class MenuBar extends LitElement {
+    sticky: boolean;
+    spacing: string;
+    justify: string;
+    mobileJustify: string;
+    padding?: string | undefined;
+    colorBg: string | undefined;
+    colorText: string | undefined;
+    opacity: string | undefined;
+    menuClasses(): any;
+    render(): import("lit").TemplateResult<1>;
+    static styles: import("lit").CSSResultArray;
+}