@m3e/web 2.5.12 → 2.5.14

package/dist/icon.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon.min.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      fill: currentColor;\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","this","_a","_IconRegistry_validateSvgIconInfo","call","undefined","window","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","super","disconnectedCallback","willUpdate","_changedProperties","__classPrivateFieldSet","requestUpdate","updated","_icon","style","setProperty","render","html","registerIcon","styles","css","__decorate","query","prototype","property","reflect","type","Boolean","Number","attribute","customElement"],"mappings":"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"}
+{"version":3,"file":"icon.min.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 (typeof window === \"undefined\") return;\r\n\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   * 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      fill: currentColor;\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\" translate=\"no\">${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","this","_a","_IconRegistry_validateSvgIconInfo","call","window","key","_IconRegistry_createKey","_IconRegistry_icons","set","svg","_IconRegistry_observers","get","forEach","x","isIconRegistered","undefined","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","super","disconnectedCallback","willUpdate","_changedProperties","__classPrivateFieldSet","requestUpdate","updated","_icon","style","setProperty","render","html","registerIcon","styles","css","__decorate","query","prototype","property","reflect","type","Boolean","Number","attribute","customElement"],"mappings":"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"}

package/dist/menu.js

@@ -6,7 +6,7 @@
 import { __decorate, __classPrivateFieldGet, __classPrivateFieldSet } from 'tslib';
 import { LitElement, nothing, html, unsafeCSS, css } from 'lit';
 import { query, state, property } from 'lit/decorators.js';
-import { KeyboardClick, Focusable, AttachInternals, Disabled, FocusController, isLinkButtonMixin, renderPseudoLink, DesignToken, HtmlFor, ActionElementBase, customElement, LinkButton, Role, HoverController, setCustomState, hasAssignedNodes, SuppressInitialAnimation, ScrollController, deleteCustomState, addCustomState, registerStyleSheet, Checked, prefersReducedMotion } from '@m3e/web/core';
+import { KeyboardClick, Focusable, AttachInternals, Disabled, FocusController, isLinkButtonMixin, renderPseudoLink, DesignToken, HtmlFor, ActionElementBase, customElement, LinkButton, Role, HoverController, setCustomState, hasAssignedNodes, SuppressInitialAnimation, ScrollController, ClickOutsideController, deleteCustomState, addCustomState, registerStyleSheet, Checked, prefersReducedMotion } from '@m3e/web/core';
 import { addAriaReferencedId, removeAriaReferencedId, RovingTabIndexManager } from '@m3e/web/core/a11y';
 import { positionAnchor } from '@m3e/web/core/anchoring';
 import { M3eDirectionality } from '@m3e/web/core/bidi';
@@ -355,7 +355,7 @@ _M3eMenuItemElement_handleMouseEnter = function _M3eMenuItemElement_handleMouseE
 __decorate([state()], M3eMenuItemElement.prototype, "_hasSubmenu", void 0);
 M3eMenuItemElement = M3eMenuItemElement_1 = __decorate([customElement("m3e-menu-item")], M3eMenuItemElement);
 
-var _M3eMenuElement_instances, _M3eMenuElement_trigger, _M3eMenuElement_anchorCleanup, _M3eMenuElement_listManager, _M3eMenuElement_keyDownHandler, _M3eMenuElement_mouseEnterHandler, _M3eMenuElement_documentClickHandler, _M3eMenuElement_scrollController, _M3eMenuElement_toggleHandler, _M3eMenuElement_handleSlotChange, _M3eMenuElement_handleKeyDown, _M3eMenuElement_handleMouseEnter, _M3eMenuElement_handleDocumentClick, _M3eMenuElement_getAbsolutePosition, _M3eMenuElement_deactivate;
+var _M3eMenuElement_instances, _M3eMenuElement_trigger, _M3eMenuElement_anchorCleanup, _M3eMenuElement_anchorLastPosition, _M3eMenuElement_listManager, _M3eMenuElement_keyDownHandler, _M3eMenuElement_mouseEnterHandler, _M3eMenuElement_scrollController, _M3eMenuElement_clickOutsideController, _M3eMenuElement_toggleHandler, _M3eMenuElement_handleSlotChange, _M3eMenuElement_handleKeyDown, _M3eMenuElement_handleMouseEnter, _M3eMenuElement_getAbsolutePosition, _M3eMenuElement_deactivate;
 var M3eMenuElement_1;
 /**
  * Presents a list of choices on a temporary surface.
@@ -443,27 +443,44 @@ let M3eMenuElement = M3eMenuElement_1 = class M3eMenuElement extends SuppressIni
     /** @private */
     _M3eMenuElement_anchorCleanup.set(this, void 0);
     /** @private */
