@momentum-design/components 0.43.1 → 0.45.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%;

package/dist/custom-elements.json

@@ -465,6 +465,67 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/appheader/appheader.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The `mdc-appheader` component provides a structured and accessible app header layout.\nIt consists of three primary sections: leading, center, and trailing.\n\n- The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n- The **center section** can contain a **search bar**, **icons** or action controls.\n- The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.",
+          "name": "Appheader",
+          "cssParts": [
+            {
+              "description": "The main container for styling the header.",
+              "name": "container"
+            },
+            {
+              "description": "The leading section of the header.",
+              "name": "leading-section"
+            },
+            {
+              "description": "The center section of the header.",
+              "name": "center-section"
+            },
+            {
+              "description": "The trailing section of the header.",
+              "name": "trailing-section"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Slot for the leading section (e.g., brand logo, brand name).",
+              "name": "leading"
+            },
+            {
+              "description": "Slot for the center section (e.g., search bar, icons).",
+              "name": "center"
+            },
+            {
+              "description": "Slot for the trailing section (e.g., profile avatar, icons).",
+              "name": "trailing"
+            }
+          ],
+          "members": [],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-appheader",
+          "jsDoc": "/**\n * The `mdc-appheader` component provides a structured and accessible app header layout.\n * It consists of three primary sections: leading, center, and trailing.\n *\n * - The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n * - The **center section** can contain a **search bar**, **icons** or action controls.\n * - The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.\n *\n * @tagname mdc-appheader\n *\n * @slot leading - Slot for the leading section (e.g., brand logo, brand name).\n * @slot center - Slot for the center section (e.g., search bar, icons).\n * @slot trailing - Slot for the trailing section (e.g., profile avatar, icons).\n *\n * @csspart container - The main container for styling the header.\n * @csspart leading-section - The leading section of the header.\n * @csspart center-section - The center section of the header.\n * @csspart trailing-section - The trailing section of the header.\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Appheader",
+            "module": "components/appheader/appheader.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/avatar/avatar.component.js",

package/dist/index.d.ts

@@ -35,6 +35,7 @@ import OptGroup from './components/optgroup';
 import Textarea from './components/textarea';
 import Searchfield from './components/searchfield';
 import Brandvisual from './components/brandvisual';
+import Appheader from './components/appheader';
 import type { SpinnerSize, SpinnerVariant } from './components/spinner/spinner.types';
 import type { TextType } from './components/text/text.types';
 import type { PopoverPlacement } from './components/popover/popover.types';
@@ -42,6 +43,6 @@ import type { BadgeType } from './components/badge/badge.types';
 import type { IconButtonSize, PillButtonSize, ButtonVariant, ButtonColor } from './components/button/button.types';
 import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES } from './components/button/button.constants';
 import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
-export { AlertChip, Avatar, AvatarButton, Badge, Bullet, Button, Checkbox, Chip, Coachmark, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, List, ListItem, Marker, Popover, Presence, Radio, RadioGroup, Spinner, Tab, Text, ThemeProvider, Toggle, VirtualizedList, Option, OptGroup, Progressbar, Textarea, Tooltip, Searchfield, Brandvisual, };
+export { AlertChip, Avatar, AvatarButton, Badge, Bullet, Button, Checkbox, Chip, Coachmark, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, List, ListItem, Marker, Popover, Presence, Radio, RadioGroup, Spinner, Tab, Text, ThemeProvider, Toggle, VirtualizedList, Option, OptGroup, Progressbar, Textarea, Tooltip, Searchfield, Brandvisual, Appheader, };
 export type { TextType, SpinnerSize, SpinnerVariant, PopoverPlacement, BadgeType, IconButtonSize, PillButtonSize, ButtonVariant, ButtonColor, };
 export { inMemoryCache, webAPIIconsCache, BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES };

package/dist/index.js

@@ -36,10 +36,11 @@ import OptGroup from './components/optgroup';
 import Textarea from './components/textarea';
 import Searchfield from './components/searchfield';
 import Brandvisual from './components/brandvisual';
+import Appheader from './components/appheader';
 // Constants / Utils Imports
 import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES, } from './components/button/button.constants';
 import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
 // Components Exports
-export { AlertChip, Avatar, AvatarButton, Badge, Bullet, Button, Checkbox, Chip, Coachmark, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, List, ListItem, Marker, Popover, Presence, Radio, RadioGroup, Spinner, Tab, Text, ThemeProvider, Toggle, VirtualizedList, Option, OptGroup, Progressbar, Textarea, Tooltip, Searchfield, Brandvisual, };
+export { AlertChip, Avatar, AvatarButton, Badge, Bullet, Button, Checkbox, Chip, Coachmark, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, List, ListItem, Marker, Popover, Presence, Radio, RadioGroup, Spinner, Tab, Text, ThemeProvider, Toggle, VirtualizedList, Option, OptGroup, Progressbar, Textarea, Tooltip, Searchfield, Brandvisual, Appheader, };
 // Constants / Utils Exports
 export { inMemoryCache, webAPIIconsCache, BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES };

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

@@ -0,0 +1,22 @@
+import Component from '../../components/appheader';
+/**
+ * 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 const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/appheader/index.js

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/appheader';
+import { TAG_NAME } from '../../components/appheader/appheader.constants';
+/**
+ * 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.
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {},
+    displayName: 'Appheader',
+});
+export default reactWrapper;

package/dist/react/index.d.ts

@@ -1,4 +1,5 @@
 export { default as AlertChip } from './alertchip';
+export { default as Appheader } from './appheader';
 export { default as Avatar } from './avatar';
 export { default as AvatarButton } from './avatarbutton';
 export { default as Badge } from './badge';

package/dist/react/index.js

@@ -1,4 +1,5 @@
 export { default as AlertChip } from './alertchip';
+export { default as Appheader } from './appheader';
 export { default as Avatar } from './avatar';
 export { default as AvatarButton } from './avatarbutton';
 export { default as Badge } from './badge';

package/package.json

@@ -38,5 +38,5 @@
     "lit": "^3.2.0",
     "uuid": "^11.0.5"
   },
-  "version": "0.43.1"
+  "version": "0.45.0"
 }