@m3e/icon 1.0.0-rc.1

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2025 matraic
+Contact: matraic@yahoo.com
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,106 @@
+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.
+
+> **Part of the [M3E](../../README.md) monorepo**  
+> This package is maintained within the unified M3E repository, which provides a suite of Material 3 web components.
+
+## 📦 Installation
+
+```bash
+npm install @m3e/icon
+```
+
+## 💻 Editor Integration
+
+This package includes a [Custom Elements Manifest](https://github.com/webcomponents/custom-elements-manifest) to support enhanced editor tooling and developer experience.
+
+### Visual Studio Code
+
+To enable autocomplete and hover documentation for `@m3e/icon`, install the [Custom Elements Manifest Language Server](https://marketplace.visualstudio.com/items?itemName=pwrs.cem-language-server-vscode) extension. It will automatically detect the manifest bundled with this package and surface tag names, attributes, slots, and events in supported files.
+
+Alternately, you can explicitly reference the `html-custom-data.json` and `css-custom-data.json` in your workspace settings:
+
+```json
+{
+  "html.customData": ["./node_modules/@m3e/icon/dist/html-custom-data.json"],
+  "css.customData": ["./node_modules/@m3e/icon/dist/css-custom-data.json"]
+}
+```
+
+## 🚀 Browser Usage
+
+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.
+
+```html
+<script type="module" src="/node_modules/@m3e/icon/dist/index.js"></script>
+```
+
+In addition, you must use an [import map](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script/type/importmap) to include dependencies.
+
+```html
+<script type="importmap">
+  {
+    "imports": {
+      "lit": "https://cdn.jsdelivr.net/npm/lit@3.3.0/+esm",
+      "@m3e/core": "/node_modules/@m3e/core/dist/index.js"
+    }
+  }
+</script>
+```
+
+> For production, use index.min.js for faster load times.
+
+## 🗂️ Elements
+
+- `m3e-icon` — A small symbol used to easily identify an action or category.
+
+## 🧪 Examples
+
+The following example illustrates showing the `home` icon. The `name` attribute specifies the icon to present.
+
+```html
+<m3e-icon name="home"></m3e-icon>
+```
+
+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"
+/>
+```
+
+## 📖 API Reference
+
+### ⚙️ Attributes
+
+| Attribute      | Type                                 | Default      | Description                                                    |
+| -------------- | ------------------------------------ | ------------ | -------------------------------------------------------------- |
+| `name`         | `string`                             |              | The name of the icon.                                          |
+| `variant`      | `"outlined" \| "rounded" \| "sharp"` | `"outlined"` | The appearance variant of the icon.                            |
+| `filled`       | `boolean`                            | `false`      | Whether the icon is filled.                                    |
+| `grade`        | `"low" \| "medium" \| "high"`        | `"medium"`   | The grade of the icon.                                         |
+| `weight`       | `number`                             | `400`        | A value from 100 to 700 indicating the weight of the icon.     |
+| `optical-size` | `number`                             | `24`         | A value from 20 to 48 indicating the optical size of the icon. |
+
+### 🎛️ CSS Custom Properties
+
+| Property          | Description            |
+| ----------------- | ---------------------- |
+| `--m3e-icon-size` | Font size of the icon. |
+
+## 🤝 Contributing
+
+See the root monorepo `CONTRIBUTING.md` for guidelines on contributing to this package.
+
+## 📄 License
+
+This package is licensed under the MIT License.

package/cem.config.mjs

@@ -0,0 +1,16 @@
+import { customElementVsCodePlugin } from "custom-element-vs-code-integration";
+
+export default {
+  globs: ["src/**/*.ts"],
+  exclude: ["src/**/*.spec.ts"],
+  packagejson: true,
+  outdir: "dist",
+  litelement: true,
+  plugins: [
+    customElementVsCodePlugin({
+      outdir: "dist",
+      htmlFileName: "html-custom-data.json",
+      cssFileName: "css-custom-data.json",
+    }),
+  ],
+};

package/dist/css-custom-data.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://raw.githubusercontent.com/microsoft/vscode-css-languageservice/main/docs/customData.schema.json",
+  "version": 1.1,
+  "properties": [],
+  "pseudoElements": []
+}

package/dist/custom-elements.json

@@ -0,0 +1,220 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/IconElement.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "M3eIconElement",
+          "members": [
+            {
+              "kind": "field",
+              "name": "_icon",
+              "type": {
+                "text": "HTMLSpanElement | undefined"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "The name of the icon.",
+              "attribute": "name"
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "IconVariant"
+              },
+              "default": "\"outlined\"",
+              "description": "The appearance variant of the icon.",
+              "attribute": "variant",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "filled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the icon is filled.",
+              "attribute": "filled",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "grade",
+              "type": {
+                "text": "IconGrade"
+              },
+              "default": "\"medium\"",
+              "description": "The grade of the icon.",
+              "attribute": "grade"
+            },
+            {
+              "kind": "field",
+              "name": "weight",
+              "type": {
+                "text": "number"
+              },
+              "default": "400",
+              "description": "A value from 100 to 700 indicating the weight of the icon.",
+              "attribute": "weight"
+            },
+            {
+              "kind": "field",
+              "name": "opticalSize",
+              "type": {
+                "text": "number"
+              },
+              "default": "24",
+              "description": "A value from 20 to 48 indicating the optical size of the icon.",
+              "attribute": "optical-size"
+            }
+          ],
+          "attributes": [
+            {
+              "description": "Whether the icon is filled.",
+              "name": "filled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "filled"
+            },
+            {
+              "description": "The grade of the icon.",
+              "name": "grade",
+              "type": {
+                "text": "IconGrade"
+              },
+              "default": "\"medium\"",
+              "fieldName": "grade"
+            },
+            {
+              "description": "A value from 20 to 48 indicating the optical size of the icon.",
+              "name": "optical-size",
+              "type": {
+                "text": "number"
+              },
+              "default": "24",
+              "fieldName": "opticalSize"
+            },
+            {
+              "description": "The name of the icon.",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "fieldName": "name"
+            },
+            {
+              "description": "The appearance variant of the icon.",
+              "name": "variant",
+              "type": {
+                "text": "IconVariant"
+              },
+              "default": "\"outlined\"",
+              "fieldName": "variant"
+            },
+            {
+              "description": "A value from 100 to 700 indicating the weight of the icon.",
+              "name": "weight",
+              "type": {
+                "text": "number"
+              },
+              "default": "400",
+              "fieldName": "weight"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "Role",
+              "package": "@m3e/core"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "m3e-icon",
+          "customElement": true,
+          "summary": "A small symbol used to easily identify an action or category."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "M3eIconElement",
+          "declaration": {
+            "name": "M3eIconElement",
+            "module": "src/IconElement.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "m3e-icon",
+          "declaration": {
+            "name": "M3eIconElement",
+            "module": "src/IconElement.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/IconGrade.ts",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/IconVariant.ts",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "\"./IconElement\""
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "\"./IconGrade\""
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "\"./IconVariant\""
+          }
+        }
+      ]
+    }
+  ]
+}

package/dist/html-custom-data.json

@@ -0,0 +1,43 @@
+{
+  "$schema": "https://raw.githubusercontent.com/microsoft/vscode-html-languageservice/main/docs/customData.schema.json",
+  "version": 1.1,
+  "tags": [
+    {
+      "name": "m3e-icon",
+      "description": "A small symbol used to easily identify an action or category.\n---\n",
+      "attributes": [
+        {
+          "name": "filled",
+          "description": "Whether the icon is filled.",
+          "values": []
+        },
+        {
+          "name": "grade",
+          "description": "The grade of the icon.",
+          "values": [{ "name": "IconGrade" }]
+        },
+        {
+          "name": "optical-size",
+          "description": "A value from 20 to 48 indicating the optical size of the icon.",
+          "values": []
+        },
+        {
+          "name": "name",
+          "description": "The name of the icon.",
+          "values": []
+        },
+        {
+          "name": "variant",
+          "description": "The appearance variant of the icon.",
+          "values": [{ "name": "IconVariant" }]
+        },
+        {
+          "name": "weight",
+          "description": "A value from 100 to 700 indicating the weight of the icon.",
+          "values": []
+        }
+      ],
+      "references": []
+    }
+  ]
+}

package/dist/index.js

@@ -0,0 +1,236 @@
+/**
+ * @license MIT
+ * Copyright (c) 2025 matraic
+ * See LICENSE file in the project root for full license text.
+ */
+import { LitElement, html, css } from 'lit';
+import { Role } from '@m3e/core';
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+function __decorate(decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t$1=t=>(e,o)=>{ void 0!==o?o.addInitializer((()=>{customElements.define(t,e);})):customElements.define(t,e);};
+
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t=globalThis,e$3=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s=Symbol(),o$2=new WeakMap;let n$2 = class n{constructor(t,e,o){if(this._$cssResult$=true,o!==s)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e;}get styleSheet(){let t=this.o;const s=this.t;if(e$3&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=o$2.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o$2.set(s,t));}return t}toString(){return this.cssText}};const r$2=t=>new n$2("string"==typeof t?t:t+"",void 0,s),S=(s,o)=>{if(e$3)s.adoptedStyleSheets=o.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet));else for(const e of o){const o=document.createElement("style"),n=t.litNonce;void 0!==n&&o.setAttribute("nonce",n),o.textContent=e.cssText,s.appendChild(o);}},c$1=e$3?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$2(e)})(t):t;
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const{is:i,defineProperty:e$2,getOwnPropertyDescriptor:h,getOwnPropertyNames:r$1,getOwnPropertySymbols:o$1,getPrototypeOf:n$1}=Object,a=globalThis,c=a.trustedTypes,l=c?c.emptyScript:"",p=a.reactiveElementPolyfillSupport,d=(t,s)=>t,u={toAttribute(t,s){switch(s){case Boolean:t=t?l:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t);}return t},fromAttribute(t,s){let i=t;switch(s){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t);}catch(t){i=null;}}return i}},f=(t,s)=>!i(t,s),b={attribute:true,type:String,converter:u,reflect:false,useDefault:false,hasChanged:f};Symbol.metadata??=Symbol("metadata"),a.litPropertyMetadata??=new WeakMap;class y extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t);}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,s=b){if(s.state&&(s.attribute=false),this._$Ei(),this.prototype.hasOwnProperty(t)&&((s=Object.create(s)).wrapped=true),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),h=this.getPropertyDescriptor(t,i,s);void 0!==h&&e$2(this.prototype,t,h);}}static getPropertyDescriptor(t,s,i){const{get:e,set:r}=h(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t;}};return {get:e,set(s){const h=e?.call(this);r?.call(this,s),this.requestUpdate(t,h,i);},configurable:true,enumerable:true}}static getPropertyOptions(t){return this.elementProperties.get(t)??b}static _$Ei(){if(this.hasOwnProperty(d("elementProperties")))return;const t=n$1(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties);}static finalize(){if(this.hasOwnProperty(d("finalized")))return;if(this.finalized=true,this._$Ei(),this.hasOwnProperty(d("properties"))){const t=this.properties,s=[...r$1(t),...o$1(t)];for(const i of s)this.createProperty(i,t[i]);}const t=this[Symbol.metadata];if(null!==t){const s=litPropertyMetadata.get(t);if(void 0!==s)for(const[t,i]of s)this.elementProperties.set(t,i);}this._$Eh=new Map;for(const[t,s]of this.elementProperties){const i=this._$Eu(t,s);void 0!==i&&this._$Eh.set(i,t);}this.elementStyles=this.finalizeStyles(this.styles);}static finalizeStyles(s){const i=[];if(Array.isArray(s)){const e=new Set(s.flat(1/0).reverse());for(const s of e)i.unshift(c$1(s));}else void 0!==s&&i.push(c$1(s));return i}static _$Eu(t,s){const i=s.attribute;return  false===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=false,this.hasUpdated=false,this._$Em=null,this._$Ev();}_$Ev(){this._$ES=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach((t=>t(this)));}addController(t){(this._$EO??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.();}removeController(t){this._$EO?.delete(t);}_$E_(){const t=new Map,s=this.constructor.elementProperties;for(const i of s.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this._$Ep=t);}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return S(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(true),this._$EO?.forEach((t=>t.hostConnected?.()));}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach((t=>t.hostDisconnected?.()));}attributeChangedCallback(t,s,i){this._$AK(t,i);}_$ET(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor._$Eu(t,i);if(void 0!==e&&true===i.reflect){const h=(void 0!==i.converter?.toAttribute?i.converter:u).toAttribute(s,i.type);this._$Em=t,null==h?this.removeAttribute(e):this.setAttribute(e,h),this._$Em=null;}}_$AK(t,s){const i=this.constructor,e=i._$Eh.get(t);if(void 0!==e&&this._$Em!==e){const t=i.getPropertyOptions(e),h="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:u;this._$Em=e;const r=h.fromAttribute(s,t.type);this[e]=r??this._$Ej?.get(e)??r,this._$Em=null;}}requestUpdate(t,s,i){if(void 0!==t){const e=this.constructor,h=this[t];if(i??=e.getPropertyOptions(t),!((i.hasChanged??f)(h,s)||i.useDefault&&i.reflect&&h===this._$Ej?.get(t)&&!this.hasAttribute(e._$Eu(t,i))))return;this.C(t,s,i);} false===this.isUpdatePending&&(this._$ES=this._$EP());}C(t,s,{useDefault:i,reflect:e,wrapped:h},r){i&&!(this._$Ej??=new Map).has(t)&&(this._$Ej.set(t,r??s??this[t]),true!==h||void 0!==r)||(this._$AL.has(t)||(this.hasUpdated||i||(s=void 0),this._$AL.set(t,s)),true===e&&this._$Em!==t&&(this._$Eq??=new Set).add(t));}async _$EP(){this.isUpdatePending=true;try{await this._$ES;}catch(t){Promise.reject(t);}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[t,s]of this._$Ep)this[t]=s;this._$Ep=void 0;}const t=this.constructor.elementProperties;if(t.size>0)for(const[s,i]of t){const{wrapped:t}=i,e=this[s];true!==t||this._$AL.has(s)||void 0===e||this.C(s,void 0,i,e);}}let t=false;const s=this._$AL;try{t=this.shouldUpdate(s),t?(this.willUpdate(s),this._$EO?.forEach((t=>t.hostUpdate?.())),this.update(s)):this._$EM();}catch(s){throw t=false,this._$EM(),s}t&&this._$AE(s);}willUpdate(t){}_$AE(t){this._$EO?.forEach((t=>t.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=true,this.firstUpdated(t)),this.updated(t);}_$EM(){this._$AL=new Map,this.isUpdatePending=false;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return  true}update(t){this._$Eq&&=this._$Eq.forEach((t=>this._$ET(t,this[t]))),this._$EM();}updated(t){}firstUpdated(t){}}y.elementStyles=[],y.shadowRootOptions={mode:"open"},y[d("elementProperties")]=new Map,y[d("finalized")]=new Map,p?.({ReactiveElement:y}),(a.reactiveElementVersions??=[]).push("2.1.1");
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const o={attribute:true,type:String,converter:u,reflect:false,hasChanged:f},r=(t=o,e,r)=>{const{kind:n,metadata:i}=r;let s=globalThis.litPropertyMetadata.get(i);if(void 0===s&&globalThis.litPropertyMetadata.set(i,s=new Map),"setter"===n&&((t=Object.create(t)).wrapped=true),s.set(r.name,t),"accessor"===n){const{name:o}=r;return {set(r){const n=e.get.call(this);e.set.call(this,r),this.requestUpdate(o,n,t);},init(e){return void 0!==e&&this.C(o,void 0,t,e),e}}}if("setter"===n){const{name:o}=r;return function(r){const n=this[o];e.call(this,r),this.requestUpdate(o,n,t);}}throw Error("Unsupported decorator location: "+n)};function n(t){return (e,o)=>"object"==typeof o?r(t,e,o):((t,e,o)=>{const r=e.hasOwnProperty(o);return e.constructor.createProperty(o,t),r?Object.getOwnPropertyDescriptor(e,o):void 0})(t,e,o)}
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const e$1=(e,t,c)=>(c.configurable=true,c.enumerable=true,Reflect.decorate&&"object"!=typeof t&&Object.defineProperty(e,t,c),c);
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */function e(e,r){return (n,s,i)=>{const o=t=>t.renderRoot?.querySelector(e)??null;return e$1(n,s,{get(){return o(this)}})}}
+
+/**
+ * @summary
+ * 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.
+ */
+let M3eIconElement = class M3eIconElement extends Role(LitElement, "img") {
+    constructor() {
+        super(...arguments);
+        /** The name of the icon. */
+        this.name = "";
+        /**
+         * The appearance variant of the icon.
+         * @default "outlined"
+         */
+        this.variant = "outlined";
+        /**
+         * Whether the icon is filled.
+         * @default false
+         */
+        this.filled = false;
+        /**
+         * The grade of the icon.
+         * @default "medium"
+         */
+        this.grade = "medium";
+        /**
+         * A value from 100 to 700 indicating the weight of the icon.
+         * @default 400
+         */
+        this.weight = 400;
+        /**
+         * A value from 20 to 48 indicating the optical size of the icon.
+         * @default 24
+         */
+        this.opticalSize = 24;
+    }
+    /** @inheritdoc */
+    connectedCallback() {
+        if (!this.hasAttribute("aria-label") &&
+            !this.hasAttribute("aria-labelledby") &&
+            !this.hasAttribute("aria-hidden")) {
+            this.ariaHidden = "true";
+        }
+        super.connectedCallback();
+    }
+    /** @inheritdoc */
+    updated(_changedProperties) {
+        super.updated(_changedProperties);
+        if (_changedProperties.has("filled")) {
+            this._icon?.style.setProperty("--_icon-fill", this.filled ? "1" : "0");
+        }
+        if (_changedProperties.has("grade")) {
+            this._icon?.style.setProperty("--_icon-grade", this.grade === "low" ? "-25" : this.grade === "high" ? "200" : "0");
+        }
+        if (_changedProperties.has("weight")) {
+            this._icon?.style.setProperty("--_icon-weight", `${this.weight}`);
+        }
+        if (_changedProperties.has("opticalSize")) {
+            this._icon?.style.setProperty("--_icon-optical-size", `${this.opticalSize}`);
+        }
+    }
+    /** @inheritdoc */
+    render() {
+        return html `<div class="icon" aria-hidden="true">${this.name}</div>`;
+    }
+};
+/** The styles of the element. */
+M3eIconElement.styles = css `
+    :host {
+      display: inline-block;
+      user-select: none;
+      font-size: var(--m3e-icon-size, 1.5rem);
+      width: 1em;
+      vertical-align: middle;
+      overflow: hidden;
+    }
+    .icon {
+      font-weight: normal;
+      font-style: normal;
+      line-height: 1;
+      letter-spacing: normal;
+      text-transform: none;
+      white-space: nowrap;
+      word-wrap: normal;
+      direction: ltr;
+      font-feature-settings: "liga";
+      -webkit-font-smoothing: antialiased;
+      width: inherit;
+      height: inherit;
+      vertical-align: inherit;
+      font-variation-settings: "FILL" var(--_icon-fill, 0), "wght" var(--_icon-weight, 400),
+        "GRAD" var(--_icon-grade, 0), "opsz" var(--_icon-optical-size, 24);
+    }
+    :host([variant="outlined"]) .icon {
+      font-family: "Material Symbols Outlined";
+    }
+    :host([variant="rounded"]) .icon {
+      font-family: "Material Symbols Rounded";
+    }
+    :host([variant="sharp"]) .icon {
+      font-family: "Material Symbols Sharp";
+    }
+  `;
+__decorate([
+    e(".icon")
+], M3eIconElement.prototype, "_icon", void 0);
+__decorate([
+    n()
+], M3eIconElement.prototype, "name", void 0);
+__decorate([
+    n({ reflect: true })
+], M3eIconElement.prototype, "variant", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], M3eIconElement.prototype, "filled", void 0);
+__decorate([
+    n()
+], M3eIconElement.prototype, "grade", void 0);
+__decorate([
+    n({ type: Number })
+], M3eIconElement.prototype, "weight", void 0);
+__decorate([
+    n({ attribute: "optical-size", type: Number })
+], M3eIconElement.prototype, "opticalSize", void 0);
+M3eIconElement = __decorate([
+    t$1("m3e-icon")
+], M3eIconElement);
+
+export { M3eIconElement };
+//# sourceMappingURL=index.js.map