+    _M3eMenuElement_anchorLastPosition.set(this, void 0);
+    /** @private */
     _M3eMenuElement_listManager.set(this, new RovingTabIndexManager().withWrap().withHomeAndEnd().withVerticalOrientation());
     /** @private */
     _M3eMenuElement_keyDownHandler.set(this, e => __classPrivateFieldGet(this, _M3eMenuElement_instances, "m", _M3eMenuElement_handleKeyDown).call(this, e));
     /** @private */
     _M3eMenuElement_mouseEnterHandler.set(this, () => __classPrivateFieldGet(this, _M3eMenuElement_instances, "m", _M3eMenuElement_handleMouseEnter).call(this));
     /** @private */
-    _M3eMenuElement_documentClickHandler.set(this, e => __classPrivateFieldGet(this, _M3eMenuElement_instances, "m", _M3eMenuElement_handleDocumentClick).call(this, e));
-    /** @private */
     _M3eMenuElement_scrollController.set(this, new ScrollController(this, {
       target: null,
       callback: target => target instanceof M3eMenuElement_1 ? target.items.filter(x => x instanceof M3eMenuItemElement).forEach(x => x.submenu?.hide()) : this.hideAll()
     }));
     /** @private */
+    _M3eMenuElement_clickOutsideController.set(this, new ClickOutsideController(this, {
+      target: null,
+      callback: composedPath => {
+        // If the menu isn't a submenu and no submenu is being clicked, close the entire menu
+        if (!this.submenu && !composedPath.some(x => x instanceof M3eMenuElement_1)) {
+          this.hide();
+        }
+      }
+    }));
+    /** @private */
     _M3eMenuElement_toggleHandler.set(this, e => {
-      if (e.newState === "closed") {
-        __classPrivateFieldGet(this, _M3eMenuElement_anchorCleanup, "f")?.call(this);
-        __classPrivateFieldSet(this, _M3eMenuElement_anchorCleanup, undefined, "f");
-      } else {
-        setTimeout(() => {
-          __classPrivateFieldGet(this, _M3eMenuElement_listManager, "f").setActiveItem(__classPrivateFieldGet(this, _M3eMenuElement_listManager, "f").items.find(x => !x.disabled));
-        }, 40);
+      switch (e.newState) {
+        case "open":
+          __classPrivateFieldGet(this, _M3eMenuElement_clickOutsideController, "f").observe(this);
+          if (__classPrivateFieldGet(this, _M3eMenuElement_trigger, "f")) {
+            __classPrivateFieldGet(this, _M3eMenuElement_clickOutsideController, "f").observe(__classPrivateFieldGet(this, _M3eMenuElement_trigger, "f"));
+          }
+          setTimeout(() => __classPrivateFieldGet(this, _M3eMenuElement_listManager, "f").setActiveItem(__classPrivateFieldGet(this, _M3eMenuElement_listManager, "f").items.find(x => !x.disabled)), 40);
+          break;
+        case "closed":
+          __classPrivateFieldGet(this, _M3eMenuElement_clickOutsideController, "f").unobserveAll();
+          __classPrivateFieldGet(this, _M3eMenuElement_anchorCleanup, "f")?.call(this);
+          __classPrivateFieldSet(this, _M3eMenuElement_anchorCleanup, undefined, "f");
+          __classPrivateFieldSet(this, _M3eMenuElement_anchorLastPosition, undefined, "f");
+          break;
       }
     });
     /**
@@ -500,7 +517,6 @@ let M3eMenuElement = M3eMenuElement_1 = class M3eMenuElement extends SuppressIni
     this.addEventListener("keydown", __classPrivateFieldGet(this, _M3eMenuElement_keyDownHandler, "f"));
     this.addEventListener("mouseenter", __classPrivateFieldGet(this, _M3eMenuElement_mouseEnterHandler, "f"));
     this.addEventListener("toggle", __classPrivateFieldGet(this, _M3eMenuElement_toggleHandler, "f"));
-    document.addEventListener("click", __classPrivateFieldGet(this, _M3eMenuElement_documentClickHandler, "f"));
   }
   /** @inheritdoc */
   disconnectedCallback() {
@@ -508,7 +524,6 @@ let M3eMenuElement = M3eMenuElement_1 = class M3eMenuElement extends SuppressIni
     this.removeEventListener("keydown", __classPrivateFieldGet(this, _M3eMenuElement_keyDownHandler, "f"));
     this.removeEventListener("mouseenter", __classPrivateFieldGet(this, _M3eMenuElement_mouseEnterHandler, "f"));
     this.removeEventListener("toggle", __classPrivateFieldGet(this, _M3eMenuElement_toggleHandler, "f"));
-    document.removeEventListener("click", __classPrivateFieldGet(this, _M3eMenuElement_documentClickHandler, "f"));
     __classPrivateFieldGet(this, _M3eMenuElement_instances, "m", _M3eMenuElement_deactivate).call(this);
   }
   /**
@@ -540,12 +555,21 @@ let M3eMenuElement = M3eMenuElement_1 = class M3eMenuElement extends SuppressIni
         setCustomState(this, "--shift-up", false);
         setCustomState(this, Math.round(y) === Math.round(top) ? "--shift-down" : "--shift-up", true);
       }
-      if (M3eDirectionality.current === "rtl") {
-        this.style.right = `${window.innerWidth - x - this.clientWidth}px`;
-      } else {
-        this.style.left = `${x}px`;
+      if (__classPrivateFieldGet(this, _M3eMenuElement_anchorLastPosition, "f")?.dir !== M3eDirectionality.current || __classPrivateFieldGet(this, _M3eMenuElement_anchorLastPosition, "f")?.x !== x) {
+        if (M3eDirectionality.current === "rtl") {
+          this.style.right = `${window.innerWidth - x - this.clientWidth}px`;
+        } else {
+          this.style.left = `${x}px`;
+        }
       }
-      this.style.top = `${y}px`;
+      if (__classPrivateFieldGet(this, _M3eMenuElement_anchorLastPosition, "f")?.y !== y) {
+        this.style.top = `${y}px`;
+      }
+      __classPrivateFieldSet(this, _M3eMenuElement_anchorLastPosition, {
+        x,
+        y,
+        dir: M3eDirectionality.current
+      }, "f");
     }), "f");
     const parent = trigger.closest("m3e-menu");
     if (parent) {
@@ -625,11 +649,12 @@ let M3eMenuElement = M3eMenuElement_1 = class M3eMenuElement extends SuppressIni
 };
 _M3eMenuElement_trigger = new WeakMap();
 _M3eMenuElement_anchorCleanup = new WeakMap();
+_M3eMenuElement_anchorLastPosition = new WeakMap();
 _M3eMenuElement_listManager = new WeakMap();
 _M3eMenuElement_keyDownHandler = new WeakMap();
 _M3eMenuElement_mouseEnterHandler = new WeakMap();
-_M3eMenuElement_documentClickHandler = new WeakMap();
 _M3eMenuElement_scrollController = new WeakMap();
+_M3eMenuElement_clickOutsideController = new WeakMap();
 _M3eMenuElement_toggleHandler = new WeakMap();
 _M3eMenuElement_instances = new WeakSet();
 _M3eMenuElement_handleSlotChange = function _M3eMenuElement_handleSlotChange() {
@@ -680,11 +705,6 @@ _M3eMenuElement_handleKeyDown = function _M3eMenuElement_handleKeyDown(e) {
 _M3eMenuElement_handleMouseEnter = function _M3eMenuElement_handleMouseEnter() {
   this._activate();
 };
-_M3eMenuElement_handleDocumentClick = function _M3eMenuElement_handleDocumentClick(e) {
-  if (!this.submenu && !e.composedPath().some(x => x instanceof M3eMenuElement_1 || x === __classPrivateFieldGet(this, _M3eMenuElement_trigger, "f"))) {
-    this.hide();
-  }
-};
 _M3eMenuElement_getAbsolutePosition = function _M3eMenuElement_getAbsolutePosition(element) {
   let x = 0,
     y = 0;
@@ -707,7 +727,7 @@ _M3eMenuElement_deactivate = function _M3eMenuElement_deactivate() {
   registerStyleSheet(css`m3e-menu > m3e-divider { margin-block: var(--m3e-menu-divider-spacing, 0.5rem); }`);
 })();
 /** The styles of the element. */
-M3eMenuElement.styles = css`:host { position: absolute; padding: unset; margin: unset; border: unset; overflow-y: auto; overflow-x: visible; scrollbar-width: ${DesignToken.scrollbar.thinWidth}; scrollbar-color: ${DesignToken.scrollbar.color}; scroll-padding-block: calc( var(--m3e-focus-ring-thickness, 3px) + var(--m3e-menu-container-padding-block, 0.25rem) ); min-width: var(--m3e-menu-container-min-width, 7rem); max-width: var(--m3e-menu-container-max-width, 17.5rem); max-height: var(--m3e-menu-container-max-height, 17.5rem); box-shadow: var(--m3e-menu-container-elevation, ${DesignToken.elevation.level3}); opacity: 0; display: none; } .base { display: flex; flex-direction: column; row-gap: var(--m3e-menu-gap, 0.125rem); min-width: inherit; max-width: inherit; padding-block: var(--m3e-menu-container-padding-block, 0.25rem); padding-inline: var(--m3e-menu-container-padding-inline, 0.25rem); --m3e-focus-ring-outward-offset: 0px; --m3e-focus-ring-growth-factor: 1.5; } :host(:not(:is(:state(--active), :--active))) { border-radius: var(--m3e-menu-container-shape, ${DesignToken.shape.corner.small}); } :host(:not(:is(:state(--active), :--active))) .base { --m3e-menu-item-first-child-shape: ${DesignToken.shape.corner.extraSmall}; --m3e-menu-item-last-child-shape: ${DesignToken.shape.corner.extraSmall}; } :host(:is(:state(--active), :--active)) { border-radius: var(--m3e-menu-active-container-shape, ${DesignToken.shape.corner.large}); } :host(:not(:is(:state(--no-animate), :--no-animate))) { transition: ${unsafeCSS(`opacity ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard}, 
+M3eMenuElement.styles = css`:host { position: absolute; padding: unset; margin: unset; border: unset; overflow-y: auto; overflow-x: visible; scrollbar-width: ${DesignToken.scrollbar.thinWidth}; scrollbar-color: ${DesignToken.scrollbar.color}; scroll-padding-block: calc( var(--m3e-focus-ring-thickness, 3px) + var(--m3e-menu-container-padding-block, 0.25rem) ); min-width: var(--m3e-menu-container-min-width, 7rem); max-width: var(--m3e-menu-container-max-width, 17.5rem); max-height: var(--m3e-menu-container-max-height, 17.5rem); box-shadow: var(--m3e-menu-container-elevation, ${DesignToken.elevation.level3}); opacity: 0; display: none; } .base { contain: layout style paint; display: flex; flex-direction: column; row-gap: var(--m3e-menu-gap, 0.125rem); min-width: inherit; max-width: inherit; padding-block: var(--m3e-menu-container-padding-block, 0.25rem); padding-inline: var(--m3e-menu-container-padding-inline, 0.25rem); --m3e-focus-ring-outward-offset: 0px; --m3e-focus-ring-growth-factor: 1.5; } :host(:not(:is(:state(--active), :--active))) { border-radius: var(--m3e-menu-container-shape, ${DesignToken.shape.corner.small}); } :host(:not(:is(:state(--active), :--active))) .base { --m3e-menu-item-first-child-shape: ${DesignToken.shape.corner.extraSmall}; --m3e-menu-item-last-child-shape: ${DesignToken.shape.corner.extraSmall}; } :host(:is(:state(--active), :--active)) { border-radius: var(--m3e-menu-active-container-shape, ${DesignToken.shape.corner.large}); } :host(:not(:is(:state(--no-animate), :--no-animate))) { transition: ${unsafeCSS(`opacity ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard}, 
         transform ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard},
         overlay ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard} allow-discrete,
         display ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard} allow-discrete,