@m3e/web 2.3.1 → 2.3.2

package/dist/html-custom-data.json

@@ -1034,33 +1034,6 @@
       ],
       "references": []
     },
-    {
-      "name": "m3e-divider",
-      "description": "A thin line that separates content in lists or other containers.\n---\n\n\n### **CSS Properties:**\n - **--m3e-divider-thickness** - Thickness of the divider line. _(default: undefined)_\n- **--m3e-divider-color** - Color of the divider line. _(default: undefined)_\n- **--m3e-divider-inset-size** - When inset, fallback inset size used when no specific start or end inset is provided. _(default: undefined)_\n- **--m3e-divider-inset-start-size** - When inset, leading inset size. _(default: undefined)_\n- **--m3e-divider-inset-end-size** - When inset, trailing inset size. _(default: undefined)_",
-      "attributes": [
-        {
-          "name": "inset",
-          "description": "Whether the divider is indented with equal padding on both sides.",
-          "values": []
-        },
-        {
-          "name": "inset-start",
-          "description": "Whether the divider is indented with padding on the leading side.",
-          "values": []
-        },
-        {
-          "name": "inset-end",
-          "description": "Whether the divider is indented with padding on the trailing side.",
-          "values": []
-        },
-        {
-          "name": "vertical",
-          "description": "Whether the divider is vertically aligned with adjacent content.",
-          "values": []
-        }
-      ],
-      "references": []
-    },
     {
       "name": "m3e-drawer-container",
       "description": "A container for one or two sliding drawers.\n---\n\n\n### **Events:**\n - **change** - Emitted when the state of the start or end drawers change.\n\n### **Slots:**\n - _default_ - Renders the main content.\n- **start** - Renders the start drawer.\n- **end** - Renders the end drawer.\n\n### **CSS Properties:**\n - **--m3e-drawer-container-color** - The background color of the drawer container. _(default: undefined)_\n- **--m3e-drawer-container-elevation** - The elevation level of the drawer container. _(default: undefined)_\n- **--m3e-drawer-container-width** - The width of the drawer container. _(default: undefined)_\n- **--m3e-drawer-container-scrim-opacity** - The opacity of the scrim behind the drawer. _(default: undefined)_\n- **--m3e-modal-drawer-start-shape** - The shape of the drawer's start edge (typically left in LTR). _(default: undefined)_\n- **--m3e-modal-drawer-end-shape** - The shape of the drawer's end edge (typically right in LTR). _(default: undefined)_\n- **--m3e-modal-drawer-container-color** - The background color of the modal drawer container. _(default: undefined)_\n- **--m3e-modal-drawer-elevation** - The elevation level of the modal drawer container. _(default: undefined)_\n- **--m3e-drawer-divider-color** - The color of the divider between drawer sections. _(default: undefined)_\n- **--m3e-drawer-divider-thickness** - The thickness of the divider line. _(default: undefined)_",
@@ -1110,6 +1083,33 @@
       ],
       "references": []
     },
+    {
+      "name": "m3e-divider",
+      "description": "A thin line that separates content in lists or other containers.\n---\n\n\n### **CSS Properties:**\n - **--m3e-divider-thickness** - Thickness of the divider line. _(default: undefined)_\n- **--m3e-divider-color** - Color of the divider line. _(default: undefined)_\n- **--m3e-divider-inset-size** - When inset, fallback inset size used when no specific start or end inset is provided. _(default: undefined)_\n- **--m3e-divider-inset-start-size** - When inset, leading inset size. _(default: undefined)_\n- **--m3e-divider-inset-end-size** - When inset, trailing inset size. _(default: undefined)_",
+      "attributes": [
+        {
+          "name": "inset",
+          "description": "Whether the divider is indented with equal padding on both sides.",
+          "values": []
+        },
+        {
+          "name": "inset-start",
+          "description": "Whether the divider is indented with padding on the leading side.",
+          "values": []
+        },
+        {
+          "name": "inset-end",
+          "description": "Whether the divider is indented with padding on the trailing side.",
+          "values": []
+        },
+        {
+          "name": "vertical",
+          "description": "Whether the divider is vertically aligned with adjacent content.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "m3e-accordion",
       "description": "Combines multiple expansion panels in to an accordion.\n---\n\n\n### **Slots:**\n - _default_ - Renders the panels of the accordion.",
@@ -1395,7 +1395,7 @@
         {
           "name": "weight",
           "description": "A value from 100 to 700 indicating the weight of the icon.",
-          "values": []
+          "values": [{ "name": "IconWeight" }]
         }
       ],
       "references": []
@@ -1829,6 +1829,30 @@
       ],
       "references": []
     },
