@momentum-design/components 0.44.0 → 0.46.0

package/dist/components/appheader/appheader.component.d.ts

@@ -0,0 +1,30 @@
+import { CSSResult } from 'lit';
+import { Component } from '../../models';
+/**
+ * The `mdc-appheader` component provides a structured and accessible app header layout.
+ * It consists of three primary sections: leading, center, and trailing.
+ *
+ * - The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.
+ * - The **center section** can contain a **search bar**, **icons** or action controls.
+ * - The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.
+ *
+ * @tagname mdc-appheader
+ *
+ * @slot leading - Slot for the leading section (e.g., brand logo, brand name).
+ * @slot center - Slot for the center section (e.g., search bar, icons).
+ * @slot trailing - Slot for the trailing section (e.g., profile avatar, icons).
+ *
+ * @csspart container - The main container for styling the header.
+ * @csspart leading-section - The leading section of the header.
+ * @csspart center-section - The center section of the header.
+ * @csspart trailing-section - The trailing section of the header.
+ */
+declare class Appheader extends Component {
+    /**
+     * Renders the structured layout of the app header.
+     * Uses `slots` for flexibility, allowing consumers to insert custom content.
+     */
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default Appheader;

package/dist/components/appheader/appheader.component.js

@@ -0,0 +1,44 @@
+import { html } from 'lit';
+import styles from './appheader.styles';
+import { Component } from '../../models';
+/**
+ * The `mdc-appheader` component provides a structured and accessible app header layout.
+ * It consists of three primary sections: leading, center, and trailing.
+ *
+ * - The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.
+ * - The **center section** can contain a **search bar**, **icons** or action controls.
+ * - The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.
+ *
+ * @tagname mdc-appheader
+ *
+ * @slot leading - Slot for the leading section (e.g., brand logo, brand name).
+ * @slot center - Slot for the center section (e.g., search bar, icons).
+ * @slot trailing - Slot for the trailing section (e.g., profile avatar, icons).
+ *
+ * @csspart container - The main container for styling the header.
+ * @csspart leading-section - The leading section of the header.
+ * @csspart center-section - The center section of the header.
+ * @csspart trailing-section - The trailing section of the header.
+ */
+class Appheader extends Component {
+    /**
+     * Renders the structured layout of the app header.
+     * Uses `slots` for flexibility, allowing consumers to insert custom content.
+     */
+    render() {
+        return html `
+      <header part="container">
+        <div part="leading-section">
+          <slot name="leading"></slot>
+        </div>
+        <div part="center-section">
+          <slot name="center"></slot>
+        </div>
+        <div part="trailing-section">
+          <slot name="trailing"></slot>
+        </div>
+      </header>`;
+    }
+}
+Appheader.styles = [...Component.styles, ...styles];
+export default Appheader;

package/dist/components/appheader/appheader.constants.d.ts

@@ -0,0 +1,2 @@
+declare const TAG_NAME: "mdc-appheader";
+export { TAG_NAME };

package/dist/components/appheader/appheader.constants.js

@@ -0,0 +1,3 @@
+import utils from '../../utils/tag-name';
+const TAG_NAME = utils.constructTagName('appheader');
+export { TAG_NAME };

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

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult[];
+export default _default;

package/dist/components/appheader/appheader.styles.js

@@ -0,0 +1,37 @@
+import { css } from 'lit';
+const styles = css `
+  :host {
+    --mdc-appheader-height: 4rem;
+  }
+
+  :host::part(container) {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: var(--mdc-appheader-height);
+    padding: 1rem;
+  }
+
+  :host::part(leading-section),
+  :host::part(center-section),
+  :host::part(trailing-section) {
+    flex: 1;
+    display: flex;
+    height: 100%;
+  }
+
+  :host::part(leading-section) {
+    justify-content: flex-start;
+    
+  }
+
+  :host::part(center-section) {
+    justify-content: center;
+    align-items: center;
+  }
+
+  :host::part(trailing-section) {
+    justify-content: flex-end;
+  }
+`;
+export default [styles];

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

@@ -0,0 +1,7 @@
+import Appheader from './appheader.component';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-appheader']: Appheader;
+    }
+}
+export default Appheader;

package/dist/components/appheader/index.js

@@ -0,0 +1,4 @@
+import Appheader from './appheader.component';
+import { TAG_NAME } from './appheader.constants';
+Appheader.register(TAG_NAME);
+export default Appheader;

package/dist/components/brandvisual/brandvisual.styles.js

@@ -2,6 +2,7 @@ import { css } from 'lit';
 const styles = css `
   :host {
     display: block;
+    height: 100%;
   }
   :host::part(brandvisual) {
     height: 100%;