@m3e/app-bar 1.0.0-rc.2 → 1.0.0-rc.3

package/dist/custom-elements.json

@@ -1516,25 +1516,6 @@
           "kind": "mixin",
           "description": "Mixin that adds support for custom event attributes.",
           "name": "EventAttribute",
-          "members": [
-            {
-              "kind": "method",
-              "name": "dispatchEvent",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
-            }
-          ],
           "parameters": [
             {
               "name": "base",
@@ -1832,6 +1813,17 @@
           "description": "Mixin to augment an element with behavior used to submit a form.",
           "name": "FormSubmitter",
           "members": [
+            {
+              "kind": "field",
+              "name": "formAssociated",
+              "type": {
+                "text": "boolean"
+              },
+              "static": true,
+              "readonly": true,
+              "default": "true",
+              "description": "Indicates that this custom element participates in form submission, validation, and form state restoration."
+            },
             {
               "kind": "field",
               "name": "name",

package/dist/src/AppBarElement.d.ts

@@ -0,0 +1,139 @@
+import { CSSResultGroup, LitElement, PropertyValues } from "lit";
+import { AppBarSize } from "./AppBarSize";
+declare const M3eAppBarElement_base: import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").HtmlForMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor & typeof LitElement;
+/**
+ * A bar, placed a the top of a screen, used to help users navigate through an application.
+ *
+ * @description
+ * The `m3e-app-bar` component is a prominent user interface component that provides consistent
+ * access to key actions, navigation, and contextual information at the top of an application screen.
+ * Designed according to Material 3 principles, it organizes content with clear hierarchy, supports
+ * dynamic color, elevation, and shape, and adapts to scrolling behavior.
+ *
+ * @example
+ * ```html
+ * <m3e-app-bar size="medium">
+ *  <m3e-icon-button slot="leading-icon" aria-label="Back">
+ *    <m3e-icon name="arrow_back"></m3e-icon>
+ *  </m3e-icon-button>
+ *  <span slot="title">Top 10 hiking trails</span>
+ *  <span slot="subtitle">Discover popular trails</span>
+ *  <m3e-icon-button slot="trailing-icon" aria-label="Bookmark" variant="tonal">
+ *    <m3e-icon name="bookmark" filled></m3e-icon>
+ *  </m3e-icon-button>
+ * <m3e-app-bar>
+ * ```
+ * @example
+ * The next example illustrates how to attach an app bar to a parenting scroll container
+ * to produce elevation on scroll. In this example, the `for` attribute is used to attach a
+ * sticky positioned `m3e-app-bar` to a parenting container styled to overflow vertically.
+ * When scrolled, the app bar will automatically transition to an elevated state.
+ * ```html
+ * <div style="overflow-y: auto; height: 300px" id="scrollContainer">
+ *  <m3e-app-bar for="scrollContainer" style="position: sticky; top: 0">
+ *    <span slot="title">Title</span>
+ *  </m3e-app-bar>
+ *  <div style="height: 400px; display: flex; align-items: center; justify-content: center">
+ *    I am scrolling content
+ *  </div>
+ * </div>
+ * ```
+ *
+ * @tag m3e-app-bar
+ *
+ * @slot leading-icon - Renders a leading icon.
+ * @slot subtitle - Renders the subtitle.
+ * @slot title - Renders the title.
+ * @slot trailing-icon - Renders a trailing icon.
+ *
+ * @attr centered - Whether the title and subtitle are centered.
+ * @attr for - The identifier of the interactive control to which this element is attached.
+ * @attr size - The size of the bar.
+ *
+ * @cssprop --m3e-app-bar-container-color - Background color of the app bar container.
+ * @cssprop --m3e-app-bar-container-color-on-scroll - Background color of the app bar container when scrolled.
+ * @cssprop --m3e-app-bar-container-elevation - Elevation (shadow) of the app bar container.
+ * @cssprop --m3e-app-bar-container-elevation-on-scroll - Elevation (shadow) of the app bar container when scrolled.
+ * @cssprop --m3e-app-bar-title-text-color - Color of the app bar title text.
+ * @cssprop --m3e-app-bar-subtitle-text-color - Color of the app bar subtitle text.
+ * @cssprop --m3e-app-bar-padding-left - Left padding for the app bar container.
+ * @cssprop --m3e-app-bar-padding-right - Right padding for the app bar container.
+ * @cssprop --m3e-app-bar-small-container-height - Height of the small app bar container.
+ * @cssprop --m3e-app-bar-small-title-text-font-size - Font size for the small app bar title text.
+ * @cssprop --m3e-app-bar-small-title-text-font-weight - Font weight for the small app bar title text.
+ * @cssprop --m3e-app-bar-small-title-text-line-height - Line height for the small app bar title text.
+ * @cssprop --m3e-app-bar-small-subtitle-text-tracking - Letter spacing (tracking) for the small app bar title text.
+ * @cssprop --m3e-app-bar-small-subtitle-text-font-size - Font size for the small app bar subtitle text.
+ * @cssprop --m3e-app-bar-small-subtitle-text-font-weight - Font weight for the small app bar subtitle text.
+ * @cssprop --m3e-app-bar-small-subtitle-text-line-height - Line height for the small app bar subtitle text.
+ * @cssprop --m3e-app-bar-small-subtitle-text-tracking - Letter spacing (tracking) for the small app bar subtitle text.
+ * @cssprop --m3e-app-bar-small-heading-padding-left - Left padding for the small app bar heading.
+ * @cssprop --m3e-app-bar-small-heading-padding-right - Right padding for the small app bar heading.
+ * @cssprop --m3e-app-bar-medium-container-height - Height of the medium app bar container.
+ * @cssprop --m3e-app-bar-medium-container-height-with-subtitle - Height of the medium app bar container with subtitle.
+ * @cssprop --m3e-app-bar-medium-title-text-font-size - Font size for the medium app bar title text.
+ * @cssprop --m3e-app-bar-medium-title-text-font-weight - Font weight for the medium app bar title text.
+ * @cssprop --m3e-app-bar-medium-title-text-line-height - Line height for the medium app bar title text.
+ * @cssprop --m3e-app-bar-medium-subtitle-text-tracking - Letter spacing (tracking) for the medium app bar title text.
+ * @cssprop --m3e-app-bar-medium-subtitle-text-font-size - Font size for the medium app bar subtitle text.
+ * @cssprop --m3e-app-bar-medium-subtitle-text-font-weight - Font weight for the medium app bar subtitle text.
+ * @cssprop --m3e-app-bar-medium-subtitle-text-line-height - Line height for the medium app bar subtitle text.
+ * @cssprop --m3e-app-bar-medium-subtitle-text-tracking - Letter spacing (tracking) for the medium app bar subtitle text.
+ * @cssprop --m3e-app-bar-medium-heading-padding-left - Left padding for the medium app bar heading.
+ * @cssprop --m3e-app-bar-medium-heading-padding-right - Right padding for the medium app bar heading.
+ * @cssprop --m3e-app-bar-medium-padding-top - Top padding for the medium app bar.
+ * @cssprop --m3e-app-bar-medium-padding-bottom - Bottom padding for the medium app bar.
+ * @cssprop --m3e-app-bar-medium-title-max-lines - Maximum number of lines for the medium app bar title.
+ * @cssprop --m3e-app-bar-medium-subtitle-max-lines - Maximum number of lines for the medium app bar subtitle.
+ * @cssprop --m3e-app-bar-large-container-height - Height of the large app bar container.
+ * @cssprop --m3e-app-bar-large-container-height-with-subtitle - Height of the large app bar container with subtitle.
+ * @cssprop --m3e-app-bar-large-title-text-font-size - Font size for the large app bar title text.
+ * @cssprop --m3e-app-bar-large-title-text-font-weight - Font weight for the large app bar title text.
+ * @cssprop --m3e-app-bar-large-title-text-line-height - Line height for the large app bar title text.
+ * @cssprop --m3e-app-bar-large-subtitle-text-tracking - Letter spacing (tracking) for the large app bar title text.
+ * @cssprop --m3e-app-bar-large-subtitle-text-font-size - Font size for the large app bar subtitle text.
+ * @cssprop --m3e-app-bar-large-subtitle-text-font-weight - Font weight for the large app bar subtitle text.
+ * @cssprop --m3e-app-bar-large-subtitle-text-line-height - Line height for the large app bar subtitle text.
+ * @cssprop --m3e-app-bar-large-subtitle-text-tracking - Letter spacing (tracking) for the large app bar subtitle text.
+ * @cssprop --m3e-app-bar-large-heading-padding-left - Left padding for the large app bar heading.
+ * @cssprop --m3e-app-bar-large-heading-padding-right - Right padding for the large app bar heading.
+ * @cssprop --m3e-app-bar-large-padding-top - Top padding for the large app bar.
+ * @cssprop --m3e-app-bar-large-padding-bottom - Bottom padding for the large app bar.
+ * @cssprop --m3e-app-bar-large-title-max-lines - Maximum number of lines for the large app bar title.
+ * @cssprop --m3e-app-bar-large-subtitle-max-lines - Maximum number of lines for the large app bar subtitle.
+ */
+export declare class M3eAppBarElement extends M3eAppBarElement_base {
+    #private;
+    /** The styles of the element. */
+    static styles: CSSResultGroup;
+    /** @private */ private readonly _base?;
+    /** @private */ private readonly _leadingIcon?;
+    /** @private */ private readonly _trailingIcon?;
+    /**
+     * Whether the title and subtitle are centered.
+     * @default false
+     */
+    centered: boolean;
+    /**
+     * The size of the bar.
+     * @default "small"
+     */
+    size: AppBarSize;
+    /** @inheritdoc */
+    attach(control: HTMLElement): void;
+    /** @inheritdoc */
+    detach(): void;
+    /** @inheritdoc */
+    protected updated(_changedProperties: PropertyValues<this>): void;
+    /** @inheritdoc */
+    protected render(): unknown;
+    /** @private */
+    private _updateScroll;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "m3e-app-bar": M3eAppBarElement;
+    }
+}
+export {};
+//# sourceMappingURL=AppBarElement.d.ts.map

package/dist/src/AppBarElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppBarElement.d.ts","sourceRoot":"","sources":["../../src/AppBarElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAKvE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;;AAI1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoGG;AACH,qBACa,gBAAiB,SAAQ,qBAAmC;;IACvE,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAAkC;IAIxE,eAAe,CAAiB,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAc;IACrE,eAAe,CAAyB,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAc;IACpF,eAAe,CAA0B,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAc;IAEtF;;;OAGG;IACyC,QAAQ,UAAS;IAE7D;;;OAGG;IAC0B,IAAI,EAAE,UAAU,CAAW;IAExD,kBAAkB;IACT,MAAM,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI;IAW3C,kBAAkB;IACT,MAAM,IAAI,IAAI;IAWvB,kBAAkB;cACC,OAAO,CAAC,kBAAkB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAY1E,kBAAkB;cACC,MAAM,IAAI,OAAO;IA4FpC,eAAe;IAEf,OAAO,CAAC,aAAa;CA4BtB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,gBAAgB,CAAC;KACjC;CACF"}

package/dist/src/AppBarSize.d.ts

@@ -0,0 +1,3 @@
+/** Specifies the possible sizes of an application bar. */
+export type AppBarSize = "small" | "medium" | "large";
+//# sourceMappingURL=AppBarSize.d.ts.map

package/dist/src/AppBarSize.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppBarSize.d.ts","sourceRoot":"","sources":["../../src/AppBarSize.ts"],"names":[],"mappings":"AAAA,0DAA0D;AAC1D,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC"}

package/dist/src/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./AppBarElement";
+export * from "./AppBarSize";
+//# sourceMappingURL=index.d.ts.map

package/dist/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC"}

package/dist/src/styles/AppBarSizeStyle.d.ts

@@ -0,0 +1,7 @@
+import { CSSResultGroup } from "lit";
+/**
+ * Size variant styles for `M3eAppBarElement`.
+ * @internal
+ */
+export declare const AppBarSizeStyle: CSSResultGroup;
+//# sourceMappingURL=AppBarSizeStyle.d.ts.map

package/dist/src/styles/AppBarSizeStyle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppBarSizeStyle.d.ts","sourceRoot":"","sources":["../../../src/styles/AppBarSizeStyle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,cAAc,EAAa,MAAM,KAAK,CAAC;AA8DhE;;;GAGG;AACH,eAAO,MAAM,eAAe,EAAE,cAAoF,CAAC"}

package/dist/src/styles/AppBarSizeToken.d.ts

@@ -0,0 +1,28 @@
+import { CSSResult } from "lit";
+import { AppBarSize } from "../AppBarSize";
+/** @private */
+type _AppBarSizeToken = {
+    containerHeight: CSSResult;
+    containerHeightWithSubtitle?: CSSResult;
+    paddingTop?: CSSResult;
+    paddingBottom?: CSSResult;
+    titleTextFontSize: CSSResult;
+    titleTextFontWeight: CSSResult;
+    titleTextLineHeight: CSSResult;
+    titleTextTracking: CSSResult;
+    subtitleTextFontSize: CSSResult;
+    subtitleTextFontWeight: CSSResult;
+    subtitleTextLineHeight: CSSResult;
+    subtitleTextTracking: CSSResult;
+    titleMaxLines?: CSSResult;
+    subtitleMaxLines?: CSSResult;
+    headingPaddingLeft: CSSResult;
+    headingPaddingRight: CSSResult;
+};
+/**
+ * Component design tokens that control the `M3eAppBarElement` for all size variants.
+ * @internal
+ */
+export declare const AppBarSizeToken: Record<AppBarSize, _AppBarSizeToken>;
+export {};
+//# sourceMappingURL=AppBarSizeToken.d.ts.map

package/dist/src/styles/AppBarSizeToken.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppBarSizeToken.d.ts","sourceRoot":"","sources":["../../../src/styles/AppBarSizeToken.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAa,MAAM,KAAK,CAAC;AAI3C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,eAAe;AACf,KAAK,gBAAgB,GAAG;IACtB,eAAe,EAAE,SAAS,CAAC;IAC3B,2BAA2B,CAAC,EAAE,SAAS,CAAC;IACxC,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,iBAAiB,EAAE,SAAS,CAAC;IAC7B,mBAAmB,EAAE,SAAS,CAAC;IAC/B,mBAAmB,EAAE,SAAS,CAAC;IAC/B,iBAAiB,EAAE,SAAS,CAAC;IAC7B,oBAAoB,EAAE,SAAS,CAAC;IAChC,sBAAsB,EAAE,SAAS,CAAC;IAClC,sBAAsB,EAAE,SAAS,CAAC;IAClC,oBAAoB,EAAE,SAAS,CAAC;IAChC,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,kBAAkB,EAAE,SAAS,CAAC;IAC9B,mBAAmB,EAAE,SAAS,CAAC;CAChC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,UAAU,EAAE,gBAAgB,CAkGvD,CAAC"}

package/dist/src/styles/AppBarStyle.d.ts

@@ -0,0 +1,7 @@
+import { CSSResult } from "lit";
+/**
+ * Baseline styles for `M3eAppBarElement`.
+ * @internal
+ */
+export declare const AppBarStyle: CSSResult;
+//# sourceMappingURL=AppBarStyle.d.ts.map

package/dist/src/styles/AppBarStyle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppBarStyle.d.ts","sourceRoot":"","sources":["../../../src/styles/AppBarStyle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,SAAS,EAAa,MAAM,KAAK,CAAC;AAMhD;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,SA8GzB,CAAC"}

package/dist/src/styles/AppBarToken.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Component design tokens that control `M3eAppBarElement`.
+ * @internal
+ */
+export declare const AppBarToken: {
+    readonly containerColor: import("lit").CSSResult;
+    readonly containerColorOnScroll: import("lit").CSSResult;
+    readonly containerElevation: import("lit").CSSResult;
+    readonly containerElevationOnScroll: import("lit").CSSResult;
+    readonly titleTextColor: import("lit").CSSResult;
+    readonly subtitleTextColor: import("lit").CSSResult;
+    readonly paddingLeft: import("lit").CSSResult;
+    readonly paddingRight: import("lit").CSSResult;
+};
+//# sourceMappingURL=AppBarToken.d.ts.map

package/dist/src/styles/AppBarToken.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppBarToken.d.ts","sourceRoot":"","sources":["../../../src/styles/AppBarToken.ts"],"names":[],"mappings":"AAIA;;;GAGG;AACH,eAAO,MAAM,WAAW;;;;;;;;;CAad,CAAC"}

package/dist/src/styles/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./AppBarSizeStyle";
+export * from "./AppBarStyle";
+//# sourceMappingURL=index.d.ts.map

package/dist/src/styles/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/styles/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m3e/app-bar",
-  "version": "1.0.0-rc.2",
+  "version": "1.0.0-rc.3",
   "description": "App Bar for M3E",
   "author": "matraic <matraic@yahoo.com>",
   "license": "MIT",
@@ -27,7 +27,7 @@
     "clean": "rimraf dist"
   },
   "peerDependencies": {
-    "@m3e/core": "1.0.0-rc.2",
+    "@m3e/core": "1.0.0-rc.3",
     "lit": "^3.3.0"
   },
   "devDependencies": {