+    {
+      "name": "m3e-nav-rail",
+      "description": "A vertical bar, typically used on larger devices, that allows a user to switch between views.\n---\n\n\n### **Events:**\n - **change** - Emitted when the selected state of an item changes.\n\n### **Slots:**\n - _default_ - Renders the items of the bar.\n\n### **CSS Properties:**\n - **--m3e-nav-rail-top-space** - Top block padding for the nav rail. _(default: undefined)_\n- **--m3e-nav-rail-bottom-space** - Bottom block padding for the nav rail. _(default: undefined)_\n- **--m3e-nav-rail-compact-width** - Width of the nav rail in compact mode. _(default: undefined)_\n- **--m3e-nav-rail-expanded-inline-padding** - Inline padding for expanded nav rail. _(default: undefined)_\n- **--m3e-nav-rail-expanded-min-width** - Minimum width of the nav rail in expanded mode. _(default: undefined)_\n- **--m3e-nav-rail-expanded-max-width** - Maximum width of the nav rail in expanded mode. _(default: undefined)_\n- **--m3e-nav-rail-expanded-item-height** - Height of nav items in expanded mode. _(default: undefined)_\n- **--m3e-nav-rail-button-item-space** - Space below icon buttons and FABs. _(default: undefined)_\n- **--m3e-nav-rail-expanded-icon-button-inset** - Inset for icon buttons in expanded mode. _(default: undefined)_\n- **--m3e-nav-bar-height** - Height of the navigation bar. _(default: undefined)_\n- **--m3e-nav-bar-container-color** - Background color of the navigation bar container. _(default: undefined)_\n- **--m3e-nav-bar-vertical-item-width** - Minimum width of vertical nav items. _(default: undefined)_",
+      "attributes": [
+        {
+          "name": "mode",
+          "description": "The mode in which items in the rail are presented.",
+          "values": [{ "name": "NavBarMode" }]
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "m3e-nav-rail-toggle",
+      "description": "An element, nested within a clickable element, used to toggle the expanded state of a navigation rail.\n---\n\n\n### **Methods:**\n - **attach(control: _HTMLElement_): _void_** - Attaches the element to an interactive control.\n- **detach(): _void_** - Detaches the element from its current interactive control.\n",
+      "attributes": [
+        {
+          "name": "for",
+          "description": "The identifier of the interactive control to which this element is attached.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "m3e-nav-menu",
       "description": "A hierarchical menu, typically used on larger devices, that allows a user to switch between views.\n---\n\n\n### **Methods:**\n - **expand(items: _M3eNavMenuItemElement | undefined_): _void_** - Expands the specified items, or all items if no items are provided.\n- **collapse(items: _M3eNavMenuItemElement | undefined_): _void_** - Collapses the specified items, or all items if no items are provided.\n\n### **Slots:**\n - _default_ - Renders the items of the menu.\n\n### **CSS Properties:**\n - **--m3e-nav-menu-padding-top** - Top padding for the menu. _(default: undefined)_\n- **--m3e-nav-menu-padding-bottom** - Bottom padding for the menu. _(default: undefined)_\n- **--m3e-nav-menu-padding-left** - Left padding for the menu. _(default: undefined)_\n- **--m3e-nav-menu-padding-right** - Right padding for the menu. _(default: undefined)_\n- **--m3e-nav-menu-divider-margin** - Margin for divider elements in the menu. _(default: undefined)_\n- **--m3e-nav-menu-scrollbar-width** - Width of the menu scrollbar. _(default: undefined)_\n- **--m3e-nav-menu-scrollbar-color** - Color of the menu scrollbar. _(default: undefined)_",
@@ -1868,30 +1892,6 @@
       "attributes": [],
       "references": []
     },
-    {
-      "name": "m3e-nav-rail",
-      "description": "A vertical bar, typically used on larger devices, that allows a user to switch between views.\n---\n\n\n### **Events:**\n - **change** - Emitted when the selected state of an item changes.\n\n### **Slots:**\n - _default_ - Renders the items of the bar.\n\n### **CSS Properties:**\n - **--m3e-nav-rail-top-space** - Top block padding for the nav rail. _(default: undefined)_\n- **--m3e-nav-rail-bottom-space** - Bottom block padding for the nav rail. _(default: undefined)_\n- **--m3e-nav-rail-compact-width** - Width of the nav rail in compact mode. _(default: undefined)_\n- **--m3e-nav-rail-expanded-inline-padding** - Inline padding for expanded nav rail. _(default: undefined)_\n- **--m3e-nav-rail-expanded-min-width** - Minimum width of the nav rail in expanded mode. _(default: undefined)_\n- **--m3e-nav-rail-expanded-max-width** - Maximum width of the nav rail in expanded mode. _(default: undefined)_\n- **--m3e-nav-rail-expanded-item-height** - Height of nav items in expanded mode. _(default: undefined)_\n- **--m3e-nav-rail-button-item-space** - Space below icon buttons and FABs. _(default: undefined)_\n- **--m3e-nav-rail-expanded-icon-button-inset** - Inset for icon buttons in expanded mode. _(default: undefined)_\n- **--m3e-nav-bar-height** - Height of the navigation bar. _(default: undefined)_\n- **--m3e-nav-bar-container-color** - Background color of the navigation bar container. _(default: undefined)_\n- **--m3e-nav-bar-vertical-item-width** - Minimum width of vertical nav items. _(default: undefined)_",
-      "attributes": [
-        {
-          "name": "mode",
-          "description": "The mode in which items in the rail are presented.",
-          "values": [{ "name": "NavBarMode" }]
-        }
-      ],
-      "references": []
-    },
-    {
-      "name": "m3e-nav-rail-toggle",
-      "description": "An element, nested within a clickable element, used to toggle the expanded state of a navigation rail.\n---\n\n\n### **Methods:**\n - **attach(control: _HTMLElement_): _void_** - Attaches the element to an interactive control.\n- **detach(): _void_** - Detaches the element from its current interactive control.\n",
-      "attributes": [
-        {
-          "name": "for",
-          "description": "The identifier of the interactive control to which this element is attached.",
-          "values": []
-        }
-      ],
-      "references": []
-    },
     {
       "name": "m3e-optgroup",
       "description": "Groups options under a subheading.\n---\n\n\n### **Slots:**\n - _default_ - Renders the options of the group.\n- **label** - Renders the label of the group.\n\n### **CSS Properties:**\n - **--m3e-option-height** - The height of the group label container. _(default: undefined)_\n- **--m3e-option-font-size** - The font size of the group label. _(default: undefined)_\n- **--m3e-option-font-weight** - The font weight of the group label. _(default: undefined)_\n- **--m3e-option-line-height** - The line height of the group label. _(default: undefined)_\n- **--m3e-option-tracking** - The letter spacing of the group label. _(default: undefined)_\n- **--m3e-option-padding-end** - The right padding of the label. _(default: undefined)_\n- **--m3e-option-padding-start** - The left padding of the label. _(default: undefined)_\n- **--m3e-option-color** - The text color of the group label. _(default: undefined)_",
@@ -2653,33 +2653,6 @@
       ],
       "references": []
     },
-    {
-      "name": "m3e-textarea-autosize",
-      "description": "A non-visual element used to automatically resize a `textarea` to fit its content.\n---\n\n\n### **Methods:**\n - **attach(control: _HTMLElement_): _void_** - Attaches the element to an interactive control.\n- **detach(): _void_** - Detaches the element from its current interactive control.\n- **resizeToFitContent(force: _boolean_): _void_** - Resize the `textarea` to fit its content.\n- **reset()** - Resets the `textarea` to its original size.",
-      "attributes": [
-        {
-          "name": "disabled",
-          "description": "Whether auto-sizing is disabled.",
-          "values": []
-        },
-        {
-          "name": "for",
-          "description": "The identifier of the interactive control to which this element is attached.",
-          "values": []
-        },
-        {
-          "name": "max-rows",
-          "description": "The maximum amount of rows in the `textarea`.",
-          "values": []
-        },
-        {
-          "name": "min-rows",
-          "description": "The minimum amount of rows in the `textarea`.",
-          "values": []
-        }
-      ],
-      "references": []
-    },
     {
       "name": "m3e-tab",
       "description": "An interactive element that, when activated, presents an associated tab panel.\n---\n\n\n### **Events:**\n - **input** - Emitted when the selected state changes.\n- **change** - Emitted when the selected state changes.\n- **click** - Emitted when the element is clicked.\n\n### **Methods:**\n - **attach(control: _HTMLElement_): _void_** - Attaches the element to an interactive control.\n- **detach(): _void_** - Detaches the element from its current interactive control.\n\n### **Slots:**\n - _default_ - Renders the label of the tab.\n- **icon** - Renders an icon before the tab's label.\n\n### **CSS Properties:**\n - **--m3e-tab-font-size** - Font size for tab label. _(default: undefined)_\n- **--m3e-tab-font-weight** - Font weight for tab label. _(default: undefined)_\n- **--m3e-tab-line-height** - Line height for tab label. _(default: undefined)_\n- **--m3e-tab-tracking** - Letter spacing for tab label. _(default: undefined)_\n- **--m3e-tab-padding-start** - Padding on the inline start of the tab. _(default: undefined)_\n- **--m3e-tab-padding-end** - Padding on the inline end of the tab. _(default: undefined)_\n- **--m3e-tab-focus-ring-shape** - Border radius for the focus ring. _(default: undefined)_\n- **--m3e-tab-selected-color** - Text color for selected tab. _(default: undefined)_\n- **--m3e-tab-selected-container-hover-color** - Hover state-layer color for selected tab. _(default: undefined)_\n- **--m3e-tab-selected-container-focus-color** - Focus state-layer color for selected tab. _(default: undefined)_\n- **--m3e-tab-selected-ripple-color** - Ripple color for selected tab. _(default: undefined)_\n- **--m3e-tab-unselected-color** - Text color for unselected tab. _(default: undefined)_\n- **--m3e-tab-unselected-container-hover-color** - Hover state-layer color for unselected tab. _(default: undefined)_\n- **--m3e-tab-unselected-container-focus-color** - Focus state-layer color for unselected tab. _(default: undefined)_\n- **--m3e-tab-unselected-ripple-color** - Ripple color for unselected tab. _(default: undefined)_\n- **--m3e-tab-disabled-color** - Text color for disabled tab. _(default: undefined)_\n- **--m3e-tab-disabled-opacity** - Text opacity for disabled tab. _(default: undefined)_\n- **--m3e-tab-spacing** - Column gap between icon and label. _(default: undefined)_\n- **--m3e-tab-icon-size** - Font size for slotted icon. _(default: undefined)_",
@@ -2745,6 +2718,33 @@
       ],
       "references": []
     },
+    {
+      "name": "m3e-textarea-autosize",
+      "description": "A non-visual element used to automatically resize a `textarea` to fit its content.\n---\n\n\n### **Methods:**\n - **attach(control: _HTMLElement_): _void_** - Attaches the element to an interactive control.\n- **detach(): _void_** - Detaches the element from its current interactive control.\n- **resizeToFitContent(force: _boolean_): _void_** - Resize the `textarea` to fit its content.\n- **reset()** - Resets the `textarea` to its original size.",
+      "attributes": [
+        {
+          "name": "disabled",
+          "description": "Whether auto-sizing is disabled.",
+          "values": []
+        },
+        {
+          "name": "for",
+          "description": "The identifier of the interactive control to which this element is attached.",
+          "values": []
+        },
+        {
+          "name": "max-rows",
+          "description": "The maximum amount of rows in the `textarea`.",
+          "values": []
+        },
+        {
+          "name": "min-rows",
+          "description": "The minimum amount of rows in the `textarea`.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "m3e-theme",
       "description": "A non-visual element responsible for application-level theming.\n---\n\n\n### **Events:**\n - **change** - Dispatched when the theme changes.",

package/dist/icon-button.js

@@ -1,6 +1,6 @@
 /**
  * @license MIT
- * Copyright (c) 2025 matraic
+ * Copyright (c) 2025–2026 matraic
  * See LICENSE file in the project root for full license text.
  */
 import { __classPrivateFieldGet, __decorate } from 'tslib';

package/dist/icon-button.min.js

@@ -1,6 +1,6 @@
 /**
  * @license MIT
- * Copyright (c) 2025 matraic
+ * Copyright (c) 2025–2026 matraic
  * See LICENSE file in the project root for full license text.
  */
 import{__classPrivateFieldGet as e,__decorate as o}from"tslib";import{unsafeCSS as t,css as a,LitElement as n,nothing as r,html as c}from"lit";import{query as i,property as l}from"lit/decorators.js";import{DesignToken as s,KeyboardClick as d,LinkButton as u,FormSubmitter as v,Focusable as b,DisabledInteractive as m,Disabled as p,AttachInternals as h,Role as y,ResizeController as $,FocusController as f,PressedController as g,prefersReducedMotion as S,hasCustomState as C,renderPseudoLink as L,deleteCustomState as w,setCustomState as x,hasAssignedNodes as I,debounce as k,customElement as O}from"@m3e/web/core";const _={"extra-small":{containerHeight:t(`calc(var(--m3e-icon-button-extra-small-container-height, var(--m3e-icon-button-container-height, 2rem)) + ${s.density.calc(0)})`),outlineThickness:t("var(--m3e-icon-button-extra-small-outline-thickness, var(--m3e-icon-button-outline-thickness, 1px))"),iconSize:t(`calc(var(--m3e-icon-button-extra-small-icon-size, var(--m3e-icon-button-icon-size, 1.25rem)) + ${s.density.calc(0)})`),shapeRound:t(`var(--m3e-icon-button-extra-small-shape-round, var(--m3e-icon-button-shape-round, ${s.shape.corner.full}))`),shapeSquare:t(`var(--m3e-icon-button-extra-small-shape-square, var(--m3e-icon-button-shape-square, ${s.shape.corner.medium}))`),selectedShapeRound:t(`var(--m3e-icon-button-extra-small-selected-shape-round, var(--m3e-icon-button-selected-shape-round, ${s.shape.corner.medium}))`),selectedShapeSquare:t(`var(--m3e-icon-button-extra-small-selected-shape-square, var(--m3e-icon-button-selected-shape-square, ${s.shape.corner.full}))`),shapePressedMorph:t(`var(--m3e-icon-button-extra-small-shape-pressed-morph, var(--m3e-icon-button-shape-pressed-morph, ${s.shape.corner.small}))`),narrowLeadingSpace:t(`calc(var(--m3e-icon-button-extra-small-narrow-leading-space, var(--m3e-icon-button-narrow-leading-space, 0.25rem)) + ${s.density.calc(0)})`),narrowTrailingSpace:t(`calc(var(--m3e-icon-button-extra-small-narrow-trailing-space, var(--m3e-icon-button-narrow-trailing-space, 0.25rem)) + ${s.density.calc(0)})`),defaultLeadingSpace:t(`calc(var(--m3e-icon-button-extra-small-default-leading-space, var(--m3e-icon-button-default-leading-space, 0.375rem)) + ${s.density.calc(0)})`),defaultTrailingSpace:t(`calc(var(--m3e-icon-button-extra-small-default-trailing-space, var(--m3e-icon-button-default-trailing-space, 0.375rem)) + ${s.density.calc(0)})`),wideLeadingSpace:t(`calc(var(--m3e-icon-button-extra-small-wide-leading-space, var(--m3e-icon-button-wide-leading-space, 0.625rem)) + ${s.density.calc(0)})`),wideTrailingSpace:t(`calc(var(--m3e-icon-button-extra-small-wide-trailing-space, var(--m3e-icon-button-wide-trailing-space, 0.625rem)) + ${s.density.calc(0)})`)},small:{containerHeight:t(`calc(var(--m3e-icon-button-small-container-height, var(--m3e-icon-button-container-height, 2.5rem)) + ${s.density.calc(-1)})`),outlineThickness:t("var(--m3e-icon-button-small-outline-thickness, var(--m3e-icon-button-outline-thickness, 1px))"),iconSize:t(`calc(var(--m3e-icon-button-small-icon-size, var(--m3e-icon-button-icon-size, 1.5rem)) + ${s.density.calc(-1)})`),shapeRound:t(`var(--m3e-icon-button-small-shape-round, var(--m3e-icon-button-shape-round, ${s.shape.corner.full}))`),shapeSquare:t(`var(--m3e-icon-button-small-shape-square, var(--m3e-icon-button-shape-square, ${s.shape.corner.medium}))`),selectedShapeRound:t(`var(--m3e-icon-button-small-selected-shape-round, var(--m3e-icon-button-selected-shape-round, ${s.shape.corner.medium}))`),selectedShapeSquare:t(`var(--m3e-icon-button-small-selected-shape-square, var(--m3e-icon-button-selected-shape-square, ${s.shape.corner.full}))`),shapePressedMorph:t(`var(--m3e-icon-button-small-shape-pressed-morph, var(--m3e-icon-button-shape-pressed-morph, ${s.shape.corner.small}))`),narrowLeadingSpace:t(`calc(var(--m3e-icon-button-small-narrow-leading-space, var(--m3e-icon-button-narrow-leading-space, 0.25rem)) + ${s.density.calc(-1)})`),narrowTrailingSpace:t(`calc(var(--m3e-icon-button-small-narrow-trailing-space, var(--m3e-icon-button-narrow-trailing-space, 0.25rem)) + ${s.density.calc(-1)})`),defaultLeadingSpace:t(`calc(var(--m3e-icon-button-small-default-leading-space, var(--m3e-icon-button-default-leading-space, 0.5rem)) + ${s.density.calc(-1)})`),defaultTrailingSpace:t(`calc(var(--m3e-icon-button-small-default-trailing-space, var(--m3e-icon-button-default-trailing-space, 0.5rem)) + ${s.density.calc(-1)})`),wideLeadingSpace:t(`calc(var(--m3e-icon-button-small-wide-leading-space, var(--m3e-icon-button-wide-leading-space, 0.875rem)) + ${s.density.calc(-1)})`),wideTrailingSpace:t(`calc(var(--m3e-icon-button-small-wide-trailing-space, var(--m3e-icon-button-wide-trailing-space, 0.875rem)) + ${s.density.calc(-1)})`)},medium:{containerHeight:t(`calc(var(--m3e-icon-button-medium-container-height, var(--m3e-icon-button-container-height, 3.5rem)) + ${s.density.calc(-2)})`),outlineThickness:t("var(--m3e-icon-button-medium-outline-thickness, var(--m3e-icon-button-outline-thickness, 1px))"),iconSize:t(`calc(var(--m3e-icon-button-medium-icon-size, var(--m3e-icon-button-icon-size, 1.5rem)) + ${s.density.calc(-2)})`),shapeRound:t(`var(--m3e-icon-button-medium-shape-round, var(--m3e-icon-button-shape-round, ${s.shape.corner.full}))`),shapeSquare:t(`var(--m3e-icon-button-medium-shape-square, var(--m3e-icon-button-shape-square, ${s.shape.corner.large}))`),selectedShapeRound:t(`var(--m3e-icon-button-medium-selected-shape-round, var(--m3e-icon-button-selected-shape-round, ${s.shape.corner.large}))`),selectedShapeSquare:t(`var(--m3e-icon-button-medium-selected-shape-square, var(--m3e-icon-button-selected-shape-square, ${s.shape.corner.full}))`),shapePressedMorph:t(`var(--m3e-icon-button-medium-shape-pressed-morph, var(--m3e-icon-button-shape-pressed-morph, ${s.shape.corner.medium}))`),narrowLeadingSpace:t(`calc(var(--m3e-icon-button-medium-narrow-leading-space, var(--m3e-icon-button-narrow-leading-space, 0.75rem)) + ${s.density.calc(-2)})`),narrowTrailingSpace:t(`calc(var(--m3e-icon-button-medium-narrow-trailing-space, var(--m3e-icon-button-narrow-trailing-space, 0.75rem)) + ${s.density.calc(-2)})`),defaultLeadingSpace:t(`calc(var(--m3e-icon-button-medium-default-leading-space, var(--m3e-icon-button-default-leading-space, 1rem)) + ${s.density.calc(-2)})`),defaultTrailingSpace:t(`calc(var(--m3e-icon-button-medium-default-trailing-space, var(--m3e-icon-button-default-trailing-space, 1rem)) + ${s.density.calc(-2)})`),wideLeadingSpace:t(`calc(var(--m3e-icon-button-medium-wide-leading-space, var(--m3e-icon-button-wide-leading-space, 1.5rem)) + ${s.density.calc(-2)})`),wideTrailingSpace:t(`calc(var(--m3e-icon-button-medium-wide-trailing-space, var(--m3e-icon-button-wide-trailing-space, 1.5rem)) + ${s.density.calc(-2)})`)},large:{containerHeight:t(`calc(var(--m3e-icon-button-large-container-height, var(--m3e-icon-button-container-height, 6rem)) + ${s.density.calc(-3)})`),outlineThickness:t("var(--m3e-icon-button-large-outline-thickness, var(--m3e-icon-button-outline-thickness, 2px))"),iconSize:t(`calc(var(--m3e-icon-button-large-icon-size, var(--m3e-icon-button-icon-size, 2rem)) + ${s.density.calc(-3)})`),shapeRound:t(`var(--m3e-icon-button-large-shape-round, var(--m3e-icon-button-shape-round, ${s.shape.corner.full}))`),shapeSquare:t(`var(--m3e-icon-button-large-shape-square, var(--m3e-icon-button-shape-square, ${s.shape.corner.extraLarge}))`),selectedShapeRound:t(`var(--m3e-icon-button-large-selected-shape-round, var(--m3e-icon-button-selected-shape-round, ${s.shape.corner.extraLarge}))`),selectedShapeSquare:t(`var(--m3e-icon-button-large-selected-shape-square, var(--m3e-icon-button-selected-shape-square, ${s.shape.corner.full}))`),shapePressedMorph:t(`var(--m3e-icon-button-large-shape-pressed-morph, var(--m3e-icon-button-shape-pressed-morph, ${s.shape.corner.large}))`),narrowLeadingSpace:t(`calc(var(--m3e-icon-button-large-narrow-leading-space, var(--m3e-icon-button-narrow-leading-space, 1rem)) + ${s.density.calc(-3)})`),narrowTrailingSpace:t(`calc(var(--m3e-icon-button-large-narrow-trailing-space, var(--m3e-icon-button-narrow-trailing-space, 1rem)) + ${s.density.calc(-3)})`),defaultLeadingSpace:t(`calc(var(--m3e-icon-button-large-default-leading-space, var(--m3e-icon-button-default-leading-space, 2rem)) + ${s.density.calc(-3)})`),defaultTrailingSpace:t(`calc(var(--m3e-icon-button-large-default-trailing-space, var(--m3e-icon-button-default-trailing-space, 2rem)) + ${s.density.calc(-3)})`),wideLeadingSpace:t(`calc(var(--m3e-icon-button-large-wide-leading-space, var(--m3e-icon-button-wide-leading-space, 3rem)) + ${s.density.calc(-3)})`),wideTrailingSpace:t(`calc(var(--m3e-icon-button-large-wide-trailing-space, var(--m3e-icon-button-wide-trailing-space, 3rem)) + ${s.density.calc(-3)})`)},"extra-large":{containerHeight:t(`calc(var(--m3e-icon-button-extra-large-container-height, var(--m3e-icon-button-container-height, 8.5rem)) + ${s.density.calc(-3)})`),outlineThickness:t("var(--m3e-icon-button-extra-large-outline-thickness, var(--m3e-icon-button-outline-thickness, 3px))"),iconSize:t(`calc(var(--m3e-icon-button-extra-large-icon-size, var(--m3e-icon-button-icon-size, 2.5rem)) + ${s.density.calc(-3)})`),shapeRound:t(`var(--m3e-icon-button-extra-large-shape-round, var(--m3e-icon-button-shape-round, ${s.shape.corner.full}))`),shapeSquare:t(`var(--m3e-icon-button-extra-large-shape-square, var(--m3e-icon-button-shape-square, ${s.shape.corner.extraLarge}))`),selectedShapeRound:t(`var(--m3e-icon-button-extra-large-selected-shape-round, var(--m3e-icon-button-selected-shape-round, ${s.shape.corner.extraLarge}))`),selectedShapeSquare:t(`var(--m3e-icon-button-extra-large-selected-shape-square, var(--m3e-icon-button-selected-shape-square, ${s.shape.corner.full}))`),shapePressedMorph:t(`var(--m3e-icon-button-extra-large-shape-pressed-morph, var(--m3e-icon-button-shape-pressed-morph, ${s.shape.corner.large}))`),narrowLeadingSpace:t(`calc(var(--m3e-icon-button-extra-large-narrow-leading-space, var(--m3e-icon-button-narrow-leading-space, 2rem)) + ${s.density.calc(-3)})`),narrowTrailingSpace:t(`calc(var(--m3e-icon-button-extra-large-narrow-trailing-space, var(--m3e-icon-button-narrow-trailing-space, 2rem)) + ${s.density.calc(-3)})`),defaultLeadingSpace:t(`calc(var(--m3e-icon-button-extra-large-default-leading-space, var(--m3e-icon-button-default-leading-space, 3rem)) + ${s.density.calc(-3)})`),defaultTrailingSpace:t(`calc(var(--m3e-icon-button-extra-large-default-trailing-space, var(--m3e-icon-button-default-trailing-space, 3rem)) + ${s.density.calc(-3)})`),wideLeadingSpace:t(`calc(var(--m3e-icon-button-extra-large-wide-leading-space, var(--m3e-icon-button-wide-leading-space, 4.5rem)) + ${s.density.calc(-3)})`),wideTrailingSpace:t(`calc(var(--m3e-icon-button-extra-large-wide-trailing-space, var(--m3e-icon-button-wide-trailing-space, 4.5rem)) + ${s.density.calc(-3)})`)}};function q(e){return a`:host([size="${t(e)}"]) .base { height: ${_[e].containerHeight}; } :host([size="${t(e)}"][width="default"]) .wrapper { padding-inline-start: ${_[e].defaultLeadingSpace}; padding-inline-end: ${_[e].defaultTrailingSpace}; } :host([size="${t(e)}"][width="narrow"]) .wrapper { padding-inline-start: ${_[e].narrowLeadingSpace}; padding-inline-end: ${_[e].narrowTrailingSpace}; } :host([size="${t(e)}"][width="wide"]) .wrapper { padding-inline-start: ${_[e].wideLeadingSpace}; padding-inline-end: ${_[e].wideTrailingSpace}; } :host([size="${t(e)}"]) .icon { font-size: ${_[e].iconSize}; } :host([size="${t(e)}"]) .base { outline-offset: calc(0px - ${_[e].outlineThickness}); outline-width: ${_[e].outlineThickness}; } :host(:not(:state(-connected))[size="${t(e)}"][shape="rounded"]:not(:state(-pressed))) .base { border-radius: var(--_button-shape, ${_[e].shapeRound}); } :host(:not(:state(-connected))[size="${t(e)}"][shape="square"]) .base { border-radius: ${_[e].shapeSquare}; } :host(:not(:state(-connected))[size="${t(e)}"][shape="rounded"][toggle][selected]:not(:state(-pressed))) .base { border-radius: ${_[e].selectedShapeRound}; } :host(:not(:state(-connected))[size="${t(e)}"][shape="square"][toggle][selected]:not(:state(-pressed))) .base { border-radius: var(--_button-shape, ${_[e].selectedShapeSquare}); } :host(:not(:state(-connected))[size="${t(e)}"]:state(-pressed)) .base { border-radius: ${_[e].shapePressedMorph}; } :host(:state(-connected)[size="${t(e)}"][shape="rounded"]) .base { border-start-start-radius: var( --_button-rounded-start-shape, var(--_button-shape, ${_[e].shapeRound}) ); border-end-start-radius: var( --_button-rounded-start-shape, var(--_button-shape, ${_[e].shapeRound}) ); border-start-end-radius: var( --_button-rounded-end-shape, var(--_button-shape, ${_[e].shapeRound}) ); border-end-end-radius: var( --_button-rounded-end-shape, var(--_button-shape, ${_[e].shapeRound}) ); } :host(:state(-connected)[size="${t(e)}"][shape="square"]) .base { border-start-start-radius: var(--_button-square-start-shape, ${_[e].shapeSquare}); border-end-start-radius: var(--_button-square-start-shape, ${_[e].shapeSquare}); border-start-end-radius: var(--_button-square-end-shape, ${_[e].shapeSquare}); border-end-end-radius: var(--_button-square-end-shape, ${_[e].shapeSquare}); } :host(:state(-connected)[size="${t(e)}"][shape="square"][toggle][selected]:not(:state(-pressed))) .base { border-radius: var(--_button-shape, ${_[e].selectedShapeSquare}); } :host(:state(-connected)[size="${t(e)}"]:state(-pressed)) .base { border-start-start-radius: var( --_button-start-shape-pressed-morph, ${_[e].shapePressedMorph} ); border-end-start-radius: var(--_button-start-shape-pressed-morph, ${_[e].shapePressedMorph}); border-start-end-radius: var(--_button-end-shape-pressed-morph, ${_[e].shapePressedMorph}); border-end-end-radius: var(--_button-end-shape-pressed-morph, ${_[e].shapePressedMorph}); }`}const z=[q("extra-small"),q("small"),q("medium"),q("large"),q("extra-large")],P=a`:host { display: inline-block; outline: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; width: 100%; transition: ${t(`background-color ${s.motion.duration.short4} ${s.motion.easing.standard}`)}; } .touch { position: absolute; aspect-ratio: 1 / 1; height: 3rem; left: auto; right: auto; } :host(:state(-pressed)) .base, :host(:state(-resting)) .base { transition: ${t(`background-color ${s.motion.duration.short4} ${s.motion.easing.standard},\n          border-radius ${s.motion.spring.fastEffects}`)}; } .wrapper { width: 100%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; transition: ${t(`padding-inline ${s.motion.spring.fastEffects}`)}; } .icon { transition: ${t(`color ${s.motion.duration.short4} ${s.motion.easing.standard}`)}; --m3e-icon-size: 1em; } :host(:not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host([disabled-interactive]) { cursor: not-allowed; } ::slotted(*) { font-size: inherit !important; flex: none; transform: var(--_icon-button-icon-transform); transform-origin: center center; transition: ${t(`transform var(--_icon-button-icon-transform-transition, ${s.motion.spring.fastEffects})`)}; } ::slotted(svg) { width: 1em; height: 1em; } :host([toggle]:not([selected])) .base.with-selected-icon slot[name="selected"], :host([toggle][selected]) .base.with-selected-icon slot:not([name]) { display: none; } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } :host(:state(-grouped):state(-connected)) { flex: 1 1 auto; } :host(:state(-grouped):not(:state(-connected)):not(:state(-adjacent-pressed)):not(:state(-pressed))) { flex-shrink: 0; flex-grow: 0; } :host(:state(-grouped):not(:state(-connected)):state(-adjacent-pressed):not(:state(-pressed))) { flex-shrink: 1; min-width: 0; } :host(:state(-grouped):not(:state(-connected)):state(-adjacent-pressed):not(:state(-pressed))) .label { text-overflow: clip; } :host(:state(-grouped):not(:state(-connected)):state(-pressed):not([disabled-interactive]):not(:disabled)) { flex-shrink: 0; flex-basis: calc( var(--_button-width) + calc(var(--_button-width) * var(--m3e-standard-button-group-width-multiplier, 0.15)) ); } @media (forced-colors: active) { .base, .icon { transition: none; } :host(:state(-pressed)) .base, :host(:state(-resting)) .base { transition: border-radius ${s.motion.spring.fastEffects}; } :host([variant]:not(:disabled):not([disabled-interactive]):not([toggle])) .base { background-color: ButtonFace; outline-color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive]):not([toggle])) .label, :host([variant]:not(:disabled):not([disabled-interactive]):not([toggle])) .icon { color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .base { background-color: ButtonFace; outline-color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .label, :host([variant]:not(:disabled):not([disabled-interactive])[toggle]:not([selected])) .icon { color: ButtonText; } :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .base { background-color: ButtonText; outline: none; } :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .label, :host([variant]:not(:disabled):not([disabled-interactive])[toggle][selected]) .icon { forced-color-adjust: none; color: ButtonFace; background-color: ButtonText; } :host([variant]:disabled) .base, :host([variant][disabled-interactive]) .base { outline-color: GrayText; background-color: unset; } :host([variant]:disabled) .label, :host([variant][disabled-interactive]) .label, :host([variant]:disabled) .icon, :host([variant][disabled-interactive]) .icon { color: GrayText; } .base { outline-style: solid; } :host([size="extra-small"]) .base { outline-offset: calc(0px - var(--m3e-icon-button-extra-small-outline-thickness, 1px)); outline-width: var(--m3e-icon-button-extra-small-outline-thickness, 1px); } :host([size="small"]) .base { outline-offset: calc(0px - var(--m3e-icon-button-small-outline-thickness, 1px)); outline-width: var(--m3e-icon-button-small-outline-thickness, 1px); } :host([size="medium"]) .base { outline-offset: calc(0px - var(--m3e-icon-button-medium-outline-thickness, 1px)); outline-width: var(--m3e-icon-button-medium-outline-thickness, 1px); } :host([size="large"]) .base { outline-offset: calc(0px - var(--m3e-icon-button-large-outline-thickness, 2px)); outline-width: var(--m3e-icon-button-large-outline-thickness, 2px); } :host([size="extra-large"]) .base { outline-offset: calc(0px - var(--m3e-icon-button-extra-large-outline-thickness, 3px)); outline-width: var(--m3e-icon-button-extra-large-outline-thickness, 3px); } } @media (prefers-reduced-motion) { :host(:state(-pressed)) .base, :host(:state(-resting)) .base, .base, .wrapper, .icon { transition: none; } }`,V={elevated:{iconColor:t(`var(--m3e-elevated-icon-button-icon-color, var(--m3e-icon-button-icon-color, ${s.color.primary}))`),containerColor:t(`var(--m3e-elevated-icon-button-container-color, var(--m3e-icon-button-container-color, ${s.color.surfaceContainerLow}))`),containerElevation:t(`var(--m3e-elevated-icon-button-container-elevation, var(--m3e-icon-button-container-elevation, ${s.elevation.level1}))`),unselectedIconColor:t(`var(--m3e-elevated-icon-button-unselected-icon-color, var(--m3e-icon-button-unselected-icon-color, ${s.color.primary}))`),unselectedContainerColor:t(`var(--m3e-elevated-icon-button-unselected-container-color, var(--m3e-icon-button-unselected-container-color, ${s.color.surfaceContainerLow}))`),selectedIconColor:t(`var(--m3e-elevated-icon-button-selected-icon-color, var(--m3e-icon-button-selected-icon-color, ${s.color.onPrimary}))`),selectedContainerColor:t(`var(--m3e-elevated-icon-button-selected-container-color, var(--m3e-icon-button-selected-container-color, ${s.color.primary}))`),disabled:{containerColor:t(`var(--m3e-elevated-icon-button-disabled-container-color, var(--m3e-icon-button-disabled-container-color, ${s.color.onSurface}))`),containerOpacity:t("var(--m3e-elevated-icon-button-disabled-container-opacity, var(--m3e-icon-button-disabled-container-opacity, 10%))"),iconColor:t(`var(--m3e-elevated-icon-button-disabled-icon-color, var(--m3e-icon-button-disabled-icon-color, ${s.color.onSurface}))`),iconOpacity:t("var(--m3e-elevated-icon-button-disabled-icon-opacity, var(--m3e-icon-button-disabled-icon-opacity, 38%))"),containerElevation:t(`var(--m3e-elevated-icon-button-disabled-container-elevation, var(--m3e-icon-button-disabled-container-elevation, ${s.elevation.level0}))`)},hover:{iconColor:t(`var(--m3e-elevated-icon-button-hover-icon-color, var(--m3e-icon-button-hover-icon-color, ${s.color.primary}))`),stateLayerColor:t(`var(--m3e-elevated-icon-button-hover-state-layer-color, var(--m3e-icon-button-hover-state-layer-color, ${s.color.primary}))`),stateLayerOpacity:t(`var(--m3e-elevated-icon-button-hover-state-layer-opacity, var(--m3e-icon-button-hover-state-layer-opacity, ${s.state.hoverStateLayerOpacity}))`),containerElevation:t(`var(--m3e-elevated-icon-button-hover-container-elevation, var(--m3e-icon-button-hover-container-elevation, ${s.elevation.level2}))`),unselectedIconColor:t(`var(--m3e-elevated-icon-button-hover-unselected-icon-color, var(--m3e-icon-button-hover-unselected-icon-color, ${s.color.primary}))`),unselectedStateLayerColor:t(`var(--m3e-elevated-icon-button-hover-unselected-state-layer-color, var(--m3e-icon-button-hover-unselected-state-layer-color, ${s.color.primary}))`),selectedIconColor:t(`var(--m3e-elevated-icon-button-hover-selected-icon-color, var(--m3e-icon-button-hover-selected-icon-color, ${s.color.onPrimary}))`),selectedStateLayerColor:t(`var(--m3e-elevated-icon-button-hover-selected-state-layer-color, var(--m3e-icon-button-hover-selected-state-layer-color, ${s.color.onPrimary}))`)},focus:{iconColor:t(`var(--m3e-elevated-icon-button-focus-icon-color, var(--m3e-icon-button-focus-icon-color, ${s.color.primary}))`),stateLayerColor:t(`var(--m3e-elevated-icon-button-focus-state-layer-color, var(--m3e-icon-button-focus-state-layer-color, ${s.color.primary}))`),stateLayerOpacity:t(`var(--m3e-elevated-icon-button-focus-state-layer-opacity, var(--m3e-icon-button-focus-state-layer-opacity, ${s.state.focusStateLayerOpacity}))`),containerElevation:t(`var(--m3e-elevated-icon-button-focus-container-elevation, var(--m3e-icon-button-focus-container-elevation, ${s.elevation.level1}))`),unselectedIconColor:t(`var(--m3e-elevated-icon-button-focus-unselected-icon-color, var(--m3e-icon-button-focus-unselected-icon-color, ${s.color.primary}))`),unselectedStateLayerColor:t(`var(--m3e-elevated-icon-button-focus-unselected-state-layer-color, var(--m3e-icon-button-focus-unselected-state-layer-color, ${s.color.primary}))`),selectedIconColor:t(`var(--m3e-elevated-icon-button-focus-selected-icon-color, var(--m3e-icon-button-focus-selected-icon-color, ${s.color.onPrimary}))`),selectedStateLayerColor:t(`var(--m3e-elevated-icon-button-focus-selected-state-layer-color, var(--m3e-icon-button-focus-selected-state-layer-color, ${s.color.onPrimary}))`)},pressed:{iconColor:t(`var(--m3e-elevated-icon-button-pressed-icon-color, var(--m3e-icon-button-pressed-icon-color, ${s.color.primary}))`),stateLayerColor:t(`var(--m3e-elevated-icon-button-pressed-state-layer-color, var(--m3e-icon-button-pressed-state-layer-color, ${s.color.primary}))`),stateLayerOpacity:t(`var(--m3e-elevated-icon-button-pressed-state-layer-opacity, var(--m3e-icon-button-pressed-state-layer-opacity, ${s.state.pressedStateLayerOpacity}))`),containerElevation:t(`var(--m3e-elevated-icon-button-pressed-container-elevation, var(--m3e-icon-button-pressed-container-elevation, ${s.elevation.level1}))`),unselectedIconColor:t(`var(--m3e-elevated-icon-button-pressed-unselected-icon-color, var(--m3e-icon-button-pressed-unselected-icon-color, ${s.color.primary}))`),unselectedStateLayerColor:t(`var(--m3e-elevated-icon-button-pressed-unselected-state-layer-color, var(--m3e-icon-button-pressed-unselected-state-layer-color, ${s.color.primary}))`),selectedIconColor:t(`var(--m3e-elevated-icon-button-pressed-selected-icon-color, var(--m3e-icon-button-pressed-selected-icon-color, ${s.color.onPrimary}))`),selectedStateLayerColor:t(`var(--m3e-elevated-icon-button-pressed-selected-state-layer-color, var(--m3e-icon-button-pressed-selected-state-layer-color, ${s.color.onPrimary}))`)}},outlined:{iconColor:t(`var(--m3e-outlined-icon-button-icon-color, var(--m3e-icon-button-icon-color, ${s.color.onSurfaceVariant}))`),outlineColor:t(`var(--m3e-outlined-icon-button-outline-color, var(--m3e-icon-button-outline-color, ${s.color.outlineVariant}))`),unselectedIconColor:t(`var(--m3e-outlined-icon-button-unselected-icon-color, var(--m3e-icon-button-unselected-icon-color, ${s.color.onSurfaceVariant}))`),selectedIconColor:t(`var(--m3e-outlined-icon-button-selected-icon-color, var(--m3e-icon-button-selected-icon-color, ${s.color.inverseOnSurface}))`),selectedContainerColor:t(`var(--m3e-outlined-icon-button-selected-container-color, var(--m3e-icon-button-selected-container-color, ${s.color.inverseSurface}))`),disabled:{containerColor:t(`var(--m3e-outlined-icon-button-disabled-container-color, var(--m3e-icon-button-disabled-container-color, ${s.color.onSurface}))`),containerOpacity:t("var(--m3e-outlined-icon-button-disabled-container-opacity, var(--m3e-icon-button-disabled-container-opacity, 10%))"),iconColor:t(`var(--m3e-outlined-icon-button-disabled-icon-color, var(--m3e-icon-button-disabled-icon-color, ${s.color.onSurface}))`),iconOpacity:t("var(--m3e-outlined-icon-button-disabled-icon-opacity, var(--m3e-icon-button-disabled-icon-opacity, 38%))"),outlineColor:t(`var(--m3e-outlined-icon-button-disabled-outline-color, var(--m3e-icon-button-disabled-outline-color, ${s.color.outlineVariant}))`)},hover:{iconColor:t(`var(--m3e-outlined-icon-button-hover-icon-color, var(--m3e-icon-button-hover-icon-color, ${s.color.onSurfaceVariant}))`),outlineColor:t(`var(--m3e-outlined-icon-button-hover-outline-color, var(--m3e-icon-button-hover-outline-color, ${s.color.outlineVariant}))`),stateLayerColor:t(`var(--m3e-outlined-icon-button-hover-state-layer-color, var(--m3e-icon-button-hover-state-layer-color, ${s.color.onSurfaceVariant}))`),stateLayerOpacity:t(`var(--m3e-outlined-icon-button-hover-state-layer-opacity, var(--m3e-icon-button-hover-state-layer-opacity, ${s.state.hoverStateLayerOpacity}))`),unselectedIconColor:t(`var(--m3e-outlined-icon-button-hover-unselected-icon-color, var(--m3e-icon-button-hover-unselected-icon-color, ${s.color.onSurfaceVariant}))`),unselectedStateLayerColor:t(`var(--m3e-outlined-icon-button-hover-unselected-state-layer-color, var(--m3e-icon-button-hover-unselected-state-layer-color, ${s.color.onSurfaceVariant}))`),selectedIconColor:t(`var(--m3e-outlined-icon-button-hover-selected-icon-color, var(--m3e-icon-button-hover-selected-icon-color, ${s.color.inverseOnSurface}))`),selectedStateLayerColor:t(`var(--m3e-outlined-icon-button-hover-selected-state-layer-color, var(--m3e-icon-button-hover-selected-state-layer-color, ${s.color.inverseOnSurface}))`)},focus:{iconColor:t(`var(--m3e-outlined-icon-button-focus-icon-color, var(--m3e-icon-button-focus-icon-color, ${s.color.onSurfaceVariant}))`),outlineColor:t(`var(--m3e-outlined-icon-button-focus-outline-color, var(--m3e-icon-button-focus-outline-color, ${s.color.outlineVariant}))`),stateLayerColor:t(`var(--m3e-outlined-icon-button-focus-state-layer-color, var(--m3e-icon-button-focus-state-layer-color, ${s.color.onSurfaceVariant}))`),stateLayerOpacity:t(`var(--m3e-outlined-icon-button-focus-state-layer-opacity, var(--m3e-icon-button-focus-state-layer-opacity, ${s.state.focusStateLayerOpacity}))`),unselectedIconColor:t(`var(--m3e-outlined-icon-button-focus-unselected-icon-color, var(--m3e-icon-button-focus-unselected-icon-color, ${s.color.onSurfaceVariant}))`),unselectedStateLayerColor:t(`var(--m3e-outlined-icon-button-focus-unselected-state-layer-color, var(--m3e-icon-button-focus-unselected-state-layer-color, ${s.color.onSurfaceVariant}))`),selectedIconColor:t(`var(--m3e-outlined-icon-button-focus-selected-icon-color, var(--m3e-icon-button-focus-selected-icon-color, ${s.color.inverseOnSurface}))`),selectedStateLayerColor:t(`var(--m3e-outlined-icon-button-focus-selected-state-layer-color, var(--m3e-icon-button-focus-selected-state-layer-color, ${s.color.inverseOnSurface}))`)},pressed:{iconColor:t(`var(--m3e-outlined-icon-button-pressed-icon-color, var(--m3e-icon-button-pressed-icon-color, ${s.color.onSurfaceVariant}))`),outlineColor:t(`var(--m3e-outlined-icon-button-pressed-outline-color, var(--m3e-icon-button-pressed-outline-color, ${s.color.outlineVariant}))`),stateLayerColor:t(`var(--m3e-outlined-icon-button-pressed-state-layer-color, var(--m3e-icon-button-pressed-state-layer-color, ${s.color.onSurfaceVariant}))`),stateLayerOpacity:t(`var(--m3e-outlined-icon-button-pressed-state-layer-opacity, var(--m3e-icon-button-pressed-state-layer-opacity, ${s.state.pressedStateLayerOpacity}))`),unselectedIconColor:t(`var(--m3e-outlined-icon-button-pressed-unselected-icon-color, var(--m3e-icon-button-pressed-unselected-icon-color, ${s.color.onSurfaceVariant}))`),unselectedStateLayerColor:t(`var(--m3e-outlined-icon-button-pressed-unselected-state-layer-color, var(--m3e-icon-button-pressed-unselected-state-layer-color, ${s.color.onSurfaceVariant}))`),selectedIconColor:t(`var(--m3e-outlined-icon-button-pressed-selected-icon-color, var(--m3e-icon-button-pressed-selected-icon-color, ${s.color.inverseOnSurface}))`),selectedStateLayerColor:t(`var(--m3e-outlined-icon-button-pressed-selected-state-layer-color, var(--m3e-icon-button-pressed-selected-state-layer-color, ${s.color.inverseOnSurface}))`)}},filled:{iconColor:t(`var(--m3e-filled-icon-button-icon-color, var(--m3e-icon-button-icon-color, ${s.color.onPrimary}))`),containerColor:t(`var(--m3e-filled-icon-button-container-color, var(--m3e-icon-button-container-color, ${s.color.primary}))`),unselectedIconColor:t(`var(--m3e-filled-icon-button-unselected-icon-color, var(--m3e-icon-button-unselected-icon-color, ${s.color.onSurfaceVariant}))`),unselectedContainerColor:t(`var(--m3e-filled-icon-button-unselected-container-color, var(--m3e-icon-button-unselected-container-color, ${s.color.surfaceContainer}))`),selectedIconColor:t(`var(--m3e-filled-icon-button-selected-icon-color, var(--m3e-icon-button-selected-icon-color, ${s.color.onPrimary}))`),selectedContainerColor:t(`var(--m3e-filled-icon-button-selected-container-color, var(--m3e-icon-button-selected-container-color, ${s.color.primary}))`),disabled:{containerColor:t(`var(--m3e-filled-icon-button-disabled-container-color, var(--m3e-icon-button-disabled-container-color, ${s.color.onSurface}))`),containerOpacity:t("var(--m3e-filled-icon-button-disabled-container-opacity, var(--m3e-icon-button-disabled-container-opacity, 10%))"),iconColor:t(`var(--m3e-filled-icon-button-disabled-icon-color, var(--m3e-icon-button-disabled-icon-color, ${s.color.onSurface}))`),iconOpacity:t("var(--m3e-filled-icon-button-disabled-icon-opacity, var(--m3e-icon-button-disabled-icon-opacity, 38%))")},hover:{iconColor:t(`var(--m3e-filled-icon-button-hover-icon-color, var(--m3e-icon-button-hover-icon-color, ${s.color.onPrimary}))`),stateLayerColor:t(`var(--m3e-filled-icon-button-hover-state-layer-color, var(--m3e-icon-button-hover-state-layer-color, ${s.color.onPrimary}))`),stateLayerOpacity:t(`var(--m3e-filled-icon-button-hover-state-layer-opacity, var(--m3e-icon-button-hover-state-layer-opacity, ${s.state.hoverStateLayerOpacity}))`),unselectedIconColor:t(`var(--m3e-filled-icon-button-hover-unselected-icon-color, var(--m3e-icon-button-hover-unselected-icon-color, ${s.color.onSurfaceVariant}))`),unselectedStateLayerColor:t(`var(--m3e-filled-icon-button-hover-unselected-state-layer-color, var(--m3e-icon-button-hover-unselected-state-layer-color, ${s.color.onSurfaceVariant}))`),selectedIconColor:t(`var(--m3e-filled-icon-button-hover-selected-icon-color, var(--m3e-icon-button-hover-selected-icon-color, ${s.color.onPrimary}))`),selectedStateLayerColor:t(`var(--m3e-filled-icon-button-hover-selected-state-layer-color, var(--m3e-icon-button-hover-selected-state-layer-color, ${s.color.onPrimary}))`)},focus:{iconColor:t(`var(--m3e-filled-icon-button-focus-icon-color, var(--m3e-icon-button-focus-icon-color, ${s.color.onPrimary}))`),stateLayerColor:t(`var(--m3e-filled-icon-button-focus-state-layer-color, var(--m3e-icon-button-focus-state-layer-color, ${s.color.onPrimary}))`),stateLayerOpacity:t(`var(--m3e-filled-icon-button-focus-state-layer-opacity, var(--m3e-icon-button-focus-state-layer-opacity, ${s.state.focusStateLayerOpacity}))`),unselectedIconColor:t(`var(--m3e-filled-icon-button-focus-unselected-icon-color, var(--m3e-icon-button-focus-unselected-icon-color, ${s.color.onSurfaceVariant}))`),unselectedStateLayerColor:t(`var(--m3e-filled-icon-button-focus-unselected-state-layer-color, var(--m3e-icon-button-focus-unselected-state-layer-color, ${s.color.onSurfaceVariant}))`),selectedIconColor:t(`var(--m3e-filled-icon-button-focus-selected-icon-color, var(--m3e-icon-button-focus-selected-icon-color, ${s.color.onPrimary}))`),selectedStateLayerColor:t(`var(--m3e-filled-icon-button-focus-selected-state-layer-color, var(--m3e-icon-button-focus-selected-state-layer-color, ${s.color.onPrimary}))`)},pressed:{iconColor:t(`var(--m3e-filled-icon-button-pressed-icon-color, var(--m3e-icon-button-pressed-icon-color, ${s.color.onPrimary}))`),stateLayerColor:t(`var(--m3e-filled-icon-button-pressed-state-layer-color, var(--m3e-icon-button-pressed-state-layer-color, ${s.color.onPrimary}))`),stateLayerOpacity:t(`var(--m3e-filled-icon-button-pressed-state-layer-opacity, var(--m3e-icon-button-pressed-state-layer-opacity, ${s.state.pressedStateLayerOpacity}))`),unselectedIconColor:t(`var(--m3e-filled-icon-button-pressed-unselected-icon-color, var(--m3e-icon-button-pressed-unselected-icon-color, ${s.color.onSurfaceVariant}))`),unselectedStateLayerColor:t(`var(--m3e-filled-icon-button-pressed-unselected-state-layer-color, var(--m3e-icon-button-pressed-unselected-state-layer-color, ${s.color.onSurfaceVariant}))`),selectedIconColor:t(`var(--m3e-filled-icon-button-pressed-selected-icon-color, var(--m3e-icon-button-pressed-selected-icon-color, ${s.color.onPrimary}))`),selectedStateLayerColor:t(`var(--m3e-filled-icon-button-pressed-selected-state-layer-color, var(--m3e-icon-button-pressed-selected-state-layer-color, ${s.color.onPrimary}))`)}},tonal:{iconColor:t(`var(--m3e-tonal-icon-button-icon-color, var(--m3e-icon-button-icon-color, ${s.color.onSecondaryContainer}))`),containerColor:t(`var(--m3e-tonal-icon-button-container-color, var(--m3e-icon-button-container-color, ${s.color.secondaryContainer}))`),unselectedIconColor:t(`var(--m3e-tonal-icon-button-unselected-icon-color, var(--m3e-icon-button-unselected-icon-color, ${s.color.onSecondaryContainer}))`),unselectedContainerColor:t(`var(--m3e-tonal-icon-button-unselected-container-color, var(--m3e-icon-button-unselected-container-color, ${s.color.secondaryContainer}))`),selectedIconColor:t(`var(--m3e-tonal-icon-button-selected-icon-color, var(--m3e-icon-button-selected-icon-color, ${s.color.onSecondary}))`),selectedContainerColor:t(`var(--m3e-tonal-icon-button-selected-container-color, var(--m3e-icon-button-selected-container-color, ${s.color.secondary}))`),disabled:{containerColor:t(`var(--m3e-tonal-icon-button-disabled-container-color, var(--m3e-icon-button-disabled-container-color, ${s.color.onSurface}))`),containerOpacity:t("var(--m3e-tonal-icon-button-disabled-container-opacity, var(--m3e-icon-button-disabled-container-opacity, 10%))"),iconColor:t(`var(--m3e-tonal-icon-button-disabled-icon-color, var(--m3e-icon-button-disabled-icon-color, ${s.color.onSurface}))`),iconOpacity:t("var(--m3e-tonal-icon-button-disabled-icon-opacity, var(--m3e-icon-button-disabled-icon-opacity, 38%))")},hover:{iconColor:t(`var(--m3e-tonal-icon-button-hover-icon-color, var(--m3e-icon-button-hover-icon-color, ${s.color.onSecondaryContainer}))`),stateLayerColor:t(`var(--m3e-tonal-icon-button-hover-state-layer-color, var(--m3e-icon-button-hover-state-layer-color, ${s.color.onSecondaryContainer}))`),stateLayerOpacity:t(`var(--m3e-tonal-icon-button-hover-state-layer-opacity, var(--m3e-icon-button-hover-state-layer-opacity, ${s.state.hoverStateLayerOpacity}))`),unselectedIconColor:t(`var(--m3e-tonal-icon-button-hover-unselected-icon-color, var(--m3e-icon-button-hover-unselected-icon-color, ${s.color.onSecondaryContainer}))`),unselectedStateLayerColor:t(`var(--m3e-tonal-icon-button-hover-unselected-state-layer-color, var(--m3e-icon-button-hover-unselected-state-layer-color, ${s.color.onSecondaryContainer}))`),selectedIconColor:t(`var(--m3e-tonal-icon-button-hover-selected-icon-color, var(--m3e-icon-button-hover-selected-icon-color, ${s.color.onSecondary}))`),selectedStateLayerColor:t(`var(--m3e-tonal-icon-button-hover-selected-state-layer-color, var(--m3e-icon-button-hover-selected-state-layer-color, ${s.color.onSecondary}))`)},focus:{iconColor:t(`var(--m3e-tonal-icon-button-focus-icon-color, var(--m3e-icon-button-focus-icon-color, ${s.color.onSecondaryContainer}))`),stateLayerColor:t(`var(--m3e-tonal-icon-button-focus-state-layer-color, var(--m3e-icon-button-focus-state-layer-color, ${s.color.onSecondaryContainer}))`),stateLayerOpacity:t(`var(--m3e-tonal-icon-button-focus-state-layer-opacity, var(--m3e-icon-button-focus-state-layer-opacity, ${s.state.focusStateLayerOpacity}))`),unselectedIconColor:t(`var(--m3e-tonal-icon-button-focus-unselected-icon-color, var(--m3e-icon-button-focus-unselected-icon-color, ${s.color.onSecondaryContainer}))`),unselectedStateLayerColor:t(`var(--m3e-tonal-icon-button-focus-unselected-state-layer-color, var(--m3e-icon-button-focus-unselected-state-layer-color, ${s.color.onSecondaryContainer}))`),selectedIconColor:t(`var(--m3e-tonal-icon-button-focus-selected-icon-color, var(--m3e-icon-button-focus-selected-icon-color, ${s.color.onSecondary}))`),selectedStateLayerColor:t(`var(--m3e-tonal-icon-button-focus-selected-state-layer-color, var(--m3e-icon-button-focus-selected-state-layer-color, ${s.color.onSecondary}))`)},pressed:{iconColor:t(`var(--m3e-tonal-icon-button-pressed-icon-color, var(--m3e-icon-button-pressed-icon-color, ${s.color.onSecondaryContainer}))`),stateLayerColor:t(`var(--m3e-tonal-icon-button-pressed-state-layer-color, var(--m3e-icon-button-pressed-state-layer-color, ${s.color.onSecondaryContainer}))`),stateLayerOpacity:t(`var(--m3e-tonal-icon-button-pressed-state-layer-opacity, var(--m3e-icon-button-pressed-state-layer-opacity, ${s.state.pressedStateLayerOpacity}))`),unselectedIconColor:t(`var(--m3e-tonal-icon-button-pressed-unselected-icon-color, var(--m3e-icon-button-pressed-unselected-icon-color, ${s.color.onSecondaryContainer}))`),unselectedStateLayerColor:t(`var(--m3e-tonal-icon-button-pressed-unselected-state-layer-color, var(--m3e-icon-button-pressed-unselected-state-layer-color, ${s.color.onSecondaryContainer}))`),selectedIconColor:t(`var(--m3e-tonal-icon-button-pressed-selected-icon-color, var(--m3e-icon-button-pressed-selected-icon-color, ${s.color.onSecondary}))`),selectedStateLayerColor:t(`var(--m3e-tonal-icon-button-pressed-selected-state-layer-color, var(--m3e-icon-button-pressed-selected-state-layer-color, ${s.color.onSecondary}))`)}},standard:{iconColor:t(`var(--m3e-standard-icon-button-icon-color, var(--m3e-icon-button-icon-color, ${s.color.onSurfaceVariant}))`),unselectedIconColor:t(`var(--m3e-standard-icon-button-unselected-icon-color, var(--m3e-icon-button-unselected-icon-color, ${s.color.onSurfaceVariant}))`),selectedIconColor:t(`var(--m3e-standard-icon-button-selected-icon-color, var(--m3e-icon-button-selected-icon-color, ${s.color.primary}))`),disabled:{containerColor:t("var(--m3e-standard-icon-button-disabled-container-color, var(--m3e-icon-button-disabled-container-color, transparent))"),containerOpacity:t("var(--m3e-standard-icon-button-disabled-container-opacity, var(--m3e-icon-button-disabled-container-opacity, 10%))"),iconColor:t(`var(--m3e-standard-icon-button-disabled-icon-color, var(--m3e-icon-button-disabled-icon-color, ${s.color.onSurface}))`),iconOpacity:t("var(--m3e-standard-icon-button-disabled-icon-opacity, var(--m3e-icon-button-disabled-icon-opacity, 38%))")},hover:{iconColor:t(`var(--m3e-standard-icon-button-hover-icon-color, var(--m3e-icon-button-hover-icon-color, ${s.color.onSurfaceVariant}))`),stateLayerColor:t(`var(--m3e-standard-icon-button-hover-state-layer-color, var(--m3e-icon-button-hover-state-layer-color, ${s.color.onSurfaceVariant}))`),stateLayerOpacity:t(`var(--m3e-standard-icon-button-hover-state-layer-opacity, var(--m3e-icon-button-hover-state-layer-opacity, ${s.state.hoverStateLayerOpacity}))`),unselectedIconColor:t(`var(--m3e-standard-icon-button-hover-unselected-icon-color, var(--m3e-icon-button-hover-unselected-icon-color, ${s.color.onSurfaceVariant}))`),unselectedStateLayerColor:t(`var(--m3e-standard-icon-button-hover-unselected-state-layer-color, var(--m3e-icon-button-hover-unselected-state-layer-color, ${s.color.onSurfaceVariant}))`),selectedIconColor:t(`var(--m3e-standard-icon-button-hover-selected-icon-color, var(--m3e-icon-button-hover-selected-icon-color, ${s.color.primary}))`),selectedStateLayerColor:t(`var(--m3e-standard-icon-button-hover-selected-state-layer-color, var(--m3e-icon-button-hover-selected-state-layer-color, ${s.color.primary}))`)},focus:{iconColor:t(`var(--m3e-standard-icon-button-focus-icon-color, var(--m3e-icon-button-focus-icon-color, ${s.color.onSurfaceVariant}))`),stateLayerColor:t(`var(--m3e-standard-icon-button-focus-state-layer-color, var(--m3e-icon-button-focus-state-layer-color, ${s.color.onSurfaceVariant}))`),stateLayerOpacity:t(`var(--m3e-standard-icon-button-focus-state-layer-opacity, var(--m3e-icon-button-focus-state-layer-opacity, ${s.state.focusStateLayerOpacity}))`),unselectedIconColor:t(`var(--m3e-standard-icon-button-focus-unselected-icon-color, var(--m3e-icon-button-focus-unselected-icon-color, ${s.color.onSurfaceVariant}))`),unselectedStateLayerColor:t(`var(--m3e-standard-icon-button-focus-unselected-state-layer-color, var(--m3e-icon-button-focus-unselected-state-layer-color, ${s.color.onSurfaceVariant}))`),selectedIconColor:t(`var(--m3e-standard-icon-button-focus-selected-icon-color, var(--m3e-icon-button-focus-selected-icon-color, ${s.color.primary}))`),selectedStateLayerColor:t(`var(--m3e-standard-icon-button-focus-selected-state-layer-color, var(--m3e-icon-button-focus-selected-state-layer-color, ${s.color.primary}))`)},pressed:{iconColor:t(`var(--m3e-standard-icon-button-pressed-icon-color, var(--m3e-icon-button-pressed-icon-color, ${s.color.onSurfaceVariant}))`),stateLayerColor:t(`var(--m3e-standard-icon-button-pressed-state-layer-color, var(--m3e-icon-button-pressed-state-layer-color, ${s.color.onSurfaceVariant}))`),stateLayerOpacity:t(`var(--m3e-standard-icon-button-pressed-state-layer-opacity, var(--m3e-icon-button-pressed-state-layer-opacity, ${s.state.pressedStateLayerOpacity}))`),unselectedIconColor:t(`var(--m3e-standard-icon-button-pressed-unselected-icon-color, var(--m3e-icon-button-pressed-unselected-icon-color, ${s.color.onSurfaceVariant}))`),unselectedStateLayerColor:t(`var(--m3e-standard-icon-button-pressed-unselected-state-layer-color, var(--m3e-icon-button-pressed-unselected-state-layer-color, ${s.color.onSurfaceVariant}))`),selectedIconColor:t(`var(--m3e-standard-icon-button-pressed-selected-icon-color, var(--m3e-icon-button-pressed-selected-icon-color, ${s.color.primary}))`),selectedStateLayerColor:t(`var(--m3e-standard-icon-button-pressed-selected-state-layer-color, var(--m3e-icon-button-pressed-selected-state-layer-color, ${s.color.primary}))`)}}};function T(e){return a`:host([variant="${t(e)}"]:not(:disabled):not([disabled-interactive])) .base { background-color: ${V[e].containerColor??t("unset")}; --m3e-state-layer-hover-color: ${V[e].hover.stateLayerColor}; --m3e-state-layer-hover-opacity: ${V[e].hover.stateLayerOpacity}; --m3e-state-layer-focus-color: ${V[e].focus.stateLayerColor}; --m3e-state-layer-focus-opacity: ${V[e].focus.stateLayerOpacity}; --m3e-ripple-color: ${V[e].pressed.stateLayerColor}; --m3e-ripple-opacity: ${V[e].pressed.stateLayerOpacity}; --m3e-elevation-level: ${V[e].containerElevation??t("unset")}; --m3e-elevation-hover-level: ${V[e].hover.containerElevation??t("unset")}; --m3e-elevation-focus-level: ${V[e].focus.containerElevation??t("unset")}; --m3e-elevation-pressed-level: ${V[e].pressed.containerElevation??t("unset")}; } :host([variant="${t(e)}"][toggle]:not([selected]):not(:disabled):not([disabled-interactive])) .base { background-color: ${V[e].unselectedContainerColor??t("unset")}; --m3e-state-layer-hover-color: ${V[e].hover.unselectedStateLayerColor}; --m3e-state-layer-focus-color: ${V[e].focus.unselectedStateLayerColor}; --m3e-ripple-color: ${V[e].pressed.unselectedStateLayerColor}; } :host([variant="${t(e)}"][toggle][selected]:not(:disabled):not([disabled-interactive])) .base { background-color: ${V[e].selectedContainerColor??t("unset")}; --m3e-state-layer-hover-color: ${V[e].hover.selectedStateLayerColor}; --m3e-state-layer-focus-color: ${V[e].focus.selectedStateLayerColor}; --m3e-ripple-color: ${V[e].pressed.selectedStateLayerColor}; } :host([variant="${t(e)}"]:not(:disabled):not([disabled-interactive])) .base { outline-color: ${V[e].outlineColor??t("unset")}; } :host([variant="${t(e)}"]:focus:not(:disabled):not([disabled-interactive])) .base { outline-color: ${V[e].focus.outlineColor??t("unset")}; } :host([variant="${t(e)}"]:hover:not(:disabled):not([disabled-interactive])) .base { outline-color: ${V[e].hover.outlineColor??t("unset")}; } :host([variant="${t(e)}"]:state(-pressed):not(:disabled):not([disabled-interactive])) .base { outline-color: ${V[e].pressed.outlineColor??t("unset")}; } :host([variant="${t(e)}"]:not(:disabled):not([disabled-interactive])) .icon { color: ${V[e].iconColor}; } :host([variant="${t(e)}"][toggle]:not([selected]):not(:disabled):not([disabled-interactive])) .icon { color: ${V[e].unselectedIconColor}; } :host([variant="${t(e)}"][toggle][selected]:not(:disabled):not([disabled-interactive])) .icon { color: ${V[e].selectedIconColor}; } :host([variant="${t(e)}"]:focus:not(:disabled):not([disabled-interactive])) .icon { color: ${V[e].focus.iconColor}; } :host([variant="${t(e)}"][toggle]:not([selected]):focus:not(:disabled):not([disabled-interactive])) .icon { color: ${V[e].focus.unselectedIconColor}; } :host([variant="${t(e)}"][toggle][selected]:focus:not(:disabled):not([disabled-interactive])) .icon { color: ${V[e].focus.selectedIconColor}; } :host([variant="${t(e)}"]:hover:not(:disabled):not([disabled-interactive])) .icon { color: ${V[e].hover.iconColor}; } :host([variant="${t(e)}"][toggle]:not([selected]):hover:not(:disabled):not([disabled-interactive])) .icon { color: ${V[e].hover.unselectedIconColor}; } :host([variant="${t(e)}"][toggle][selected]:hover:not(:disabled):not([disabled-interactive])) .icon { color: ${V[e].hover.selectedIconColor}; } :host([variant="${t(e)}"]:state(-pressed):not(:disabled):not([disabled-interactive])) .icon { color: ${V[e].pressed.iconColor}; } :host( [variant="${t(e)}"][toggle]:not([selected]):state(-pressed):not(:disabled):not( [disabled-interactive] ) ) .icon { color: ${V[e].pressed.unselectedIconColor}; } :host( [variant="${t(e)}"][toggle][selected]:state(-pressed):not(:disabled):not([disabled-interactive]) ) .icon { color: ${V[e].pressed.selectedIconColor}; } :host([variant="${t(e)}"]:disabled) .base, :host([variant="${t(e)}"][disabled-interactive]) .base { outline-color: ${V[e].disabled.outlineColor??t("unset")}; background-color: color-mix( in srgb, ${V[e].disabled.containerColor} ${V[e].disabled.containerOpacity}, transparent ); } :host([variant="${t(e)}"]:disabled) .icon, :host([variant="${t(e)}"][disabled-interactive]) .icon { color: color-mix( in srgb, ${V[e].disabled.iconColor} ${V[e].disabled.iconOpacity}, transparent ); }`}const R=[T("standard"),T("outlined"),T("filled"),T("tonal"),T("elevated"),a`:host([variant="outlined"]:not([toggle][selected]):not(:disabled):not([disabled-interactive])) .base { outline-style: solid; }`];var E,j,B,M,H,F;let A=class extends(d(u(v(b(m(p(h(y(n,"button"),!0)))))))){constructor(){super(),E.add(this),j.set(this,o=>e(this,E,"m",H).call(this,o)),this.variant="standard",this.shape="rounded",this.size="small",this.width="default",this.toggle=!1,this.selected=!1,new $(this,{callback:()=>{this.grouped&&this._handleResize()}}),new f(this,{callback:e=>{this.disabledInteractive||e||this.grouped||this._base?.style.removeProperty("--_button-shape")}}),new g(this,{isPressedKey:e=>" "===e,minPressedDuration:150,callback:o=>{this.disabled||this.disabledInteractive||(o?(e(this,E,"m",B).call(this),S()?e(this,E,"m",M).call(this,!0):requestAnimationFrame(()=>e(this,E,"m",M).call(this,!0))):e(this,E,"m",M).call(this,!1))}})}get grouped(){return C(this,"-grouped")}render(){return c`<div class="base"><m3e-state-layer class="state-layer" ?disabled="${this.disabled||this.disabledInteractive}"></m3e-state-layer><m3e-elevation class="elevation" ?disabled="${this.disabled||this.disabledInteractive}"></m3e-elevation><m3e-focus-ring class="focus-ring" ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" centered ?disabled="${this.disabled||this.disabledInteractive}"></m3e-ripple><div class="touch" aria-hidden="true"></div>${this[L]()}<div class="wrapper">${this.toggle?c`<slot class="icon" name="selected" aria-hidden="true" @slotchange="${e(this,E,"m",F)}"></slot>`:r}<slot class="icon" aria-hidden="true"></slot></div></div>`}connectedCallback(){super.connectedCallback(),this.addEventListener("click",e(this,j,"f"))}disconnectedCallback(){super.disconnectedCallback(),["-pressed","-resting","-grouped","-connected"].forEach(e=>w(this,e)),this._base?.style.removeProperty("--_button-shape"),this.style.removeProperty("--_button-width"),this.style.removeProperty("--_adjacent-button-width"),w(this,"-adjacent-pressed"),this.removeEventListener("click",e(this,j,"f"))}firstUpdated(e){super.firstUpdated(e),[this._elevation,this._focusRing,this._stateLayer,this._ripple].forEach(e=>e?.attach(this))}updated(e){if(super.updated(e),(e.has("disabled")&&this.disabled||e.has("disabledInteractive")&&this.disabledInteractive)&&(w(this,"-pressed"),w(this,"-resting")),(e.has("toggle")||e.has("selected"))&&(this.ariaPressed=this.toggle?`${this.selected}`:null,this.toggle))for(const e of this.querySelectorAll("m3e-icon"))e.toggleAttribute("filled",this.selected)}_handleResize(){this.grouped&&!C(this,"-pressed")&&(this.style.setProperty("--_button-width",`${this.clientWidth}px`),e(this,E,"m",B).call(this,!0))}};j=new WeakMap,E=new WeakSet,B=function(e=!1){if(!this._base)return;const o=parseFloat(getComputedStyle(this._base).borderRadius);if(!isNaN(o)||e){const t=this.clientHeight/2;(t<o||e)&&this._base?.style.setProperty("--_button-shape",`${t}px`)}},M=function(e){x(this,"-pressed",e),x(this,"-resting",!e);const o=this.closest("m3e-button-group");if(o){const t=this.getBoundingClientRect().width,a=[...o.querySelectorAll("m3e-button,m3e-icon-button")],n=a.indexOf(this);for(let o=0;o<a.length;o++){const r=a[o];o===n-1||o===n+1?(r.style.setProperty("--_adjacent-button-width",`${t}px`),x(r,"-adjacent-pressed",e)):(r.style.removeProperty("--_adjacent-button-width"),w(r,"-adjacent-pressed"))}}},H=function(e){(this.disabled||this.disabledInteractive)&&(e.preventDefault(),e.stopImmediatePropagation()),this.toggle&&!e.defaultPrevented&&(this.selected=!this.selected,this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0,cancelable:!0}))?this.dispatchEvent(new Event("change",{bubbles:!0})):this.selected=!this.selected)},F=function(e){this._base?.classList.toggle("with-selected-icon",I(e.target))},A.styles=[z,R,P],o([i(".base")],A.prototype,"_base",void 0),o([i(".elevation")],A.prototype,"_elevation",void 0),o([i(".focus-ring")],A.prototype,"_focusRing",void 0),o([i(".state-layer")],A.prototype,"_stateLayer",void 0),o([i(".ripple")],A.prototype,"_ripple",void 0),o([l({reflect:!0})],A.prototype,"variant",void 0),o([l({reflect:!0})],A.prototype,"shape",void 0),o([l({reflect:!0})],A.prototype,"size",void 0),o([l({reflect:!0})],A.prototype,"width",void 0),o([l({type:Boolean,reflect:!0})],A.prototype,"toggle",void 0),o([l({type:Boolean,reflect:!0})],A.prototype,"selected",void 0),o([k(40)],A.prototype,"_handleResize",null),A=o([O("m3e-icon-button")],A);export{A as M3eIconButtonElement};

package/dist/icon.js

@@ -1,13 +1,124 @@
 /**
  * @license MIT
- * Copyright (c) 2025 matraic
+ * Copyright (c) 2025–2026 matraic
  * See LICENSE file in the project root for full license text.
  */
-import { __decorate } from 'tslib';
-import { LitElement, html, css } from 'lit';
+import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate } from 'tslib';
+import { svg, LitElement, html, css } from 'lit';
 import { query, property } from 'lit/decorators.js';
 import { Role, customElement } from '@m3e/web/core';
 
+var _a, _IconRegistry_icons, _IconRegistry_observers, _IconRegistry_createKey, _IconRegistry_validateSvgIconInfo;
+/** @private */
+const PATH_DATA_PATTERN = /^[MmLlHhVvCcSsQqTtAaZz0-9.,\s-]+$/;
+/** @private */
+const VIEW_BOX_PATTERN = /^-?\d+(\.\d+)?\s+-?\d+(\.\d+)?\s+-?\d+(\.\d+)?\s+-?\d+(\.\d+)?$/;
+/**
+ * Service to register and display icons used by the `m3e-icon` component.
+ * @internal
+ */
+class IconRegistry {
+  /**
+   * Adds an icon to the registry for the given variant and weight.
+   * @param {string} name The name of the icon.
+   * @param {IconVariant} variant The variant of the icon.
+   * @param {SvgIconFillSet} fillSet The SVG data for both fill states (outlined and filled) of the icon.
+   */
+  static addIcon(name, variant, fillSet) {
+    const trustOutlinedViewBox = typeof fillSet.outlined === "string";
+    const trustFilledViewBox = typeof fillSet.filled === "string";
+    if (typeof fillSet.outlined === "string") {
+      fillSet.outlined = {
+        viewBox: "0 -960 960 960",
+        path: fillSet.outlined
+      };
+    }
+    if (typeof fillSet.filled === "string") {
+      fillSet.filled = {
+        viewBox: "0 -960 960 960",
+        path: fillSet.filled
+      };
+    }
+    __classPrivateFieldGet(this, _a, "m", _IconRegistry_validateSvgIconInfo).call(this, name, variant, fillSet.outlined, trustOutlinedViewBox);
+    __classPrivateFieldGet(this, _a, "m", _IconRegistry_validateSvgIconInfo).call(this, name, variant, fillSet.filled, trustFilledViewBox);
+    if (window !== undefined) {
+      const key = __classPrivateFieldGet(this, _a, "m", _IconRegistry_createKey).call(this, name, variant);
+      __classPrivateFieldGet(this, _a, "f", _IconRegistry_icons).set(key, {
+        outlined: svg`<svg viewBox="${fillSet.outlined.viewBox}"><path d="${fillSet.outlined.path}"/></svg>`,
+        filled: svg`<svg viewBox="${fillSet.filled.viewBox}"><path d="${fillSet.filled.path}"/></svg>`
+      });
+      __classPrivateFieldGet(this, _a, "f", _IconRegistry_observers).get(key)?.forEach(x => x());
+    }
+  }
+  /**
+   * Determines whether an icon is registered for the given variant.
+   * @param {string} name The name of the icon.
+   * @param {IconVariant} variant The variant of the icon.
+   * @returns {boolean} Whether `icon` is registered for the given `variant`.
+   */
+  static isIconRegistered(name, variant) {
+    return window !== undefined && __classPrivateFieldGet(this, _a, "f", _IconRegistry_icons).has(__classPrivateFieldGet(this, _a, "m", _IconRegistry_createKey).call(this, name, variant));
+  }
+  /**
+   * Renders an icon from the registry.
+   * @param {string} name The name of the icon.
+   * @param {IconVariant} variant The variant of the icon.
+   * @param {boolean} filled Whether to render a filled variant of the icon.
+   * @returns {SVGTemplateResult | undefined} A `SVGTemplateResult` used to render the icon.
+   */
+  static renderIcon(name, variant, filled) {
+    const data = __classPrivateFieldGet(this, _a, "f", _IconRegistry_icons).get(__classPrivateFieldGet(this, _a, "m", _IconRegistry_createKey).call(this, name, variant));
+    return filled ? data?.filled : data?.outlined;
+  }
+  /**
+   * Begins observing registration for the specified icon.
+   * @param {string} name The name of the icon to observe.
+   * @param {IconVariant} variant The variant of the icon to observe.
+   * @param {() => void} callback Callback invoked when the specified icon is registered for the given variant.
+   * @returns {() => void} Function used to stop observing.
+   */
+  static observe(name, variant, callback) {
+    if (window === undefined) return () => {};
+    const key = __classPrivateFieldGet(this, _a, "m", _IconRegistry_createKey).call(this, name, variant);
+    if (!__classPrivateFieldGet(this, _a, "f", _IconRegistry_observers).has(key)) {
+      __classPrivateFieldGet(this, _a, "f", _IconRegistry_observers).set(key, [callback]);
+    } else {
+      __classPrivateFieldGet(this, _a, "f", _IconRegistry_observers).get(key)?.push(callback);
+    }
+    return () => {
+      const callbacks = __classPrivateFieldGet(this, _a, "f", _IconRegistry_observers).get(key);
+      if (callbacks) {
+        const index = callbacks.indexOf(callback);
+        if (index >= 0) {
+          callbacks.splice(index, 1);
+        }
+        if (callbacks.length == 0) {
+          __classPrivateFieldGet(this, _a, "f", _IconRegistry_observers).delete(key);
+        }
+      }
+    };
+  }
+}
+_a = IconRegistry, _IconRegistry_createKey = function _IconRegistry_createKey(name, variant) {
+  return `${variant}-${name}`;
+}, _IconRegistry_validateSvgIconInfo = function _IconRegistry_validateSvgIconInfo(name, variant, info, trustViewBox = false) {
+  if (!trustViewBox && !VIEW_BOX_PATTERN.test(info.viewBox)) {
+    throw new Error(`Unable to register icon '${name}' for variant '${variant}'. Invalid viewbox data.`);
+  }
+  if (!PATH_DATA_PATTERN.test(info.path)) {
+    throw new Error(`Unable to register icon '${name}' for variant '${variant}'. Invalid path data.`);
+  }
+};
+/** @private */
+_IconRegistry_icons = {
+  value: new Map()
+};
+/** @private */
+_IconRegistry_observers = {
+  value: new Map()
+};
+
+var _M3eIconElement_iconRegistryUnobserve;
 /**
  * A small symbol used to easily identify an action or category.
  *
@@ -45,6 +156,8 @@ import { Role, customElement } from '@m3e/web/core';
 let M3eIconElement = class M3eIconElement extends Role(LitElement, "img") {
   constructor() {
     super(...arguments);
+    /** @private */
+    _M3eIconElement_iconRegistryUnobserve.set(this, void 0);
     /** The name of the icon. */
     this.name = "";
     /**
@@ -81,6 +194,22 @@ let M3eIconElement = class M3eIconElement extends Role(LitElement, "img") {
     super.connectedCallback();
   }
   /** @inheritdoc */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    __classPrivateFieldGet(this, _M3eIconElement_iconRegistryUnobserve, "f")?.call(this);
+  }
+  /** @inheritdoc */
+  willUpdate(_changedProperties) {
+    super.willUpdate(_changedProperties);
+    if (_changedProperties.has("name") && !IconRegistry.isIconRegistered(this.name, this.variant)) {
+      __classPrivateFieldSet(this, _M3eIconElement_iconRegistryUnobserve, IconRegistry.observe(this.name, this.variant, () => {
+        this.requestUpdate();
+        __classPrivateFieldGet(this, _M3eIconElement_iconRegistryUnobserve, "f")?.call(this);
+        __classPrivateFieldSet(this, _M3eIconElement_iconRegistryUnobserve, undefined, "f");
+      }), "f");
+    }
+  }
+  /** @inheritdoc */
   updated(_changedProperties) {
     super.updated(_changedProperties);
     if (_changedProperties.has("filled")) {
@@ -98,11 +227,12 @@ let M3eIconElement = class M3eIconElement extends Role(LitElement, "img") {
   }
   /** @inheritdoc */
   render() {
-    return html`<div class="icon" aria-hidden="true">${this.name}</div>`;
+    return IconRegistry.isIconRegistered(this.name, this.variant) ? IconRegistry.renderIcon(this.name, this.variant, this.filled) : html`<div class="icon" aria-hidden="true">${this.name}</div>`;
   }
 };
+_M3eIconElement_iconRegistryUnobserve = new WeakMap();
 /** 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"; }`;
+M3eIconElement.styles = css`:host { display: inline-block; user-select: none; font-size: var(--m3e-icon-size, 1.5rem); width: 1em; height: 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"; } svg { font-size: inherit; width: 1em; height: 1em; }`;
 __decorate([query(".icon")], M3eIconElement.prototype, "_icon", void 0);
 __decorate([property()], M3eIconElement.prototype, "name", void 0);
 __decorate([property({
@@ -122,5 +252,15 @@ __decorate([property({
 })], M3eIconElement.prototype, "opticalSize", void 0);
 M3eIconElement = __decorate([customElement("m3e-icon")], M3eIconElement);
 
-export { M3eIconElement };
+/**
+ * Registers an SVG icon to the internal icon registry used by `m3e-icon`.
+ * @param {string} name The name of the icon.
+ * @param {IconVariant} variant The variant of the icon.
+ * @param data The outlined and filled SVG information of the icon.
+ */
+function registerIcon(name, variant, data) {
+  IconRegistry.addIcon(name, variant, data);
+}
+
+export { M3eIconElement, registerIcon };
 //# sourceMappingURL=icon.js.map

package/dist/icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon.js","sources":["../../src/icon/IconElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\n\r\nimport { customElement, Role } from \"@m3e/web/core\";\r\n\r\nimport { IconVariant } from \"./IconVariant\";\r\nimport { IconGrade } from \"./IconGrade\";\r\n\r\n/**\r\n * A small symbol used to easily identify an action or category.\r\n *\r\n * @description\r\n * The `m3e-icon` component makes it easier to use Material Symbols in your application. Material Symbols are Google's newest icons supporting\r\n * a range of design variants. For more information, see:\r\n * - {@link https://developers.google.com/fonts/docs/material_symbols|Material Symbol Guide}\r\n * - {@link https://fonts.google.com/icons|Material Symbol Library}\r\n *\r\n * The Material Symbols font is the easiest way to incorporate Material Symbols into your application. Using the\r\n * {@link https://developers.google.com/fonts/docs/css2#forming_api_urls|Fonts CSS API}, you can use variable fonts to optimize icon\r\n * usage within your application. See {@link https://caniuse.com/variable-fonts|Can I Use's Variable Fonts} to determine whether\r\n * your user's browser support variable fonts.\r\n *\r\n * @example\r\n * The following example illustrates showing the `home` icon. The `name` attribute specifies the icon to present.\r\n * ```html\r\n * <m3e-icon name=\"home\"></m3e-icon>\r\n * ```\r\n * @example\r\n * The next example illustrates a link used to download a variable font for outlined icons with fill support.\r\n * ```html\r\n * <link href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0..1,0\" rel=\"stylesheet\"/>\r\n * ```\r\n *\r\n * @tag m3e-icon\r\n *\r\n * @attr filled - Whether the icon is filled.\r\n * @attr grade - The grade of the icon.\r\n * @attr optical-size - A value from 20 to 48 indicating the optical size of the icon.\r\n * @attr name - The name of the icon.\r\n * @attr variant - The appearance variant of the icon.\r\n * @attr weight - A value from 100 to 700 indicating the weight of the icon.\r\n */\r\n@customElement(\"m3e-icon\")\r\nexport class M3eIconElement extends Role(LitElement, \"img\") {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: inline-block;\r\n      user-select: none;\r\n      font-size: var(--m3e-icon-size, 1.5rem);\r\n      width: 1em;\r\n      vertical-align: middle;\r\n      overflow: hidden;\r\n    }\r\n    .icon {\r\n      font-weight: normal;\r\n      font-style: normal;\r\n      line-height: 1;\r\n      letter-spacing: normal;\r\n      text-transform: none;\r\n      white-space: nowrap;\r\n      word-wrap: normal;\r\n      direction: ltr;\r\n      font-feature-settings: \"liga\";\r\n      -webkit-font-smoothing: antialiased;\r\n      width: inherit;\r\n      height: inherit;\r\n      vertical-align: inherit;\r\n      font-variation-settings:\r\n        \"FILL\" var(--_icon-fill, 0),\r\n        \"wght\" var(--_icon-weight, 400),\r\n        \"GRAD\" var(--_icon-grade, 0),\r\n        \"opsz\" var(--_icon-optical-size, 24);\r\n    }\r\n    :host([variant=\"outlined\"]) .icon {\r\n      font-family: \"Material Symbols Outlined\";\r\n    }\r\n    :host([variant=\"rounded\"]) .icon {\r\n      font-family: \"Material Symbols Rounded\";\r\n    }\r\n    :host([variant=\"sharp\"]) .icon {\r\n      font-family: \"Material Symbols Sharp\";\r\n    }\r\n  `;\r\n\r\n  /** @private */ @query(\".icon\") private readonly _icon?: HTMLSpanElement;\r\n\r\n  /** The name of the icon. */\r\n  @property() name: string = \"\";\r\n\r\n  /**\r\n   * The appearance variant of the icon.\r\n   * @default \"outlined\"\r\n   */\r\n  @property({ reflect: true }) variant: IconVariant = \"outlined\";\r\n\r\n  /**\r\n   * Whether the icon is filled.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) filled = false;\r\n\r\n  /**\r\n   * The grade of the icon.\r\n   * @default \"medium\"\r\n   */\r\n  @property() grade: IconGrade = \"medium\";\r\n\r\n  /**\r\n   * A value from 100 to 700 indicating the weight of the icon.\r\n   * @default 400\r\n   */\r\n  @property({ type: Number }) weight = 400;\r\n\r\n  /**\r\n   * A value from 20 to 48 indicating the optical size of the icon.\r\n   * @default 24\r\n   */\r\n  @property({ attribute: \"optical-size\", type: Number }) opticalSize = 24;\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    if (\r\n      !this.hasAttribute(\"aria-label\") &&\r\n      !this.hasAttribute(\"aria-labelledby\") &&\r\n      !this.hasAttribute(\"aria-hidden\")\r\n    ) {\r\n      this.ariaHidden = \"true\";\r\n    }\r\n\r\n    super.connectedCallback();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override updated(_changedProperties: PropertyValues<this>): void {\r\n    super.updated(_changedProperties);\r\n\r\n    if (_changedProperties.has(\"filled\")) {\r\n      this._icon?.style.setProperty(\"--_icon-fill\", this.filled ? \"1\" : \"0\");\r\n    }\r\n    if (_changedProperties.has(\"grade\")) {\r\n      this._icon?.style.setProperty(\r\n        \"--_icon-grade\",\r\n        this.grade === \"low\" ? \"-25\" : this.grade === \"high\" ? \"200\" : \"0\",\r\n      );\r\n    }\r\n    if (_changedProperties.has(\"weight\")) {\r\n      this._icon?.style.setProperty(\"--_icon-weight\", `${this.weight}`);\r\n    }\r\n    if (_changedProperties.has(\"opticalSize\")) {\r\n      this._icon?.style.setProperty(\"--_icon-optical-size\", `${this.opticalSize}`);\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"icon\" aria-hidden=\"true\">${this.name}</div>`;\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-icon\": M3eIconElement;\r\n  }\r\n}\r\n"],"names":["M3eIconElement","Role","LitElement","constructor","name","variant","filled","grade","weight","opticalSize","connectedCallback","hasAttribute","ariaHidden","updated","_changedProperties","has","_icon","style","setProperty","render","html","styles","css","__decorate","query","prototype","property","reflect","type","Boolean","Number","attribute","customElement"],"mappings":"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"}
+{"version":3,"file":"icon.js","sources":["../../src/icon/IconRegistry.ts","../../src/icon/IconElement.ts","../../src/icon/registerIcon.ts"],"sourcesContent":["import { svg, SVGTemplateResult } from \"lit\";\r\n\r\nimport { IconVariant } from \"./IconVariant\";\r\n\r\n/** @private */ const PATH_DATA_PATTERN = /^[MmLlHhVvCcSsQqTtAaZz0-9.,\\s-]+$/;\r\n/** @private */ const VIEW_BOX_PATTERN = /^-?\\d+(\\.\\d+)?\\s+-?\\d+(\\.\\d+)?\\s+-?\\d+(\\.\\d+)?\\s+-?\\d+(\\.\\d+)?$/;\r\n\r\n/** Encapsulates information used to construct an SVG. */\r\nexport type SvgIconInfo = {\r\n  /** The viewbox of the SVG. */\r\n  viewBox: string;\r\n\r\n  /** The path of the SVG. */\r\n  path: string;\r\n};\r\n\r\n/** Represents the fill-axis SVG data for a single icon. */\r\nexport type SvgIconFillSet = {\r\n  /** The unfilled (FILL=0) SVG representation (or path assuming viewBox=\"0 -960 960 960\") of the icon. */\r\n  outlined: SvgIconInfo | string;\r\n\r\n  /** The filled (FILL=1) SVG representation (or path assuming viewBox=\"0 -960 960 960\") of the icon. */\r\n  filled: SvgIconInfo | string;\r\n};\r\n\r\n/**\r\n * Service to register and display icons used by the `m3e-icon` component.\r\n * @internal\r\n */\r\nexport class IconRegistry {\r\n  /** @private */\r\n  static readonly #icons = new Map<string, { outlined: SVGTemplateResult; filled: SVGTemplateResult }>();\r\n\r\n  /** @private */ static readonly #observers = new Map<string, Array<() => void>>();\r\n\r\n  /**\r\n   * Adds an icon to the registry for the given variant and weight.\r\n   * @param {string} name The name of the icon.\r\n   * @param {IconVariant} variant The variant of the icon.\r\n   * @param {SvgIconFillSet} fillSet The SVG data for both fill states (outlined and filled) of the icon.\r\n   */\r\n  static addIcon(name: string, variant: IconVariant, fillSet: SvgIconFillSet): void {\r\n    const trustOutlinedViewBox = typeof fillSet.outlined === \"string\";\r\n    const trustFilledViewBox = typeof fillSet.filled === \"string\";\r\n\r\n    if (typeof fillSet.outlined === \"string\") {\r\n      fillSet.outlined = {\r\n        viewBox: \"0 -960 960 960\",\r\n        path: fillSet.outlined,\r\n      };\r\n    }\r\n    if (typeof fillSet.filled === \"string\") {\r\n      fillSet.filled = {\r\n        viewBox: \"0 -960 960 960\",\r\n        path: fillSet.filled,\r\n      };\r\n    }\r\n\r\n    this.#validateSvgIconInfo(name, variant, fillSet.outlined, trustOutlinedViewBox);\r\n    this.#validateSvgIconInfo(name, variant, fillSet.filled, trustFilledViewBox);\r\n\r\n    if (window !== undefined) {\r\n      const key = this.#createKey(name, variant);\r\n      this.#icons.set(key, {\r\n        outlined: svg`<svg viewBox=\"${fillSet.outlined.viewBox}\"><path d=\"${fillSet.outlined.path}\"/></svg>`,\r\n        filled: svg`<svg viewBox=\"${fillSet.filled.viewBox}\"><path d=\"${fillSet.filled.path}\"/></svg>`,\r\n      });\r\n\r\n      this.#observers.get(key)?.forEach((x) => x());\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Determines whether an icon is registered for the given variant.\r\n   * @param {string} name The name of the icon.\r\n   * @param {IconVariant} variant The variant of the icon.\r\n   * @returns {boolean} Whether `icon` is registered for the given `variant`.\r\n   */\r\n  static isIconRegistered(name: string, variant: IconVariant): boolean {\r\n    return window !== undefined && this.#icons.has(this.#createKey(name, variant));\r\n  }\r\n\r\n  /**\r\n   * Renders an icon from the registry.\r\n   * @param {string} name The name of the icon.\r\n   * @param {IconVariant} variant The variant of the icon.\r\n   * @param {boolean} filled Whether to render a filled variant of the icon.\r\n   * @returns {SVGTemplateResult | undefined} A `SVGTemplateResult` used to render the icon.\r\n   */\r\n  static renderIcon(name: string, variant: IconVariant, filled: boolean): SVGTemplateResult | undefined {\r\n    const data = this.#icons.get(this.#createKey(name, variant));\r\n    return filled ? data?.filled : data?.outlined;\r\n  }\r\n\r\n  /**\r\n   * Begins observing registration for the specified icon.\r\n   * @param {string} name The name of the icon to observe.\r\n   * @param {IconVariant} variant The variant of the icon to observe.\r\n   * @param {() => void} callback Callback invoked when the specified icon is registered for the given variant.\r\n   * @returns {() => void} Function used to stop observing.\r\n   */\r\n  static observe(name: string, variant: IconVariant, callback: () => void): () => void {\r\n    if (window === undefined) return () => {};\r\n\r\n    const key = this.#createKey(name, variant);\r\n    if (!this.#observers.has(key)) {\r\n      this.#observers.set(key, [callback]);\r\n    } else {\r\n      this.#observers.get(key)?.push(callback);\r\n    }\r\n\r\n    return () => {\r\n      const callbacks = this.#observers.get(key);\r\n      if (callbacks) {\r\n        const index = callbacks.indexOf(callback);\r\n        if (index >= 0) {\r\n          callbacks.splice(index, 1);\r\n        }\r\n        if (callbacks.length == 0) {\r\n          this.#observers.delete(key);\r\n        }\r\n      }\r\n    };\r\n  }\r\n\r\n  /** @private */\r\n  static #createKey(name: string, variant: IconVariant): string {\r\n    return `${variant}-${name}`;\r\n  }\r\n\r\n  /** @private */\r\n  static #validateSvgIconInfo(name: string, variant: IconVariant, info: SvgIconInfo, trustViewBox = false): void {\r\n    if (!trustViewBox && !VIEW_BOX_PATTERN.test(info.viewBox)) {\r\n      throw new Error(`Unable to register icon '${name}' for variant '${variant}'. Invalid viewbox data.`);\r\n    }\r\n    if (!PATH_DATA_PATTERN.test(info.path)) {\r\n      throw new Error(`Unable to register icon '${name}' for variant '${variant}'. Invalid path data.`);\r\n    }\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\n\r\nimport { customElement, Role } from \"@m3e/web/core\";\r\n\r\nimport { IconRegistry } from \"./IconRegistry\";\r\nimport { IconVariant } from \"./IconVariant\";\r\nimport { IconGrade } from \"./IconGrade\";\r\nimport { IconWeight } from \"./IconWeight\";\r\n\r\n/**\r\n * A small symbol used to easily identify an action or category.\r\n *\r\n * @description\r\n * The `m3e-icon` component makes it easier to use Material Symbols in your application. Material Symbols are Google's newest icons supporting\r\n * a range of design variants. For more information, see:\r\n * - {@link https://developers.google.com/fonts/docs/material_symbols|Material Symbol Guide}\r\n * - {@link https://fonts.google.com/icons|Material Symbol Library}\r\n *\r\n * The Material Symbols font is the easiest way to incorporate Material Symbols into your application. Using the\r\n * {@link https://developers.google.com/fonts/docs/css2#forming_api_urls|Fonts CSS API}, you can use variable fonts to optimize icon\r\n * usage within your application. See {@link https://caniuse.com/variable-fonts|Can I Use's Variable Fonts} to determine whether\r\n * your user's browser support variable fonts.\r\n *\r\n * @example\r\n * The following example illustrates showing the `home` icon. The `name` attribute specifies the icon to present.\r\n * ```html\r\n * <m3e-icon name=\"home\"></m3e-icon>\r\n * ```\r\n * @example\r\n * The next example illustrates a link used to download a variable font for outlined icons with fill support.\r\n * ```html\r\n * <link href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0..1,0\" rel=\"stylesheet\"/>\r\n * ```\r\n *\r\n * @tag m3e-icon\r\n *\r\n * @attr filled - Whether the icon is filled.\r\n * @attr grade - The grade of the icon.\r\n * @attr optical-size - A value from 20 to 48 indicating the optical size of the icon.\r\n * @attr name - The name of the icon.\r\n * @attr variant - The appearance variant of the icon.\r\n * @attr weight - A value from 100 to 700 indicating the weight of the icon.\r\n */\r\n@customElement(\"m3e-icon\")\r\nexport class M3eIconElement extends Role(LitElement, \"img\") {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: inline-block;\r\n      user-select: none;\r\n      font-size: var(--m3e-icon-size, 1.5rem);\r\n      width: 1em;\r\n      height: 1em;\r\n      vertical-align: middle;\r\n      overflow: hidden;\r\n    }\r\n    .icon {\r\n      font-weight: normal;\r\n      font-style: normal;\r\n      line-height: 1;\r\n      letter-spacing: normal;\r\n      text-transform: none;\r\n      white-space: nowrap;\r\n      word-wrap: normal;\r\n      direction: ltr;\r\n      font-feature-settings: \"liga\";\r\n      -webkit-font-smoothing: antialiased;\r\n      width: inherit;\r\n      height: inherit;\r\n      vertical-align: inherit;\r\n      font-variation-settings:\r\n        \"FILL\" var(--_icon-fill, 0),\r\n        \"wght\" var(--_icon-weight, 400),\r\n        \"GRAD\" var(--_icon-grade, 0),\r\n        \"opsz\" var(--_icon-optical-size, 24);\r\n    }\r\n    :host([variant=\"outlined\"]) .icon {\r\n      font-family: \"Material Symbols Outlined\";\r\n    }\r\n    :host([variant=\"rounded\"]) .icon {\r\n      font-family: \"Material Symbols Rounded\";\r\n    }\r\n    :host([variant=\"sharp\"]) .icon {\r\n      font-family: \"Material Symbols Sharp\";\r\n    }\r\n    svg {\r\n      font-size: inherit;\r\n      width: 1em;\r\n      height: 1em;\r\n    }\r\n  `;\r\n\r\n  /** @private */ @query(\".icon\") private readonly _icon?: HTMLSpanElement;\r\n  /** @private */ #iconRegistryUnobserve?: () => void;\r\n\r\n  /** The name of the icon. */\r\n  @property() name: string = \"\";\r\n\r\n  /**\r\n   * The appearance variant of the icon.\r\n   * @default \"outlined\"\r\n   */\r\n  @property({ reflect: true }) variant: IconVariant = \"outlined\";\r\n\r\n  /**\r\n   * Whether the icon is filled.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) filled = false;\r\n\r\n  /**\r\n   * The grade of the icon.\r\n   * @default \"medium\"\r\n   */\r\n  @property() grade: IconGrade = \"medium\";\r\n\r\n  /**\r\n   * A value from 100 to 700 indicating the weight of the icon.\r\n   * @default 400\r\n   */\r\n  @property({ type: Number }) weight: IconWeight = 400;\r\n\r\n  /**\r\n   * A value from 20 to 48 indicating the optical size of the icon.\r\n   * @default 24\r\n   */\r\n  @property({ attribute: \"optical-size\", type: Number }) opticalSize = 24;\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    if (\r\n      !this.hasAttribute(\"aria-label\") &&\r\n      !this.hasAttribute(\"aria-labelledby\") &&\r\n      !this.hasAttribute(\"aria-hidden\")\r\n    ) {\r\n      this.ariaHidden = \"true\";\r\n    }\r\n\r\n    super.connectedCallback();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    this.#iconRegistryUnobserve?.();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override willUpdate(_changedProperties: PropertyValues<this>): void {\r\n    super.willUpdate(_changedProperties);\r\n\r\n    if (_changedProperties.has(\"name\") && !IconRegistry.isIconRegistered(this.name, this.variant)) {\r\n      this.#iconRegistryUnobserve = IconRegistry.observe(this.name, this.variant, () => {\r\n        this.requestUpdate();\r\n        this.#iconRegistryUnobserve?.();\r\n        this.#iconRegistryUnobserve = undefined;\r\n      });\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override updated(_changedProperties: PropertyValues<this>): void {\r\n    super.updated(_changedProperties);\r\n\r\n    if (_changedProperties.has(\"filled\")) {\r\n      this._icon?.style.setProperty(\"--_icon-fill\", this.filled ? \"1\" : \"0\");\r\n    }\r\n    if (_changedProperties.has(\"grade\")) {\r\n      this._icon?.style.setProperty(\r\n        \"--_icon-grade\",\r\n        this.grade === \"low\" ? \"-25\" : this.grade === \"high\" ? \"200\" : \"0\",\r\n      );\r\n    }\r\n    if (_changedProperties.has(\"weight\")) {\r\n      this._icon?.style.setProperty(\"--_icon-weight\", `${this.weight}`);\r\n    }\r\n    if (_changedProperties.has(\"opticalSize\")) {\r\n      this._icon?.style.setProperty(\"--_icon-optical-size\", `${this.opticalSize}`);\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return IconRegistry.isIconRegistered(this.name, this.variant)\r\n      ? IconRegistry.renderIcon(this.name, this.variant, this.filled)\r\n      : html`<div class=\"icon\" aria-hidden=\"true\">${this.name}</div>`;\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-icon\": M3eIconElement;\r\n  }\r\n}\r\n","import { IconRegistry, SvgIconInfo } from \"./IconRegistry\";\r\nimport { IconVariant } from \"./IconVariant\";\r\n\r\nexport type { SvgIconInfo } from \"./IconRegistry\";\r\n\r\n/**\r\n * Registers an SVG icon to the internal icon registry used by `m3e-icon`.\r\n * @param {string} name The name of the icon.\r\n * @param {IconVariant} variant The variant of the icon.\r\n * @param data The outlined and filled SVG information of the icon.\r\n */\r\nexport function registerIcon(\r\n  name: string,\r\n  variant: IconVariant,\r\n  data: { outlined: SvgIconInfo; filled: SvgIconInfo },\r\n): void {\r\n  IconRegistry.addIcon(name, variant, data);\r\n}\r\n"],"names":["PATH_DATA_PATTERN","VIEW_BOX_PATTERN","IconRegistry","addIcon","name","variant","fillSet","trustOutlinedViewBox","outlined","trustFilledViewBox","filled","viewBox","path","__classPrivateFieldGet","_a","_IconRegistry_validateSvgIconInfo","call","window","undefined","key","_IconRegistry_createKey","_IconRegistry_icons","set","svg","_IconRegistry_observers","get","forEach","x","isIconRegistered","has","renderIcon","data","observe","callback","push","callbacks","index","indexOf","splice","length","delete","info","trustViewBox","test","Error","value","Map","M3eIconElement","Role","LitElement","constructor","_M3eIconElement_iconRegistryUnobserve","grade","weight","opticalSize","connectedCallback","hasAttribute","ariaHidden","disconnectedCallback","willUpdate","_changedProperties","__classPrivateFieldSet","requestUpdate","updated","_icon","style","setProperty","render","html","styles","css","__decorate","query","prototype","property","reflect","type","Boolean","Number","attribute","customElement","registerIcon"],"mappings":"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"}