@m3e/toolbar 1.0.0-rc.2 → 1.0.0-rc.4

package/README.md

@@ -27,7 +27,7 @@ Alternately, you can explicitly reference the `html-custom-data.json` and `css-c
 }
 ```
 
-## 🚀 Browser Usage
+## 🚀 Native Module Support
 
 This package uses [JavaScript Modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#module_specifiers). To use it directly in a browser without a bundler, use a module script similar to the following.
 

package/dist/custom-elements.json

@@ -1131,25 +1131,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",
@@ -1447,6 +1428,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",
@@ -1983,6 +1975,11 @@
       "kind": "javascript-module",
       "path": "../core/src/shared/mixins/Labelled.ts",
       "declarations": [
+        {
+          "kind": "variable",
+          "name": "updateLabels",
+          "description": "A symbol through which to update labels to reflect a control's current state."
+        },
         {
           "kind": "function",
           "name": "isLabelledMixin",
@@ -2032,16 +2029,6 @@
               },
               "description": "The label elements that the element is associated with.",
               "readonly": true
-            },
-            {
-              "kind": "method",
-              "name": "[_updateLabels]",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
             }
           ],
           "parameters": [
@@ -2056,6 +2043,14 @@
         }
       ],
       "exports": [
+        {
+          "kind": "js",
+          "name": "updateLabels",
+          "declaration": {
+            "name": "updateLabels",
+            "module": "../core/src/shared/mixins/Labelled.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "isLabelledMixin",

package/dist/src/ToolbarElement.d.ts

@@ -0,0 +1,85 @@
+import { CSSResultGroup, LitElement, PropertyValues } from "lit";
+import { ToolbarVariant } from "./ToolbarVariant";
+import { ToolbarShape } from "./ToolbarShape";
+declare const M3eToolbarElement_base: import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").VerticalMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor & typeof LitElement;
+/**
+ * Presents frequently used actions relevant to the current page.
+ *
+ * @description
+ * The `m3e-toolbar` component presents contextual actions, navigation, and controls. Designed according to
+ * Material 3 principles, it supports vertical and horizontal orientation, shape and variant customization,
+ * and adaptive layout via CSS custom properties.
+ *
+ * @example
+ * The following example illustrates a `vibrant`, `rounded` toolbar containing icon buttons.
+ *
+ * ```html
+ * <m3e-toolbar variant="vibrant" shape="rounded">
+ *  <m3e-icon-button>
+ *    <m3e-icon name="arrow_back"></m3e-icon>
+ *  </m3e-icon-button>
+ *  <m3e-icon-button>
+ *    <m3e-icon name="arrow_forward"></m3e-icon>
+ *  </m3e-icon-button>
+ *  <m3e-icon-button width="wide" variant="filled">
+ *    <m3e-icon name="add"></m3e-icon>
+ *  </m3e-icon-button>
+ *  <m3e-icon-button>
+ *    <m3e-icon name="picture_in_picture"></m3e-icon>
+ *  </m3e-icon-button>
+ *  <m3e-icon-button>
+ *    <m3e-icon name="more_vert"></m3e-icon>
+ *  </m3e-icon-button>
+ * </m3e-toolbar>
+ * ```
+ *
+ * @tag m3e-toolbar
+ *
+ * @slot - Renders the content of the toolbar.
+ *
+ * @attr elevated - Whether the toolbar is elevated.
+ * @attr shape - The shape of the toolbar.
+ * @attr variant - The appearance variant of the toolbar.
+ * @attr vertical - Whether the element is oriented vertically.
+ *
+ * @cssprop --m3e-toolbar-size - The size (height or width) of the toolbar.
+ * @cssprop --m3e-toolbar-spacing - The gap between toolbar items.
+ * @cssprop --m3e-toolbar-rounded-shape - Border radius for rounded shape.
+ * @cssprop --m3e-toolbar-rounded-padding - Padding for rounded shape.
+ * @cssprop --m3e-toolbar-square-padding - Padding for square shape.
+ * @cssprop --m3e-toolbar-standard-container-color - Container color for the standard variant.
+ * @cssprop --m3e-toolbar-standard-color - Foreground color for the standard variant.
+ * @cssprop --m3e-toolbar-vibrant-container-color - Container color for the vibrant variant.
+ * @cssprop --m3e-toolbar-vibrant-color - Foreground color for the vibrant variant.
+ */
+export declare class M3eToolbarElement extends M3eToolbarElement_base {
+    #private;
+    /** The styles of the element. */
+    static styles: CSSResultGroup;
+    /**
+     * The appearance variant of the toolbar.
+     * @default "standard"
+     */
+    variant: ToolbarVariant;
+    /**
+     * The shape of the toolbar.
+     * @default "square"
+     */
+    shape: ToolbarShape;
+    /**
+     * Whether the toolbar is elevated.
+     * @default false
+     */
+    elevated: boolean;
+    /** @inheritdoc */
+    protected update(changedProperties: PropertyValues<this>): void;
+    /** @inheritdoc */
+    protected render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "m3e-toolbar": M3eToolbarElement;
+    }
+}
+export {};
+//# sourceMappingURL=ToolbarElement.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarElement.d.ts","sourceRoot":"","sources":["../../src/ToolbarElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAM5E,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;;AAE9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDG;AACH,qBACa,iBAAkB,SAAQ,sBAAqC;;IAC1E,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CA8DpC;IAIF;;;OAGG;IAC0B,OAAO,EAAE,cAAc,CAAc;IAElE;;;OAGG;IAC0B,KAAK,EAAE,YAAY,CAAY;IAE5D;;;OAGG;IACyC,QAAQ,UAAS;IAE7D,kBAAkB;cACC,MAAM,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAQxE,kBAAkB;cACC,MAAM,IAAI,OAAO;CAmCrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,iBAAiB,CAAC;KAClC;CACF"}

package/dist/src/ToolbarShape.d.ts

@@ -0,0 +1,3 @@
+/** Specifies the possible shape variants of a toolbar. */
+export type ToolbarShape = "rounded" | "square";
+//# sourceMappingURL=ToolbarShape.d.ts.map

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

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

package/dist/src/ToolbarVariant.d.ts

@@ -0,0 +1,3 @@
+/** Specifies the possible appearance variants of a toolbar. */
+export type ToolbarVariant = "standard" | "vibrant";
+//# sourceMappingURL=ToolbarVariant.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarVariant.d.ts","sourceRoot":"","sources":["../../src/ToolbarVariant.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,MAAM,MAAM,cAAc,GAAG,UAAU,GAAG,SAAS,CAAC"}

package/dist/src/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./ToolbarElement";
+export * from "./ToolbarShape";
+export * from "./ToolbarVariant";
+//# 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,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m3e/toolbar",
-  "version": "1.0.0-rc.2",
+  "version": "1.0.0-rc.4",
   "description": "Toolbar for M3E",
   "author": "matraic <matraic@yahoo.com>",
   "license": "MIT",
@@ -30,7 +30,7 @@
     "@material/material-color-utilities": "^0.3.0"
   },
   "peerDependencies": {
-    "@m3e/core": "1.0.0-rc.2",
+    "@m3e/core": "1.0.0-rc.4",
     "lit": "^3.3.0"
   },
   "devDependencies": {