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

package/README.md

@@ -1,12 +1,9 @@
-your user's browser support variable fonts.
-
 # @m3e/icon
 
 The `m3e-icon` component makes it easy to use Material Symbols in your application. It supports outlined, rounded, and sharp variants, as well as variable font features like fill, weight, grade, and optical size. For more information, see the [Material Symbol Guide](https://developers.google.com/fonts/docs/material_symbols) and [Material Symbol Library](https://fonts.google.com/icons).
 
 The Material Symbols font is the easiest way to incorporate Material Symbols into your application. Using the [Fonts CSS API](https://developers.google.com/fonts/docs/css2#forming_api_urls), you can use variable fonts to optimize icon
-usage within your application. See [Can I Use's Variable Fonts](https://caniuse.com/variable-fonts) to determine whether
-your user's browser support variable fonts.
+usage within your application. See [Can I Use's Variable Fonts](https://caniuse.com/variable-fonts) to determine whether your user's browser support variable fonts.
 
 > **This package is part of [M3E](https://github.com/matraic/m3e) monorepo**, a unified suite of Material 3 web components. [Explore the docs](https://matraic.github.io/m3e) to see them in action.
 
@@ -33,7 +30,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

@@ -1069,25 +1069,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",
@@ -1385,6 +1366,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",
@@ -1921,6 +1913,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",
@@ -1970,16 +1967,6 @@
               },
               "description": "The label elements that the element is associated with.",
               "readonly": true
-            },
-            {
-              "kind": "method",
-              "name": "[_updateLabels]",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
             }
           ],
           "parameters": [
@@ -1994,6 +1981,14 @@
         }
       ],
       "exports": [
+        {
+          "kind": "js",
+          "name": "updateLabels",
+          "declaration": {
+            "name": "updateLabels",
+            "module": "../core/src/shared/mixins/Labelled.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "isLabelledMixin",

package/dist/src/IconElement.d.ts

@@ -0,0 +1,83 @@
+import { CSSResultGroup, LitElement, PropertyValues } from "lit";
+import { IconVariant } from "./IconVariant";
+import { IconGrade } from "./IconGrade";
+declare const M3eIconElement_base: import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor & typeof LitElement;
+/**
+ * A small symbol used to easily identify an action or category.
+ *
+ * @description
+ * The `m3e-icon` component makes it easier to use Material Symbols in your application. Material Symbols are Google's newest icons supporting
+ * a range of design variants. For more information, see:
+ * - {@link https://developers.google.com/fonts/docs/material_symbols|Material Symbol Guide}
+ * - {@link https://fonts.google.com/icons|Material Symbol Library}
+ *
+ * The Material Symbols font is the easiest way to incorporate Material Symbols into your application. Using the
+ * {@link https://developers.google.com/fonts/docs/css2#forming_api_urls|Fonts CSS API}, you can use variable fonts to optimize icon
+ * usage within your application. See {@link https://caniuse.com/variable-fonts|Can I Use's Variable Fonts} to determine whether
+ * your user's browser support variable fonts.
+ *
+ * @example
+ * The following example illustrates showing the `home` icon. The `name` attribute specifies the icon to present.
+ * ```html
+ * <m3e-icon name="home"></m3e-icon>
+ * ```
+ * @example
+ * The next example illustrates a link used to download a variable font for outlined icons with fill support.
+ * ```html
+ * <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0..1,0" rel="stylesheet"/>
+ * ```
+ *
+ * @tag m3e-icon
+ *
+ * @attr filled - Whether the icon is filled.
+ * @attr grade - The grade of the icon.
+ * @attr optical-size - A value from 20 to 48 indicating the optical size of the icon.
+ * @attr name - The name of the icon.
+ * @attr variant - The appearance variant of the icon.
+ * @attr weight - A value from 100 to 700 indicating the weight of the icon.
+ */
+export declare class M3eIconElement extends M3eIconElement_base {
+    /** The styles of the element. */
+    static styles: CSSResultGroup;
+    /** @private */ private readonly _icon?;
+    /** The name of the icon. */
+    name: string;
+    /**
+     * The appearance variant of the icon.
+     * @default "outlined"
+     */
+    variant: IconVariant;
+    /**
+     * Whether the icon is filled.
+     * @default false
+     */
+    filled: boolean;
+    /**
+     * The grade of the icon.
+     * @default "medium"
+     */
+    grade: IconGrade;
+    /**
+     * A value from 100 to 700 indicating the weight of the icon.
+     * @default 400
+     */
+    weight: number;
+    /**
+     * A value from 20 to 48 indicating the optical size of the icon.
+     * @default 24
+     */
+    opticalSize: number;
+    /** @inheritdoc */
+    connectedCallback(): void;
+    /** @inheritdoc */
+    protected updated(_changedProperties: PropertyValues<this>): void;
+    /** @inheritdoc */
+    protected render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "m3e-icon": M3eIconElement;
+    }
+}
+export {};
+//# sourceMappingURL=IconElement.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IconElement.d.ts","sourceRoot":"","sources":["../../src/IconElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAK5E,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;;AAExC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,qBACa,cAAe,SAAQ,mBAAuB;IACzD,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAsCpC;IAEF,eAAe,CAAiB,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAkB;IAEzE,4BAA4B;IAChB,IAAI,EAAE,MAAM,CAAM;IAE9B;;;OAGG;IAC0B,OAAO,EAAE,WAAW,CAAc;IAE/D;;;OAGG;IACyC,MAAM,UAAS;IAE3D;;;OAGG;IACS,KAAK,EAAE,SAAS,CAAY;IAExC;;;OAGG;IACyB,MAAM,SAAO;IAEzC;;;OAGG;IACoD,WAAW,SAAM;IAExE,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IAYlC,kBAAkB;cACC,OAAO,CAAC,kBAAkB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAoB1E,kBAAkB;cACC,MAAM,IAAI,OAAO;CAGrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,cAAc,CAAC;KAC5B;CACF"}

package/dist/src/IconGrade.d.ts

@@ -0,0 +1,3 @@
+/** Specifies the possible grades of an icon. */
+export type IconGrade = "low" | "medium" | "high";
+//# sourceMappingURL=IconGrade.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IconGrade.d.ts","sourceRoot":"","sources":["../../src/IconGrade.ts"],"names":[],"mappings":"AAAA,gDAAgD;AAChD,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC"}

package/dist/src/IconVariant.d.ts

@@ -0,0 +1,3 @@
+/** Specifies the possible appearance variants of an icon. */
+export type IconVariant = "outlined" | "rounded" | "sharp";
+//# sourceMappingURL=IconVariant.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IconVariant.d.ts","sourceRoot":"","sources":["../../src/IconVariant.ts"],"names":[],"mappings":"AAAA,6DAA6D;AAC7D,MAAM,MAAM,WAAW,GAAG,UAAU,GAAG,SAAS,GAAG,OAAO,CAAC"}

package/dist/src/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./IconElement";
+export * from "./IconGrade";
+export * from "./IconVariant";
+//# 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,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m3e/icon",
-  "version": "1.0.0-rc.2",
+  "version": "1.0.0-rc.4",
   "description": "Icon 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.4",
     "lit": "^3.3.0"
   },
   "devDependencies": {