@m3e/nav-rail 1.0.0-rc.2 → 1.0.0-rc.3

package/dist/custom-elements.json

@@ -1180,25 +1180,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",
@@ -1496,6 +1477,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/NavRailElement.d.ts

@@ -0,0 +1,69 @@
+import { CSSResultGroup } from "lit";
+import { M3eNavBarElement, NavItemOrientation } from "@m3e/nav-bar";
+/**
+ * A vertical bar, typically used on larger devices, that allows a user to switch between views.
+ *
+ * @description
+ * The `m3e-nav-rail` component provides a vertical navigation rail for switching between views in
+ * an application. Designed for larger devices, it supports compact and expanded modes, interactive
+ * items, and theming via CSS custom properties.
+ *
+ * @example
+ * The following example illustrates a nav rail whose expanded state is automatically determined by the
+ * current screen size.  In addition, a toggle button is used to allow the user to manually toggle the
+ * expanded state.
+ *
+ * ```html
+ * <m3e-nav-rail id="nav-rail" mode="auto">
+ *   <m3e-icon-button toggle>
+ *     <m3e-icon name="menu"></m3e-icon>
+ *     <m3e-icon slot="selected" name="menu_open"></m3e-icon>
+ *     <m3e-nav-rail-toggle for="nav-rail"></m3e-nav-rail-toggle>
+ *   </m3e-icon-button>
+ *   <m3e-fab size="small">
+ *     <m3e-icon name="edit"></m3e-icon>
+ *     <span slot="label">Extended</span>
+ *   </m3e-fab>
+ *   <m3e-nav-item><m3e-icon slot="icon" name="news"></m3e-icon>News</m3e-nav-item>
+ *   <m3e-nav-item><m3e-icon slot="icon" name="globe"></m3e-icon>Global</m3e-nav-item>
+ *   <m3e-nav-item><m3e-icon slot="icon" name="star"></m3e-icon>For you</m3e-nav-item>
+ *   <m3e-nav-item><m3e-icon slot="icon" name="newsstand"></m3e-icon>Trending</m3e-nav-item>
+ * </m3e-nav-rail>
+ * ```
+ *
+ * @tag m3e-nav-rail
+ *
+ * @attr mode - The mode in which items in the rail are presented.
+ *
+ * @fires change - Emitted when the selected state of an item changes.
+ *
+ * @cssprop --m3e-nav-rail-top-space - Top block padding for the nav rail.
+ * @cssprop --m3e-nav-rail-bottom-space - Bottom block padding for the nav rail.
+ * @cssprop --m3e-nav-rail-compact-width - Width of the nav rail in compact mode.
+ * @cssprop --m3e-nav-rail-expanded-inline-padding - Inline padding for expanded nav rail.
+ * @cssprop --m3e-nav-rail-expanded-min-width - Minimum width of the nav rail in expanded mode.
+ * @cssprop --m3e-nav-rail-expanded-max-width - Maximum width of the nav rail in expanded mode.
+ * @cssprop --m3e-nav-rail-expanded-item-height - Height of nav items in expanded mode.
+ * @cssprop --m3e-nav-rail-button-item-space - Space below icon buttons and FABs.
+ * @cssprop --m3e-nav-rail-expanded-icon-button-inset - Inset for icon buttons in expanded mode.
+ */
+export declare class M3eNavRailElement extends M3eNavBarElement {
+    #private;
+    /** The styles of the element. */
+    static styles: CSSResultGroup;
+    constructor();
+    /** @inheritdoc */
+    connectedCallback(): void;
+    /** @inheritdoc */
+    disconnectedCallback(): void;
+    /** @inheritdoc @internal */
+    protected _updateItems(): void;
+    /** @inheritdoc @internal */
+    protected _updateOrientation(orientation: NavItemOrientation): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "m3e-nav-rail": M3eNavRailElement;
+    }
+}
+//# sourceMappingURL=NavRailElement.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NavRailElement.d.ts","sourceRoot":"","sources":["../../src/NavRailElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAE,MAAM,KAAK,CAAC;AAK1C,OAAO,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAEpE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,qBACa,iBAAkB,SAAQ,gBAAgB;;IACrD,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAuCpC;;IAaF,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IAKlC,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IAUrC,4BAA4B;cACT,YAAY,IAAI,IAAI;IAavC,4BAA4B;cACT,kBAAkB,CAAC,WAAW,EAAE,kBAAkB,GAAG,IAAI;CAI7E;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,iBAAiB,CAAC;KACnC;CACF"}

package/dist/src/NavRailToggleElement.d.ts

@@ -0,0 +1,52 @@
+import { CSSResultGroup, LitElement } from "lit";
+declare const M3eNavRailToggleElement_base: import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").HtmlForMixin> & typeof LitElement;
+/**
+ * An element, nested within a clickable element, used to toggle the expanded state of a navigation rail.
+ *
+ * @example
+ * The following example illustrates a nav rail whose expanded state is automatically determined by the
+ * current screen size.  In addition, a toggle button is used to allow the user to manually toggle the
+ * expanded state.
+ *
+ * ```html
+ * <m3e-nav-rail id="nav-rail" mode="auto">
+ *   <m3e-icon-button toggle>
+ *     <m3e-icon name="menu"></m3e-icon>
+ *     <m3e-icon slot="selected" name="menu_open"></m3e-icon>
+ *     <m3e-nav-rail-toggle for="nav-rail"></m3e-nav-rail-toggle>
+ *   </m3e-icon-button>
+ *   <m3e-fab size="small">
+ *     <m3e-icon name="edit"></m3e-icon>
+ *     <span slot="label">Extended</span>
+ *   </m3e-fab>
+ *   <m3e-nav-item><m3e-icon slot="icon" name="news"></m3e-icon>News</m3e-nav-item>
+ *   <m3e-nav-item><m3e-icon slot="icon" name="globe"></m3e-icon>Global</m3e-nav-item>
+ *   <m3e-nav-item><m3e-icon slot="icon" name="star"></m3e-icon>For you</m3e-nav-item>
+ *   <m3e-nav-item><m3e-icon slot="icon" name="newsstand"></m3e-icon>Trending</m3e-nav-item>
+ * </m3e-nav-rail>
+ * ```
+ *
+ * @tag m3e-nav-rail-toggle
+ */
+export declare class M3eNavRailToggleElement extends M3eNavRailToggleElement_base {
+    #private;
+    /** The styles of the element. */
+    static styles: CSSResultGroup;
+    /** @inheritdoc */
+    connectedCallback(): void;
+    /** @inheritdoc */
+    disconnectedCallback(): void;
+    /** @inheritdoc */
+    attach(control: HTMLElement): void;
+    /** @inheritdoc */
+    detach(): void;
+    /** @inheritdoc */
+    protected render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "m3e-nav-rail-toggle": M3eNavRailToggleElement;
+    }
+}
+export {};
+//# sourceMappingURL=NavRailToggleElement.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NavRailToggleElement.d.ts","sourceRoot":"","sources":["../../src/NavRailToggleElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;;AAO5D;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,qBACa,uBAAwB,SAAQ,4BAAmB;;IAC9D,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAOpC;IASF,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IAKlC,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IAKrC,kBAAkB;IACT,MAAM,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI;IAQ3C,kBAAkB;IACT,MAAM,IAAI,IAAI;IAQvB,kBAAkB;cACC,MAAM,IAAI,OAAO;CAoBrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,uBAAuB,CAAC;KAChD;CACF"}

package/dist/src/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./NavRailElement";
+export * from "./NavRailToggleElement";
+//# 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,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC"}

package/package.json

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