@m3e/web 2.3.1 → 2.3.2

package/dist/icon.min.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
- * Copyright (c) 2025 matraic
+ * Copyright (c) 2025–2026 matraic
  * See LICENSE file in the project root for full license text.
  */
-import{__decorate as t}from"tslib";import{LitElement as i,html as e,css as o}from"lit";import{query as r,property as a}from"lit/decorators.js";import{Role as n,customElement as s}from"@m3e/web/core";let l=class extends(n(i,"img")){constructor(){super(...arguments),this.name="",this.variant="outlined",this.filled=!1,this.grade="medium",this.weight=400,this.opticalSize=24}connectedCallback(){this.hasAttribute("aria-label")||this.hasAttribute("aria-labelledby")||this.hasAttribute("aria-hidden")||(this.ariaHidden="true"),super.connectedCallback()}updated(t){super.updated(t),t.has("filled")&&this._icon?.style.setProperty("--_icon-fill",this.filled?"1":"0"),t.has("grade")&&this._icon?.style.setProperty("--_icon-grade","low"===this.grade?"-25":"high"===this.grade?"200":"0"),t.has("weight")&&this._icon?.style.setProperty("--_icon-weight",`${this.weight}`),t.has("opticalSize")&&this._icon?.style.setProperty("--_icon-optical-size",`${this.opticalSize}`)}render(){return e`<div class="icon" aria-hidden="true">${this.name}</div>`}};l.styles=o`: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"; }`,t([r(".icon")],l.prototype,"_icon",void 0),t([a()],l.prototype,"name",void 0),t([a({reflect:!0})],l.prototype,"variant",void 0),t([a({type:Boolean,reflect:!0})],l.prototype,"filled",void 0),t([a()],l.prototype,"grade",void 0),t([a({type:Number})],l.prototype,"weight",void 0),t([a({attribute:"optical-size",type:Number})],l.prototype,"opticalSize",void 0),l=t([s("m3e-icon")],l);export{l as M3eIconElement};
+import{__classPrivateFieldGet as t,__classPrivateFieldSet as i,__decorate as e}from"tslib";import{svg as o,LitElement as s,html as a,css as n}from"lit";import{query as r,property as l}from"lit/decorators.js";import{Role as h,customElement as d}from"@m3e/web/core";var c,p,f,v,m;const g=/^[MmLlHhVvCcSsQqTtAaZz0-9.,\s-]+$/,u=/^-?\d+(\.\d+)?\s+-?\d+(\.\d+)?\s+-?\d+(\.\d+)?\s+-?\d+(\.\d+)?$/;class w{static addIcon(i,e,s){const a="string"==typeof s.outlined,n="string"==typeof s.filled;if("string"==typeof s.outlined&&(s.outlined={viewBox:"0 -960 960 960",path:s.outlined}),"string"==typeof s.filled&&(s.filled={viewBox:"0 -960 960 960",path:s.filled}),t(this,c,"m",m).call(this,i,e,s.outlined,a),t(this,c,"m",m).call(this,i,e,s.filled,n),void 0!==window){const a=t(this,c,"m",v).call(this,i,e);t(this,c,"f",p).set(a,{outlined:o`<svg viewBox="${s.outlined.viewBox}"><path d="${s.outlined.path}"/></svg>`,filled:o`<svg viewBox="${s.filled.viewBox}"><path d="${s.filled.path}"/></svg>`}),t(this,c,"f",f).get(a)?.forEach(t=>t())}}static isIconRegistered(i,e){return void 0!==window&&t(this,c,"f",p).has(t(this,c,"m",v).call(this,i,e))}static renderIcon(i,e,o){const s=t(this,c,"f",p).get(t(this,c,"m",v).call(this,i,e));return o?s?.filled:s?.outlined}static observe(i,e,o){if(void 0===window)return()=>{};const s=t(this,c,"m",v).call(this,i,e);return t(this,c,"f",f).has(s)?t(this,c,"f",f).get(s)?.push(o):t(this,c,"f",f).set(s,[o]),()=>{const i=t(this,c,"f",f).get(s);if(i){const e=i.indexOf(o);e>=0&&i.splice(e,1),0==i.length&&t(this,c,"f",f).delete(s)}}}}var y;c=w,v=function(t,i){return`${i}-${t}`},m=function(t,i,e,o=!1){if(!o&&!u.test(e.viewBox))throw new Error(`Unable to register icon '${t}' for variant '${i}'. Invalid viewbox data.`);if(!g.test(e.path))throw new Error(`Unable to register icon '${t}' for variant '${i}'. Invalid path data.`)},p={value:new Map},f={value:new Map};let b=class extends(h(s,"img")){constructor(){super(...arguments),y.set(this,void 0),this.name="",this.variant="outlined",this.filled=!1,this.grade="medium",this.weight=400,this.opticalSize=24}connectedCallback(){this.hasAttribute("aria-label")||this.hasAttribute("aria-labelledby")||this.hasAttribute("aria-hidden")||(this.ariaHidden="true"),super.connectedCallback()}disconnectedCallback(){super.disconnectedCallback(),t(this,y,"f")?.call(this)}willUpdate(e){super.willUpdate(e),e.has("name")&&!w.isIconRegistered(this.name,this.variant)&&i(this,y,w.observe(this.name,this.variant,()=>{this.requestUpdate(),t(this,y,"f")?.call(this),i(this,y,void 0,"f")}),"f")}updated(t){super.updated(t),t.has("filled")&&this._icon?.style.setProperty("--_icon-fill",this.filled?"1":"0"),t.has("grade")&&this._icon?.style.setProperty("--_icon-grade","low"===this.grade?"-25":"high"===this.grade?"200":"0"),t.has("weight")&&this._icon?.style.setProperty("--_icon-weight",`${this.weight}`),t.has("opticalSize")&&this._icon?.style.setProperty("--_icon-optical-size",`${this.opticalSize}`)}render(){return w.isIconRegistered(this.name,this.variant)?w.renderIcon(this.name,this.variant,this.filled):a`<div class="icon" aria-hidden="true">${this.name}</div>`}};function $(t,i,e){w.addIcon(t,i,e)}y=new WeakMap,b.styles=n`: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; }`,e([r(".icon")],b.prototype,"_icon",void 0),e([l()],b.prototype,"name",void 0),e([l({reflect:!0})],b.prototype,"variant",void 0),e([l({type:Boolean,reflect:!0})],b.prototype,"filled",void 0),e([l()],b.prototype,"grade",void 0),e([l({type:Number})],b.prototype,"weight",void 0),e([l({attribute:"optical-size",type:Number})],b.prototype,"opticalSize",void 0),b=e([d("m3e-icon")],b);export{b as M3eIconElement,$ as registerIcon};
 //# sourceMappingURL=icon.min.js.map

package/dist/icon.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon.min.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","this","name","variant","filled","grade","weight","opticalSize","connectedCallback","hasAttribute","ariaHidden","super","updated","_changedProperties","has","_icon","style","setProperty","render","html","styles","css","__decorate","query","prototype","property","reflect","type","Boolean","Number","attribute","customElement"],"mappings":";;;;;uMA2CO,IAAMA,EAAN,cAA6BC,EAAKC,EAAY,QAA9CC,WAAAA,uBA6COC,KAAAC,KAAe,GAMED,KAAAE,QAAuB,WAMRF,KAAAG,QAAS,EAMzCH,KAAAI,MAAmB,SAMHJ,KAAAK,OAAS,IAMkBL,KAAAM,YAAc,EAwCvE,CArCWC,iBAAAA,GAEJP,KAAKQ,aAAa,eAClBR,KAAKQ,aAAa,oBAClBR,KAAKQ,aAAa,iBAEnBR,KAAKS,WAAa,QAGpBC,MAAMH,mBACR,CAGmBI,OAAAA,CAAQC,GACzBF,MAAMC,QAAQC,GAEVA,EAAmBC,IAAI,WACzBb,KAAKc,OAAOC,MAAMC,YAAY,eAAgBhB,KAAKG,OAAS,IAAM,KAEhES,EAAmBC,IAAI,UACzBb,KAAKc,OAAOC,MAAMC,YAChB,gBACe,QAAfhB,KAAKI,MAAkB,MAAuB,SAAfJ,KAAKI,MAAmB,MAAQ,KAG/DQ,EAAmBC,IAAI,WACzBb,KAAKc,OAAOC,MAAMC,YAAY,iBAAkB,GAAGhB,KAAKK,UAEtDO,EAAmBC,IAAI,gBACzBb,KAAKc,OAAOC,MAAMC,YAAY,uBAAwB,GAAGhB,KAAKM,cAElE,CAGmBW,MAAAA,GACjB,OAAOC,CAAI,wCAAwClB,KAAKC,YAC1D,GAhHgBL,EAAAuB,OAAyBC,CAAG,+zBAwCKC,EAAA,CAAhCC,EAAM,UAAkD1B,EAAA2B,UAAA,gBAG7DF,EAAA,CAAXG,KAA6B5B,EAAA2B,UAAA,eAMDF,EAAA,CAA5BG,EAAS,CAAEC,SAAS,KAA0C7B,EAAA2B,UAAA,eAAA,GAMnBF,EAAA,CAA3CG,EAAS,CAAEE,KAAMC,QAASF,SAAS,KAAuB7B,EAAA2B,UAAA,cAAA,GAM/CF,EAAA,CAAXG,KAAuC5B,EAAA2B,UAAA,gBAMZF,EAAA,CAA3BG,EAAS,CAAEE,KAAME,UAAuBhC,EAAA2B,UAAA,cAAA,GAMcF,EAAA,CAAtDG,EAAS,CAAEK,UAAW,eAAgBH,KAAME,UAA2BhC,EAAA2B,UAAA,mBAAA,GA3E7D3B,EAAcyB,EAAA,CAD1BS,EAAc,aACFlC"}
+{"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      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":";;;;;sRAIgB,MAAMA,EAAoB,oCACpBC,EAAmB,wEAwB5BC,EAYX,cAAOC,CAAQC,EAAcC,EAAsBC,GACjD,MAAMC,EAAmD,iBAArBD,EAAQE,SACtCC,EAA+C,iBAAnBH,EAAQI,OAkB1C,GAhBgC,iBAArBJ,EAAQE,WACjBF,EAAQE,SAAW,CACjBG,QAAS,iBACTC,KAAMN,EAAQE,WAGY,iBAAnBF,EAAQI,SACjBJ,EAAQI,OAAS,CACfC,QAAS,iBACTC,KAAMN,EAAQI,SAIlBG,EAAAC,KAAIC,EAAA,IAAAC,GAAqBC,KAAzBH,KAA0BV,EAAMC,EAASC,EAAQE,SAAUD,GAC3DM,EAAAC,KAAIC,EAAA,IAAAC,GAAqBC,KAAzBH,KAA0BV,EAAMC,EAASC,EAAQI,OAAQD,QAE1CS,IAAXC,OAAsB,CACxB,MAAMC,EAAMP,EAAAC,KAAIC,EAAA,IAAAM,GAAWJ,KAAfH,KAAgBV,EAAMC,GAClCQ,EAAAC,KAAIC,EAAA,IAAAO,GAAQC,IAAIH,EAAK,CACnBZ,SAAUgB,CAAG,iBAAiBlB,EAAQE,SAASG,qBAAqBL,EAAQE,SAASI,gBACrFF,OAAQc,CAAG,iBAAiBlB,EAAQI,OAAOC,qBAAqBL,EAAQI,OAAOE,kBAGjFC,EAAAC,KAAIC,EAAA,IAAAU,GAAYC,IAAIN,IAAMO,QAASC,GAAMA,IAC3C,CACF,CAQA,uBAAOC,CAAiBzB,EAAcC,GACpC,YAAkBa,IAAXC,QAAwBN,EAAAC,KAAIC,EAAA,IAAAO,GAAQQ,IAAIjB,EAAAC,KAAIC,EAAA,IAAAM,QAAJP,KAAgBV,EAAMC,GACvE,CASA,iBAAO0B,CAAW3B,EAAcC,EAAsBK,GACpD,MAAMsB,EAAOnB,EAAAC,KAAIC,EAAA,IAAAO,GAAQI,IAAIb,EAAAC,KAAIC,EAAA,IAAAM,GAAWJ,KAAfH,KAAgBV,EAAMC,IACnD,OAAOK,EAASsB,GAAMtB,OAASsB,GAAMxB,QACvC,CASA,cAAOyB,CAAQ7B,EAAcC,EAAsB6B,GACjD,QAAehB,IAAXC,OAAsB,MAAO,OAEjC,MAAMC,EAAMP,EAAAC,KAAIC,EAAA,IAAAM,GAAWJ,KAAfH,KAAgBV,EAAMC,GAOlC,OANKQ,EAAAC,KAAIC,EAAA,IAAAU,GAAYK,IAAIV,GAGvBP,EAAAC,KAAIC,EAAA,IAAAU,GAAYC,IAAIN,IAAMe,KAAKD,GAF/BrB,EAAAC,KAAIC,EAAA,IAAAU,GAAYF,IAAIH,EAAK,CAACc,IAKrB,KACL,MAAME,EAAYvB,EAAAC,KAAIC,EAAA,IAAAU,GAAYC,IAAIN,GACtC,GAAIgB,EAAW,CACb,MAAMC,EAAQD,EAAUE,QAAQJ,GAC5BG,GAAS,GACXD,EAAUG,OAAOF,EAAO,GAEF,GAApBD,EAAUI,QACZ3B,EAAAC,KAAIC,EAAA,IAAAU,GAAYgB,OAAOrB,EAE3B,EAEJ,QAGkBL,EAAAb,EAAAmB,EAAA,SAAAjB,EAAcC,GAC9B,MAAO,GAAGA,KAAWD,GACvB,EAACY,EAAA,SAG2BZ,EAAcC,EAAsBqC,EAAmBC,GAAe,GAChG,IAAKA,IAAiB1C,EAAiB2C,KAAKF,EAAK/B,SAC/C,MAAM,IAAIkC,MAAM,4BAA4BzC,mBAAsBC,6BAEpE,IAAKL,EAAkB4C,KAAKF,EAAK9B,MAC/B,MAAM,IAAIiC,MAAM,4BAA4BzC,mBAAsBC,yBAEtE,EA3GgBiB,EAAA,CAAAwB,MAAS,IAAIC,KAEGtB,EAAA,CAAAqB,MAAa,IAAIC,KCY5C,IAAMC,EAAN,cAA6BC,EAAKC,EAAY,QAA9CC,WAAAA,uBAiDWC,EAAA7B,IAAAT,aAGJA,KAAAV,KAAe,GAMEU,KAAAT,QAAuB,WAMRS,KAAAJ,QAAS,EAMzCI,KAAAuC,MAAmB,SAMHvC,KAAAwC,OAAqB,IAMMxC,KAAAyC,YAAc,EA8DvE,CA3DWC,iBAAAA,GAEJ1C,KAAK2C,aAAa,eAClB3C,KAAK2C,aAAa,oBAClB3C,KAAK2C,aAAa,iBAEnB3C,KAAK4C,WAAa,QAGpBC,MAAMH,mBACR,CAGSI,oBAAAA,GACPD,MAAMC,uBAEN/C,EAAAC,KAAIsC,EAAA,MAAyBnC,KAA7BH,KACF,CAGmB+C,UAAAA,CAAWC,GAC5BH,MAAME,WAAWC,GAEbA,EAAmBhC,IAAI,UAAY5B,EAAa2B,iBAAiBf,KAAKV,KAAMU,KAAKT,UACnF0D,EAAAjD,KAAIsC,EAA0BlD,EAAa+B,QAAQnB,KAAKV,KAAMU,KAAKT,QAAS,KAC1ES,KAAKkD,gBACLnD,EAAAC,KAAIsC,EAAA,MAAyBnC,KAA7BH,MACAiD,EAAAjD,KAAIsC,OAA0BlC,EAAS,WAG7C,CAGmB+C,OAAAA,CAAQH,GACzBH,MAAMM,QAAQH,GAEVA,EAAmBhC,IAAI,WACzBhB,KAAKoD,OAAOC,MAAMC,YAAY,eAAgBtD,KAAKJ,OAAS,IAAM,KAEhEoD,EAAmBhC,IAAI,UACzBhB,KAAKoD,OAAOC,MAAMC,YAChB,gBACe,QAAftD,KAAKuC,MAAkB,MAAuB,SAAfvC,KAAKuC,MAAmB,MAAQ,KAG/DS,EAAmBhC,IAAI,WACzBhB,KAAKoD,OAAOC,MAAMC,YAAY,iBAAkB,GAAGtD,KAAKwC,UAEtDQ,EAAmBhC,IAAI,gBACzBhB,KAAKoD,OAAOC,MAAMC,YAAY,uBAAwB,GAAGtD,KAAKyC,cAElE,CAGmBc,MAAAA,GACjB,OAAOnE,EAAa2B,iBAAiBf,KAAKV,KAAMU,KAAKT,SACjDH,EAAa6B,WAAWjB,KAAKV,KAAMU,KAAKT,QAASS,KAAKJ,QACtD4D,CAAI,wCAAwCxD,KAAKV,YACvD,YCjLcmE,EACdnE,EACAC,EACA2B,GAEA9B,EAAaC,QAAQC,EAAMC,EAAS2B,EACtC,eD8BkBgB,EAAAwB,OAAyBC,CAAG,i4BA8CKC,EAAA,CAAhCC,EAAM,UAAkD3B,EAAA4B,UAAA,gBAI7DF,EAAA,CAAXG,KAA6B7B,EAAA4B,UAAA,eAMDF,EAAA,CAA5BG,EAAS,CAAEC,SAAS,KAA0C9B,EAAA4B,UAAA,eAAA,GAMnBF,EAAA,CAA3CG,EAAS,CAAEE,KAAMC,QAASF,SAAS,KAAuB9B,EAAA4B,UAAA,cAAA,GAM/CF,EAAA,CAAXG,KAAuC7B,EAAA4B,UAAA,gBAMZF,EAAA,CAA3BG,EAAS,CAAEE,KAAME,UAAmCjC,EAAA4B,UAAA,cAAA,GAMEF,EAAA,CAAtDG,EAAS,CAAEK,UAAW,eAAgBH,KAAME,UAA2BjC,EAAA4B,UAAA,mBAAA,GAlF7D5B,EAAc0B,EAAA,CAD1BS,EAAc,aACFnC"}

package/dist/index.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.
  */
 throw new Error("This package has no default export. Use subpath imports like '@m3e/web/button'.");

package/dist/index.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.
  */
 throw new Error("This package has no default export. Use subpath imports like '@m3e/web/button'.");

package/dist/list.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, __classPrivateFieldSet, __decorate } from 'tslib';

package/dist/list.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,__classPrivateFieldSet as t,__decorate as i}from"tslib";import{ReconnectedCallback as s,AttachInternals as a,Role as o,ResizeController as l,setCustomState as n,computeLineCount as r,DesignToken as d,customElement as c,LinkButton as m,KeyboardClick as h,Focusable as p,Disabled as g,FocusController as v,PressedController as b,HoverController as u,renderPseudoLink as f,Selected as y,getTextContent as x,Labelled as $,Dirty as w,Touched as k,FormAssociated as _,formValue as S}from"@m3e/web/core";import{selectionManager as C,RovingTabIndexManager as E,SelectionManager as L}from"@m3e/web/core/a11y";import{LitElement as W,html as z,unsafeCSS as I,css as M}from"lit";import{property as T,query as A}from"lit/decorators.js";import{ifDefined as R}from"lit/directives/if-defined.js";var q,P,O,j,B,U,H;let V=class extends(s(a(o(W,"listitem")))){constructor(){super(...arguments),q.add(this),P.set(this,new l(this,{target:null,callback:()=>e(this,q,"m",U).call(this)})),O.set(this,void 0),j.set(this,void 0)}get leadingContentType(){return e(this,O,"f")}get trailingContentType(){return e(this,j,"f")}reconnectedCallback(){super.reconnectedCallback(),e(this,q,"m",B).call(this)}firstUpdated(t){super.firstUpdated(t),e(this,q,"m",B).call(this)}render(){return z`<div class="base">${this._renderBase()}</div>`}_renderBase(){return z`<slot name="leading" @slotchange="${this._handleLeadingSlotChange}"><slot name="leading-icon" @slotchange="${this._handleLeadingSlotChange}"></slot></slot><div class="content"><slot name="overline"></slot><slot></slot><slot name="supporting-text"></slot></div><slot name="trailing" @slotchange="${this._handleTrailingSlotChange}"><slot name="trailing-supporting-text" @slotchange="${this._handleTrailingSlotChange}"></slot><slot name="trailing-icon" @slotchange="${this._handleTrailingSlotChange}"></slot></slot>`}_handleLeadingSlotChange(i){const s=e(this,O,"f");t(this,O,e(this,q,"m",H).call(this,i.target),"f"),n(this,"-has-leading",void 0!==e(this,O,"f")),s!==e(this,O,"f")&&this.closest("m3e-list,m3e-action-list,m3e-selection-list")?.notifyLeadingContentTypeChange(s,e(this,O,"f"))}_handleTrailingSlotChange(i){const s=e(this,j,"f");t(this,j,e(this,q,"m",H).call(this,i.target),"f"),n(this,"-has-trailing",void 0!==e(this,j,"f")),s!==e(this,j,"f")&&this.closest("m3e-list,m3e-action-list,m3e-selection-list")?.notifyTrailingContentTypeChange(s,e(this,j,"f"))}};var N,D,G,K,F;P=new WeakMap,O=new WeakMap,j=new WeakMap,q=new WeakSet,B=function(){const t=this.shadowRoot?.querySelector(".content");t&&e(this,P,"f").observe(t)},U=function(){const e=this.shadowRoot?.querySelector(".content")??null,t=null===e?0:r(e);n(this,"-one-line",t<=1),n(this,"-two-line",2==t),n(this,"-three-line",t>2)},H=function(e){const t=e.assignedElements({flatten:!0});return t.some(e=>"VIDEO"===e.tagName)?"video":t.some(e=>"IMG"===e.tagName)?"image":t.some(e=>"M3E-AVATAR"===e.tagName)?"avatar":t.some(e=>"M3E-ICON"===e.tagName)?"icon":t.length>0?"text":void 0},V.styles=M`:host { display: block; } .base { display: flex; min-height: inherit; width: 100%; box-sizing: border-box; column-gap: var(--m3e-list-item-between-space, 1rem); padding-inline-start: var(--m3e-list-item-leading-space, 1rem); padding-inline-end: var(--m3e-list-item-trailing-space, 1rem); border-top-left-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-container-shape, ${d.shape.corner.none}) ); border-top-right-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-container-shape, ${d.shape.corner.none}) ); border-bottom-left-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-container-shape, ${d.shape.corner.none}) ); border-bottom-right-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-container-shape, ${d.shape.corner.none}) ); transition: ${I(`border-radius ${d.motion.spring.fastEffects}, background-color ${d.motion.duration.short4} ${d.motion.easing.standard}`)}; } :host(:state(-one-line)) { min-height: calc(var(--m3e-list-item-one-line-height, 3.5rem) + ${d.density.calc(-3)}); } :host(:state(-one-line)) .base { padding-block-start: var(--m3e-list-item-one-line-top-space, 0.5rem); padding-block-end: var(--m3e-list-item-one-line-bottom-space, 0.5rem); } :host(:state(-two-line)) { min-height: calc(var(--m3e-list-item-two-line-height, 4.5rem) + ${d.density.calc(-3)}); } :host(:state(-two-line)) .base { padding-block-start: var(--m3e-list-item-two-line-top-space, 0.5rem); padding-block-end: var(--m3e-list-item-two-line-bottom-space, 0.5rem); } :host(:state(-three-line)) { min-height: calc(var(--m3e-list-item-three-line-height, 5.5rem) + ${d.density.calc(-3)}); } :host(:state(-three-line)) .base { padding-block-start: var(--m3e-list-item-three-line-top-space, 0.75rem); padding-block-end: var(--m3e-list-item-three-line-bottom-space, 0.75rem); } :host(:not(:state(-three-line))) .base { align-items: center; } :host(:state(-three-line)) .base { align-items: flex-start; } :host(:not(:disabled):not([selected])) .base:not(.hover).focus-visible:not(.pressed) { border-top-left-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-focus-container-shape, ${d.shape.corner.large}) ); border-top-right-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-focus-container-shape, ${d.shape.corner.large}) ); border-bottom-left-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-focus-container-shape, ${d.shape.corner.large}) ); border-bottom-right-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-focus-container-shape, ${d.shape.corner.large}) ); } :host(:not(:disabled):not([selected])) .base.hover, :host(:not(:disabled):not([selected])) .base.pressed { border-top-left-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-hover-container-shape, ${d.shape.corner.medium}) ); border-top-right-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-hover-container-shape, ${d.shape.corner.medium}) ); border-bottom-left-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-hover-container-shape, ${d.shape.corner.medium}) ); border-bottom-right-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-hover-container-shape, ${d.shape.corner.medium}) ); } .content { flex: 1 1 auto; display: flex; flex-direction: column; align-items: unset; justify-content: unset; } ::slotted([slot="overline"]) { font-size: var(--m3e-list-item-overline-font-size, ${d.typescale.standard.label.small.fontSize}); font-weight: var(--m3e-list-item-overline-font-weight, ${d.typescale.standard.label.small.fontWeight}); line-height: var(--m3e-list-item-overline-line-height, ${d.typescale.standard.label.small.lineHeight}); letter-spacing: var(--m3e-list-item-overline-tracking, ${d.typescale.standard.label.small.tracking}); } ::slotted([slot="supporting-text"]) { font-size: var(--m3e-list-item-supporting-text-font-size, ${d.typescale.standard.body.medium.fontSize}); font-weight: var( --m3e-list-item-supporting-text-font-weight, ${d.typescale.standard.body.medium.fontWeight} ); line-height: var( --m3e-list-item-supporting-text-line-height, ${d.typescale.standard.body.medium.lineHeight} ); letter-spacing: var( --m3e-list-item-supporting-text-tracking, ${d.typescale.standard.body.medium.tracking} ); } ::slotted(:not([slot])) { font-size: var(--m3e-list-item-font-size, ${d.typescale.standard.body.large.fontSize}); font-weight: var(--m3e-list-item-font-weight, ${d.typescale.standard.body.large.fontWeight}); line-height: var(--m3e-list-item-line-height, ${d.typescale.standard.body.large.lineHeight}); letter-spacing: var(--m3e-list-item-tracking, ${d.typescale.standard.body.large.tracking}); } :host(:state(-has-leading)) slot[name="leading"], :host(:state(-has-trailing)) slot[name="trailing"] { display: flex; justify-content: center; } :host(:not(:state(-has-leading))) slot[name="leading"] { display: var(--_list-item-leading-reserved-display, contents); } :host(:not(:state(-has-trailing))) slot[name="trailing"] { display: var(--_list-item-trailing-reserved-display, contents); } slot[name="leading"] { min-width: var(--_list-item-leading-reserved-space, 0px); margin-inline-start: calc(0px - var(--_list-item-leading-reserved-outset, 0px)); } slot[name="trailing"] { min-width: var(--_list-item-trailing-reserved-space, 0px); margin-inline-end: calc(0px - var(--_list-item-trailing-reserved-outset, 0px)); } ::slotted(span[slot="trailing"]), ::slotted([slot="trailing-supporting-text"]) { white-space: nowrap; font-size: var(--m3e-list-item-trailing-text-font-size, ${d.typescale.standard.label.small.fontSize}); font-weight: var( --m3e-list-item-trailing-text-font-weight, ${d.typescale.standard.label.small.fontWeight} ); line-height: var( --m3e-list-item-trailing-text-line-height, ${d.typescale.standard.label.small.lineHeight} ); letter-spacing: var( --m3e-list-item-trailing-text-tracking, ${d.typescale.standard.label.small.tracking} ); } ::slotted(video[slot="leading"]), ::slotted(video[slot="trailing"]), ::slotted(img[slot="leading"]), ::slotted(img[slot="trailing"]) { display: block; margin: 0 auto; overflow: hidden; object-fit: cover; } ::slotted(video) { width: var(--m3e-list-item-video-width, 6.25rem); height: var(--m3e-list-item-video-height, 3.5rem); } ::slotted(video[slot="leading"]), ::slotted(video[slot="trailing"]) { border-radius: var(--m3e-list-item-video-shape, ${d.shape.corner.none}); } ::slotted(video[slot="leading"]) { margin-inline-start: calc(0px - var(--_list-item-leading-video-outset, 0px)); } ::slotted(video[slot="trailing"]) { margin-inline-end: calc(0px - var(--_list-item-trailing-video-outset, 0px)); } ::slotted(img) { user-drag: none; user-select: none; pointer-events: none; width: var(--m3e-list-item-image-width, 3.5rem); height: var(--m3e-list-item-image-height, 3.5rem); } ::slotted(img[slot="leading"]), ::slotted(img[slot="trailing"]) { border-radius: var(--m3e-list-item-image-shape, ${d.shape.corner.none}); } ::slotted(m3e-icon[slot="leading"]), ::slotted(m3e-icon[slot="leading-icon"]), ::slotted(m3e-icon[slot="trailing"]), ::slotted(m3e-icon[slot="trailing-icon"]) { --m3e-icon-size: var(--m3e-list-item-icon-size, 1.5rem); } :host(:not(:disabled)) ::slotted(m3e-icon[slot="leading"]), :host(:not(:disabled)) ::slotted(m3e-icon[slot="leading-icon"]) { color: var(--m3e-list-item-leading-color, ${d.color.onSurfaceVariant}); } :host(:not(:disabled)) .content { color: var(--m3e-list-item-label-text-color, ${d.color.onSurface}); } :host(:not(:disabled)) ::slotted([slot="overline"]) { color: var(--m3e-list-item-overline-color, ${d.color.onSurfaceVariant}); } :host(:not(:disabled)) ::slotted([slot="supporting-text"]) { color: var(--m3e-list-item-supporting-text-color, ${d.color.onSurfaceVariant}); } :host(:not(:disabled)) ::slotted([slot="trailing"]), :host(:not(:disabled)) ::slotted([slot="trailing-supporting-text"]), :host(:not(:disabled)) ::slotted([slot="trailing-icon"]) { color: var(--m3e-list-item-trailing-color, ${d.color.onSurfaceVariant}); } :host(:not(:disabled)) .base { background-color: var(--_list-item-container-color, var(--m3e-list-item-container-color, transparent)); } :host(:disabled) .base { background-color: var(--m3e-list-item-disabled-container-color, transparent); } :host(:disabled) ::slotted(video), :host(:disabled) ::slotted(img), :host(:disabled) ::slotted(m3e-avatar) { opacity: var(--m3e-list-item-disabled-media-opacity, 38%); } :host(:disabled) .content { color: color-mix( in srgb, var(--m3e-list-item-disabled-label-text-color, ${d.color.onSurface}) var(--m3e-list-item-disabled-label-text-opacity, 38%), transparent ); } :host(:disabled) ::slotted([slot="overline"]) { color: color-mix( in srgb, var(--m3e-list-item-disabled-overline-color, ${d.color.onSurface}) var(--m3e-list-item-disabled-overline-opacity, 38%), transparent ); } :host(:disabled) ::slotted([slot="supporting-text"]) { color: color-mix( in srgb, var(--m3e-list-item-disabled-supporting-text-color, ${d.color.onSurface}) var(--m3e-list-item-disabled-supporting-text-opacity, 38%), transparent ); } :host(:disabled) ::slotted([slot="leading"]), :host(:disabled) ::slotted([slot="leading-icon"]) { color: color-mix( in srgb, var(--m3e-list-item-disabled-leading-color, ${d.color.onSurface}) var(--m3e-list-item-disabled-leading-opacity, 38%), transparent ); } :host(:disabled) ::slotted([slot="trailing"]), :host(:disabled) ::slotted([slot="trailing-supporting-text"]), :host(:disabled) ::slotted([slot="trailing-icon"]) { color: color-mix( in srgb, var(--m3e-list-item-disabled-trailing-color, ${d.color.onSurface}) var(--m3e-list-item-disabled-trailing-opacity, 38%), transparent ); } :host(:not(:disabled)) .state-layer { --m3e-state-layer-hover-color: var(--m3e-list-item-hover-state-layer-color, ${d.color.onSurface}); --m3e-state-layer-hover-opacity: var( --m3e-list-item-hover-state-layer-opacity, ${d.state.hoverStateLayerOpacity} ); --m3e-state-layer-focus-color: var(--m3e-list-item-focus-state-layer-color, ${d.color.onSurface}); --m3e-state-layer-focus-opacity: var( --m3e-list-item-focus-state-layer-opacity, ${d.state.focusStateLayerOpacity} ); } :host(:not(:disabled)) .ripple { --m3e-ripple-color: var(--m3e-list-item-pressed-state-layer-color, ${d.color.onSurface}); --m3e-ripple-opacity: var( --m3e-list-item-pressed-state-layer-opacity, ${d.state.pressedStateLayerOpacity} ); } @media (forced-colors: active) { :host(:disabled) ::slotted([slot="leading"]), :host(:disabled) ::slotted([slot="leading-icon"]), :host(:disabled) .content, :host(:disabled) ::slotted([slot="overline"]), :host(:disabled) ::slotted([slot="supporting-text"]), :host(:disabled) ::slotted([slot="trailing"]), :host(:disabled) ::slotted([slot="trailing-supporting-text"]), :host(:disabled) ::slotted([slot="trailing-icon"]) { color: GrayText; } } @media (prefers-reduced-motion) { .base { transition: none; } }`,V=i([c("m3e-list-item")],V);let Z=class extends(a(o(W,"list"))){constructor(){super(...arguments),N.add(this),D.set(this,new Array),G.set(this,{video:0,image:0,avatar:0,icon:0,text:0}),K.set(this,{video:0,image:0,avatar:0,icon:0,text:0}),this.variant="standard"}get items(){return e(this,D,"f")}get leadingContentType(){return e(this,G,"f").video>0?"video":e(this,G,"f").image>0?"image":e(this,G,"f").avatar>0?"avatar":e(this,G,"f").icon>0?"icon":e(this,G,"f").text>0?"text":void 0}get trailingContentType(){return e(this,K,"f").video>0?"video":e(this,K,"f").image>0?"image":e(this,K,"f").avatar>0?"avatar":e(this,K,"f").icon>0?"icon":e(this,K,"f").text>0?"text":void 0}render(){return z`<slot @slotchange="${e(this,N,"m",F)}"></slot>`}notifyItemsChange(){}notifyLeadingContentTypeChange(t,i){t&&e(this,G,"f")[t]--,i&&e(this,G,"f")[i]++,["video","image","avatar","icon"].forEach(e=>{n(this,`-has-leading-${e}`,this.leadingContentType===e)})}notifyTrailingContentTypeChange(t,i){t&&e(this,K,"f")[t]--,i&&e(this,K,"f")[i]--,["video","image","avatar","icon"].forEach(e=>{n(this,`-has-trailing-${e}`,this.trailingContentType===e)})}};var J,Q,X,Y,ee,te,ie,se,ae;D=new WeakMap,G=new WeakMap,K=new WeakMap,N=new WeakSet,F=function(i){t(this,D,i.target.assignedElements({flatten:!0}).filter(e=>e instanceof V),"f"),e(this,D,"f").forEach((t,i)=>{n(t,"-first",0===i),n(t,"-last",i===e(this,D,"f").length-1)}),this.notifyItemsChange()},Z.styles=M`:host { display: flex; flex-direction: column; overflow-y: auto; box-sizing: border-box; padding-block: var(--m3e-list-block-padding, 0px); --m3e-divider-inset-start-size: var(--m3e-list-divider-inset-start-size, 1rem); --m3e-divider-inset-end-size: var(--m3e-list-divider-inset-end-size, 1.5rem); } :host([variant="standard"]) { --_list-item-leading-video-outset: var(--m3e-list-item-leading-space, 1rem); --_list-item-trailing-video-outset: var(--m3e-list-item-trailing-space, 1rem); --_expandable-list-item-expanded-toggle-icon-container-color: transparent; } :host([variant="segmented"]) { row-gap: var(--m3e-segmented-list-segment-gap, 0.125rem); } :host([variant="segmented"]) { --m3e-list-item-container-color: var(--m3e-segmented-list-item-container-color, ${d.color.surface}); --m3e-list-item-disabled-container-color: var( --m3e-segmented-list-item-disabled-container-color, ${d.color.surface} ); --m3e-list-item-container-shape: var( --m3e-segmented-list-item-container-shape, ${d.shape.corner.extraSmall} ); --m3e-list-item-hover-container-shape: var( --m3e-segmented-list-item-hover-container-shape, ${d.shape.corner.medium} ); --m3e-list-item-focus-container-shape: var( --m3e-segmented-list-item-focus-container-shape, ${d.shape.corner.large} ); --m3e-list-item-selected-container-shape: var( --m3e-segmented-list-item-selected-container-shape, ${d.shape.corner.large} ); --m3e-list-item-video-shape: var(--m3e-segmented-list-item-video-shape, ${d.shape.corner.small}); --m3e-list-item-image-shape: var(--m3e-segmented-list-item-image-shape, ${d.shape.corner.small}); --m3e-list-item-between-space: var(--m3e-segmented-list-item-spacing, 0.75rem); --_expandable-list-item-items-segment-gap: var(--m3e-segmented-list-segment-gap, 0.125rem); --_expandable-list-item-expanded-top-shape: var( --m3e-segmented-list-container-shape, ${d.shape.corner.large} ); } :host([variant="segmented"]) ::slotted(:state(-first)), :host([variant="segmented"]) ::slotted(:state(-has-previous-open):not([open])) { --_list-item-top-container-shape: var(--m3e-segmented-list-container-shape, ${d.shape.corner.large}); } :host([variant="segmented"]) ::slotted(:state(-has-next-open):not([open])), :host([variant="segmented"]) ::slotted(:state(-last)) { --_list-item-bottom-container-shape: var(--m3e-segmented-list-container-shape, ${d.shape.corner.large}); } :host([variant="segmented"]) ::slotted(m3e-divider) { display: none; } :host(:state(-has-leading-video)) { --_list-item-leading-reserved-display: block; --_list-item-leading-reserved-space: var(--m3e-list-item-video-width, 6.25rem); } :host([variant="standard"]:state(-has-leading-video)) { --_list-item-leading-reserved-outset: var(--m3e-list-item-leading-space, 1rem); --_list-item-trailing-reserved-outset: var(--m3e-list-item-trailing-space, 1rem); } :host(:state(-has-leading-image)) { --_list-item-leading-reserved-display: block; --_list-item-leading-reserved-space: var(--m3e-list-item-image-width, 3.5rem); } :host(:state(-has-leading-avatar)) { --_list-item-leading-reserved-display: block; --_list-item-leading-reserved-space: var(--m3e-avatar-size, 2.5rem); } :host(:state(-has-leading-icon)) { --_list-item-leading-reserved-display: block; --_list-item-leading-reserved-space: var(--m3e-list-item-icon-size, 1.5rem); }`,i([T({reflect:!0})],Z.prototype,"variant",void 0),Z=i([c("m3e-list")],Z);let oe=ae=class extends V{constructor(){super(...arguments),J.add(this),Q.set(this,ae.__nextId++),X.set(this,`m3e-expandable-list-item-${e(this,Q,"f")}-content`),Y.set(this,`m3e-expandable-list-item-${e(this,Q,"f")}-header`),ee.set(this,new Array),this.disabled=!1,this.open=!1}get items(){return e(this,ee,"f")}focus(e){this.button?.focus(e)}blur(){this.button?.blur()}click(){this.button?.click()}updated(e){if(super.updated(e),e.has("open")){for(let e=this.previousElementSibling;e;e=e.previousElementSibling)if(e instanceof V){n(e,"-has-next-open",this.open);break}for(let e=this.nextElementSibling;e;e=e.nextElementSibling)if(e instanceof V){n(e,"-has-previous-open",this.open);break}}}render(){return z`<div class="base"><m3e-list-item-button id="${e(this,Y,"f")}" class="header" ?disabled="${this.disabled}" aria-expanded="${this.open}" aria-controls="${e(this,X,"f")}" @click="${e(this,J,"m",te)}"><slot name="leading" slot="leading" @slotchange="${this._handleLeadingSlotChange}"></slot><slot name="overline" slot="overline"></slot><slot></slot><slot name="supporting-text" slot="supporting-text"></slot><div class="toggle-container" slot="trailing" aria-hidden="true"><div class="toggle"><slot name="toggle-icon"><svg viewBox="0 -960 960 960" fill="currentColor"><path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z"/></svg></slot></div></div></m3e-list-item-button><m3e-collapsible id="${e(this,X,"f")}" class="items" role="list" aria-labelledby="${e(this,Y,"f")}" ?open="${this.open}" @opening="${e(this,J,"m",ie)}" @opened="${e(this,J,"m",ie)}" @closing="${e(this,J,"m",ie)}" @closed="${e(this,J,"m",ie)}"><slot name="items" @slotchange="${e(this,J,"m",se)}"></slot></m3e-collapsible></div>`}};var le,ne;Q=new WeakMap,X=new WeakMap,Y=new WeakMap,ee=new WeakMap,J=new WeakSet,te=function(e){e.defaultPrevented||(this.open=!this.open,this.closest("m3e-action-list")?.[C].updateActiveItem(this.button))},ie=function(e){e.stopPropagation(),["opening","opened","closing","closed"].forEach(t=>{this.button?.classList.toggle(t,e.type===t)}),this.dispatchEvent(new Event(e.type,{bubbles:!0}))},se=function(i){t(this,ee,i.target.assignedElements({flatten:!0}).flatMap(e=>[...e.childNodes].filter(e=>e instanceof V)),"f"),e(this,ee,"f").forEach((t,i)=>{i==e(this,ee,"f").length-1?t.style.setProperty("--_list-item-bottom-container-shape",`var(--m3e-segmented-list-container-shape, ${d.shape.corner.large})`):t.style.removeProperty("--_list-item-bottom-container-shape")}),this.closest("m3e-list, m3e-action-list, m3e-selection-list")?.notifyItemsChange()},oe.styles=M`:host { display: block; } .header { width: 100%; margin-bottom: 0px; transition: ${I(`margin-bottom \n        var(--m3e-expandable-list-item-bounce-duration, ${d.motion.duration.medium1})\n        ${d.motion.easing.standard}`)}; --_list-item-button-trailing-align-self: stretch; } .toggle-container { display: flex; align-items: center; justify-content: center; align-self: stretch; width: var(--m3e-expandable-list-item-toggle-icon-container-width, 2rem); border-radius: var(--m3e-expandable-list-item-toggle-icon-container-shape, ${d.shape.corner.full}); transition: ${I(`background-color ${d.motion.duration.short4} ${d.motion.easing.standard}`)}; } .toggle { display: flex; align-items: center; justify-content: center; vertical-align: middle; font-size: var(--m3e-expandable-list-item-toggle-icon-size, 1.5rem); transition: ${I(`transform ${d.motion.duration.short4} ${d.motion.easing.standard}`)}; } .toggle svg, ::slotted(svg[slot="toggle-icon"]) { width: 1em; height: 1em; } :host([open]) .toggle-container { background-color: var( --_expandable-list-item-expanded-toggle-icon-container-color, var(--m3e-expandable-list-item-expanded-toggle-icon-container-color, ${d.color.surfaceContainer}) ); } :host([open]) .toggle { transform: rotate(180deg); } :host([open]) .header { --_list-item-top-container-shape: var(--_expandable-list-item-expanded-top-shape, initial); --_list-item-bottom-container-shape: initial; margin-bottom: var(--_expandable-list-item-items-segment-gap, 0px); } :host([open]) .header.opening { margin-bottom: calc( var(--_expandable-list-item-items-segment-gap, 0px) * var(--m3e-expandable-list-item-bounce-factor, 4) ); } :host([open]) .header, :host([open]) .items { --_list-item-container-color: var( --m3e-expandable-list-item-expanded-container-color, var(--m3e-list-item-container-color, transparent) ); } .base, ::slotted([slot="items"]) { display: flex; flex-direction: column; box-sizing: border-box; } ::slotted([slot="items"]) { flex: none; --_list-item-top-container-shape: initial; --_list-item-bottom-container-shape: initial; row-gap: var(--_expandable-list-item-items-segment-gap, 0px); } .items { --m3e-collapsible-animation-duration: var( --m3e-expandable-list-item-expand-duration, ${d.motion.duration.medium1} ); } @media (forced-colors: active) { .header { transition: none; } :host([open]) .header.opening { margin-bottom: var(--_expandable-list-item-items-segment-gap, 0px); } } @media (prefers-reduced-motion) { .header, .toggle-container, .toggle { transition: none; } }`,oe.__nextId=0,i([T({type:Boolean,reflect:!0})],oe.prototype,"disabled",void 0),i([T({type:Boolean,reflect:!0})],oe.prototype,"open",void 0),i([A(".header")],oe.prototype,"button",void 0),oe=ae=i([c("m3e-expandable-list-item")],oe);let re=class extends Z{constructor(){super(...arguments),le.set(this,e=>this[C].onKeyDown(e)),this[ne]=(new E).withWrap().withHomeAndEnd().withVerticalOrientation().withSkipPredicate(e=>{if(e.disabled)return!0;const t=e.getRootNode().host;if("items"===t.parentElement?.slot){let e=t.closest("m3e-expandable-list-item");for(;e;){if(!e.open)return!0;const t=e.closest("m3e-expandable-list-item,m3e-action-list");if(!(t instanceof oe))break;e=t}}return!1})}connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",e(this,le,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",e(this,le,"f"))}async notifyItemsChange(){const e=[...this.querySelectorAll("m3e-list-action,m3e-expandable-list-item")];for(const t of e)t.isUpdatePending&&await t.updateComplete;this.isUpdatePending&&await this.updateComplete;const{added:t}=this[C].setItems(e.map(e=>e.button));this[C].activeItem||this[C].updateActiveItem(t.find(e=>!e.disabled))}};var de,ce;le=new WeakMap,ne=C,re=i([c("m3e-action-list")],re);let me=class extends(m(V)){constructor(){super(...arguments),de.add(this),this.disabled=!1}focus(e){this.button?.focus(e)}blur(){this.button?.blur()}click(){this.button?.click()}render(){return z`<m3e-list-item-button class="button" ?disabled="${this.disabled}" href="${R(this.href||void 0)}" target="${R(this.target||void 0)}" download="${R(this.download||void 0)}" rel="${R(this.rel||void 0)}" @click="${e(this,de,"m",ce)}"><slot name="leading" slot="leading" @slotchange="${this._handleLeadingSlotChange}"></slot><slot name="overline" slot="overline"></slot><slot></slot><slot name="supporting-text" slot="supporting-text"></slot><slot name="trailing" slot="trailing" @slotchange="${this._handleTrailingSlotChange}"></slot></m3e-list-item-button>`}};de=new WeakSet,ce=function(e){e.defaultPrevented||this.closest("m3e-action-list")?.[C].updateActiveItem(this.button)},me.styles=M`:host { display: block; } .button { width: 100%; }`,i([A(".button")],me.prototype,"button",void 0),i([T({type:Boolean,reflect:!0})],me.prototype,"disabled",void 0),me=i([c("m3e-list-action")],me);let he=class extends(h(m(p(g(a(o(V,"button"),!0)))))){constructor(){super(),new v(this,{callback:(e,t)=>this.shadowRoot?.querySelector(".base")?.classList.toggle("focus-visible",t)}),new b(this,{callback:e=>this.shadowRoot?.querySelector(".base")?.classList.toggle("pressed",e)}),new u(this,{callback:e=>this.shadowRoot?.querySelector(".base")?.classList.toggle("hover",e)})}firstUpdated(e){super.firstUpdated(e),[this._focusRing,this._stateLayer,this._ripple].forEach(e=>e?.attach(this))}render(){return z`<div class="base"><m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer><m3e-focus-ring class="focus-ring" inward ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" ?disabled="${this.disabled}"></m3e-ripple>${this[f]()} ${super._renderBase()}</div>`}};var pe,ge,ve,be,ue,fe;he.styles=[V.styles,M`:host { outline: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { position: relative; } :host(:not(:disabled)) { cursor: pointer; } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } slot[name="trailing"] { align-self: var(--_list-item-button-trailing-align-self, auto); }`],i([A(".focus-ring")],he.prototype,"_focusRing",void 0),i([A(".state-layer")],he.prototype,"_stateLayer",void 0),i([A(".ripple")],he.prototype,"_ripple",void 0),he=i([c("m3e-list-item-button")],he);let ye=class extends(h(p(y(g(a(o(V,"option"),!0)))))){constructor(){super(),pe.add(this),ge.set(this,void 0),ve.set(this,""),be.set(this,t=>e(this,pe,"m",fe).call(this,t)),new v(this,{callback:(e,t)=>this.shadowRoot?.querySelector(".base")?.classList.toggle("focus-visible",t)}),new b(this,{callback:e=>this.shadowRoot?.querySelector(".base")?.classList.toggle("pressed",e)}),new u(this,{callback:e=>this.shadowRoot?.querySelector(".base")?.classList.toggle("hover",e)})}get value(){return e(this,ge,"f")??e(this,ve,"f")}set value(e){t(this,ge,e,"f")}connectedCallback(){super.connectedCallback(),this.addEventListener("click",e(this,be,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",e(this,be,"f"))}firstUpdated(e){super.firstUpdated(e),[this._focusRing,this._stateLayer,this._ripple].forEach(e=>e?.attach(this))}update(e){if(super.update(e),e.has("selected")){this.closest("m3e-selection-list")?.[C].notifySelectionChange(this);for(const e of this.querySelectorAll("m3e-icon"))e.toggleAttribute("filled",this.selected)}}render(){return z`<div class="base"><m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer><m3e-focus-ring class="focus-ring" inward ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" ?disabled="${this.disabled}"></m3e-ripple><slot name="leading" @slotchange="${this._handleLeadingSlotChange}"></slot><div class="content"><slot name="overline"></slot><slot @slotchange="${e(this,pe,"m",ue)}"></slot><slot name="supporting-text"></slot></div><slot name="trailing" @slotchange="${this._handleTrailingSlotChange}"></slot><div class="indicator">${this.closest("m3e-selection-list")?.multi?z`<m3e-pseudo-checkbox ?checked="${this.selected}" ?disabled="${this.disabled}"></m3e-pseudo-checkbox>`:z`<m3e-pseudo-radio ?checked="${this.selected}" ?disabled="${this.disabled}"></m3e-pseudo-radio>`}</div></div>`}};var xe,$e,we,ke,_e;ge=new WeakMap,ve=new WeakMap,be=new WeakMap,pe=new WeakSet,ue=function(e){t(this,ve,x(e.target),"f")},fe=function(e){const t=this.closest("m3e-selection-list");if(!e.defaultPrevented&&t&&(t.multi||!this.selected)){const e=this.selected;this.selected=!this.selected,this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0,cancelable:!0}))?(t[C].notifySelectionChange(this),this.dispatchEvent(new Event("change",{bubbles:!0}))):this.selected=e}},ye.styles=[V.styles,M`:host { outline: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { position: relative; } .indicator { min-width: 1.5rem; min-height: 1.5rem; display: flex; align-items: center; justify-content: center; } :host(:not(:disabled)) { cursor: pointer; } :host(:state(-three-line)) .indicator { align-self: flex-start; margin-top: var(--m3e-list-item-three-line-top-offset, 0.25rem); } :host([selected]) .base, :host([selected]) .state-layer, :host([selected]) .ripple, :host([selected]) .focus-ring { border-radius: var(--m3e-list-item-selected-container-shape, ${d.shape.corner.large}); } :host([selected]:not(:disabled)) .base { color: var(--m3e-list-item-selected-label-text-color, ${d.color.onSecondaryContainer}); } :host([selected]:not(:disabled)) ::slotted([slot="overline"]) { color: var(--m3e-list-item-selected-overline-color, ${d.color.onSecondaryContainer}); } :host([selected]:not(:disabled)) ::slotted([slot="supporting-text"]) { color: var(--m3e-list-item-selected-supporting-text-color, ${d.color.onSecondaryContainer}); } :host([selected]:not(:disabled)) ::slotted([slot="leading"]) { color: var(--m3e-list-item-selected-leading-color, ${d.color.onSecondaryContainer}); } :host([selected]:not(:disabled)) ::slotted([slot="trailing"]) { color: var(--m3e-list-item-selected-trailing-color, ${d.color.onSecondaryContainer}); } :host([selected]:not(:disabled)) .base { background-color: var(--m3e-list-item-selected-container-color, ${d.color.secondaryContainer}); } :host([selected]:disabled) .base { background-color: color-mix( in srgb, var(--m3e-list-item-selected-disabled-container-color, ${d.color.onSurface}) var(--m3e-list-item-selected-disabled-container-opacity, 10%), transparent ); } :host([selected]:not(:disabled)) .state-layer { --m3e-state-layer-hover-color: var( --m3e-list-item-selected-hover-state-layer-color, ${d.color.onSurface} ); --m3e-state-layer-hover-opacity: var( --m3e-list-item-selected-hover-state-layer-opacity, ${d.state.hoverStateLayerOpacity} ); --m3e-state-layer-focus-color: var( --m3e-list-item-selected-focus-state-layer-color, ${d.color.onSurface} ); --m3e-state-layer-focus-opacity: var( --m3e-list-item-selected-focus-state-layer-opacity, ${d.state.focusStateLayerOpacity} ); } :host([selected]:not(:disabled)) .ripple { --m3e-ripple-color: var(--m3e-list-item-selected-pressed-state-layer-color, ${d.color.onSurface}); --m3e-ripple-opacity: var( --m3e-list-item-selected-pressed-state-layer-opacity, ${d.state.pressedStateLayerOpacity} ); } :host(:state(-hide-selection)) .indicator, :host(:not(:state(-hide-selection))) ::slotted([slot="trailing"]) { display: none; } @media (forced-colors: active) { :host([selected]:not(:disabled)) .content, :host([selected]:not(:disabled)) ::slotted([slot="overline"]), :host([selected]:not(:disabled)) ::slotted([slot="supporting-text"]), :host([selected]:not(:disabled)) ::slotted([slot="leading"]), :host([selected]:not(:disabled)) ::slotted([slot="trailing"]) { color: HighlightText; forced-color-adjust: none; } :host([selected]:not(:disabled)) .base { background-color: Highlight; } }`],i([A(".focus-ring")],ye.prototype,"_focusRing",void 0),i([A(".state-layer")],ye.prototype,"_stateLayer",void 0),i([A(".ripple")],ye.prototype,"_ripple",void 0),i([T()],ye.prototype,"value",null),ye=i([c("m3e-list-option")],ye);let Se=class extends($(w(k(_(g(a(o(Z,"listbox")))))))){constructor(){super(...arguments),xe.add(this),$e.set(this,e=>this[C].onKeyDown(e)),we.set(this,t=>e(this,xe,"m",ke).call(this,t)),this[_e]=(new L).withWrap().withHomeAndEnd().withVerticalOrientation(),this.multi=!1,this.hideSelectionIndicator=!1}get options(){return this[C]?.items??[]}get selected(){return this[C]?.selectedItems??[]}get value(){const e=this.selected.filter(e=>!e.disabled).map(e=>e.value);switch(e.length){case 0:return null;case 1:return e[0];default:return e}}get[($e=new WeakMap,we=new WeakMap,xe=new WeakSet,_e=C,S)](){const e=this.value;if(Array.isArray(e)){const t=new FormData;for(const i of e)t.append(this.name,i);return t}return e}connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",e(this,$e,"f")),this.addEventListener("change",e(this,we,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",e(this,$e,"f")),this.removeEventListener("change",e(this,we,"f"))}update(e){super.update(e),e.has("disabled")&&(void 0!==e.get("disabled")||this.disabled)&&(this[C].disabled=this.disabled),e.has("multi")&&(this[C].multi=this.multi,this.multi?this.setAttribute("aria-multiselectable","true"):this.removeAttribute("aria-multiselectable"),this[C].items.forEach(e=>e.requestUpdate())),e.has("hideSelectionIndicator")&&this[C].items.forEach(e=>n(e,"-hide-selection",this.hideSelectionIndicator))}notifyItemsChange(){const{added:e}=this[C].setItems(this.items.filter(e=>e instanceof ye));e.forEach(e=>n(e,"-hide-selection",this.hideSelectionIndicator)),this[C].activeItem||this[C].updateActiveItem(e.find(e=>!e.disabled))}};ke=function(e){e.target!==this&&(e.stopImmediatePropagation(),e.stopPropagation(),this.dispatchEvent(new Event("change",{bubbles:!0})))},i([T({type:Boolean})],Se.prototype,"multi",void 0),i([T({attribute:"hide-selection-indicator",type:Boolean})],Se.prototype,"hideSelectionIndicator",void 0),Se=i([c("m3e-selection-list")],Se);export{re as M3eActionListElement,oe as M3eExpandableListItemElement,me as M3eListActionElement,Z as M3eListElement,he as M3eListItemButtonElement,V as M3eListItemElement,ye as M3eListOptionElement,Se as M3eSelectionListElement};

package/dist/loading-indicator.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 { __decorate } from 'tslib';

package/dist/loading-indicator.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{__decorate as i}from"tslib";import{unsafeCSS as o,LitElement as t,html as a,css as n}from"lit";import{query as e,property as r}from"lit/decorators.js";import{DesignToken as c,generateClipPaths as l,ReconnectedCallback as s,Role as C,customElement as d}from"@m3e/web/core";const p=o("var(--m3e-loading-indicator-size, 2.375rem)"),g=o(`var(--m3e-loading-indicator-active-indicator-color, ${c.color.primary})`),m=o(`var(--m3e-loading-indicator-contained-active-indicator-color, ${c.color.onPrimaryContainer})`),L=o(`var(--m3e-loading-indicator-contained-container-color, ${c.color.secondaryContainer})`),v=o(`var(--m3e-loading-indicator-container-shape, ${c.shape.corner.full})`),u=o("var(--m3e-loading-indicator-container-size, 3rem)"),y={"4-sided-cookie":"M230.389 50.473C293.109 23.2328 356.767 86.8908 329.527 149.611L325.023 159.981C316.707 179.13 316.707 200.87 325.023 220.019L329.527 230.389C356.767 293.109 293.109 356.767 230.389 329.527L220.019 325.023C200.87 316.707 179.13 316.707 159.981 325.023L149.611 329.527C86.8908 356.767 23.2328 293.109 50.473 230.389L54.9768 220.019C63.2934 200.87 63.2934 179.13 54.9768 159.981L50.473 149.611C23.2328 86.8908 86.8908 23.2328 149.611 50.473L159.981 54.9768C179.13 63.2934 200.87 63.2934 220.019 54.9768L230.389 50.473Z","7-sided-cookie":"M142.67 51.7842C146.243 48.6394 148.029 47.067 149.671 45.7954C173.425 27.4015 206.575 27.4015 230.329 45.7954C231.971 47.067 233.757 48.6394 237.33 51.7842C238.526 52.8372 239.124 53.3636 239.724 53.8672C248.136 60.9247 258.171 65.7683 268.92 67.9594C269.688 68.1158 270.471 68.2562 272.038 68.537C276.719 69.3756 279.059 69.7949 281.075 70.2889C310.234 77.4346 330.902 103.411 331.364 133.493C331.396 135.573 331.283 137.953 331.057 142.713C330.982 144.307 330.944 145.104 330.925 145.888C330.665 156.88 333.143 167.763 338.136 177.553C338.493 178.252 338.872 178.953 339.63 180.356C341.894 184.547 343.026 186.642 343.897 188.53C356.503 215.834 349.127 248.226 325.949 267.344C324.347 268.666 322.42 270.061 318.566 272.852C317.276 273.787 316.63 274.254 316.007 274.729C307.27 281.377 300.326 290.105 295.803 300.122C295.48 300.837 295.169 301.571 294.547 303.04C292.69 307.427 291.761 309.62 290.832 311.48C277.393 338.382 247.526 352.798 218.162 346.556C216.132 346.124 213.842 345.484 209.262 344.204C207.728 343.776 206.962 343.562 206.203 343.369C195.569 340.668 184.431 340.668 173.797 343.369C173.038 343.562 172.272 343.776 170.738 344.204C166.158 345.484 163.868 346.124 161.838 346.556C132.474 352.798 102.607 338.382 89.168 311.48C88.2388 309.62 87.3102 307.427 85.453 303.04C84.8311 301.571 84.5202 300.837 84.1975 300.122C79.6741 290.105 72.7297 281.377 63.993 274.729C63.3696 274.254 62.7244 273.787 61.434 272.852C57.5801 270.061 55.6532 268.666 54.0507 267.344C30.873 248.226 23.4965 215.834 36.1027 188.53C36.9742 186.642 38.1062 184.547 40.3703 180.356C41.1283 178.953 41.5074 178.252 41.8636 177.553C46.8568 167.763 49.3353 156.88 49.0745 145.888C49.0559 145.104 49.0182 144.307 48.9426 142.713C48.7168 137.953 48.6039 135.573 48.6359 133.493C49.0982 103.411 69.7665 77.4346 98.9252 70.2889C100.941 69.7949 103.281 69.3756 107.962 68.537C109.529 68.2562 110.312 68.1158 111.08 67.9594C121.829 65.7683 131.864 60.9247 140.276 53.8672C140.876 53.3636 141.474 52.8372 142.67 51.7842Z",oval:"M271.309 271.309C201.705 340.913 108.877 360.935 63.9707 316.029C19.0648 271.123 39.0867 178.295 108.691 108.691C178.295 39.0867 271.123 19.0648 316.029 63.9707C360.935 108.877 340.913 201.705 271.309 271.309Z",pentagon:"M155.064 49.459C176.093 34.1803 204.569 34.1803 225.598 49.459L322.926 120.171C343.955 135.45 352.754 162.532 344.722 187.253L307.546 301.668C299.514 326.39 276.476 343.127 250.483 343.127H130.18C104.186 343.127 81.1489 326.39 73.1164 301.668L35.9407 187.253C27.9082 162.532 36.7077 135.45 57.737 120.171L155.064 49.459Z",pill:"M116.116 71.7851C169.162 18.7383 255.168 18.7383 308.215 71.7851C361.262 124.832 361.262 210.838 308.215 263.884L263.884 308.215C210.838 361.262 124.832 361.262 71.7851 308.215C18.7383 255.168 18.7383 169.162 71.7851 116.116L116.116 71.7851Z","soft-burst":"M175.147 33.1508C181.983 22.2831 198.017 22.2831 204.853 33.1508L221.238 59.2009C225.731 66.3458 234.797 69.2506 242.692 66.0751L271.475 54.4972C283.482 49.6671 296.455 58.9613 295.507 71.7154L293.235 102.288C292.612 110.673 298.215 118.278 306.494 120.284L336.681 127.601C349.275 130.653 354.23 145.692 345.861 155.461L325.8 178.877C320.298 185.3 320.298 194.7 325.8 201.123L345.861 224.539C354.23 234.308 349.275 249.347 336.681 252.399L306.494 259.716C298.215 261.722 292.612 269.327 293.235 277.712L295.507 308.285C296.455 321.039 283.482 330.333 271.475 325.503L242.692 313.925C234.797 310.749 225.731 313.654 221.238 320.799L204.853 346.849C198.017 357.717 181.983 357.717 175.147 346.849L158.762 320.799C154.269 313.654 145.203 310.749 137.308 313.925L108.525 325.503C96.5177 330.333 83.5454 321.039 84.4931 308.285L86.7649 277.712C87.388 269.327 81.785 261.722 73.5056 259.716L43.3186 252.399C30.7252 249.347 25.7702 234.308 34.1391 224.539L54.1997 201.123C59.7018 194.7 59.7018 185.3 54.1997 178.877L34.1391 155.461C25.7702 145.692 30.7252 130.653 43.3186 127.601L73.5056 120.284C81.785 118.278 87.388 110.673 86.7649 102.288L84.4931 71.7154C83.5454 58.9613 96.5177 49.6671 108.525 54.4972L137.308 66.0751C145.203 69.2506 154.269 66.3458 158.762 59.201L175.147 33.1508Z","very-sunny":"M166.725 43.1869C177.261 25.6044 202.739 25.6044 213.275 43.1868L225.124 62.9597C231.268 73.2136 243.399 78.2385 254.995 75.3327L277.355 69.7294C297.237 64.7468 315.253 82.7627 310.271 102.645L304.667 125.005C301.762 136.601 306.786 148.732 317.04 154.876L336.813 166.725C354.396 177.261 354.396 202.739 336.813 213.275L317.04 225.124C306.786 231.268 301.762 243.399 304.667 254.995L310.271 277.355C315.253 297.237 297.237 315.253 277.355 310.271L254.995 304.667C243.399 301.762 231.268 306.786 225.124 317.04L213.275 336.813C202.739 354.396 177.261 354.396 166.725 336.813L154.876 317.04C148.732 306.786 136.601 301.762 125.005 304.667L102.646 310.271C82.7627 315.253 64.7468 297.237 69.7294 277.355L75.3327 254.995C78.2385 243.399 73.2136 231.268 62.9597 225.124L43.1869 213.275C25.6044 202.739 25.6044 177.261 43.1868 166.725L62.9597 154.876C73.2136 148.732 78.2385 136.601 75.3327 125.005L69.7294 102.646C64.7468 82.7627 82.7627 64.7468 102.645 69.7294L125.005 75.3327C136.601 78.2385 148.732 73.2136 154.876 62.9597L166.725 43.1869Z"};let f=new Array;const h=new Map;for(const i in y)f.push(y[i]),h.set(i,f.length-1);const b={};f=l(f,300);for(const i of h)b[i[0]]=o(f[i[1]]);const k=b;let $=class extends(s(C(t,"progressbar"))){constructor(){super(...arguments),this.variant="uncontained"}connectedCallback(){super.connectedCallback(),this.ariaValueMin=this.ariaValueMin||"0",this.ariaValueMax=this.ariaValueMax||"100"}disconnectedCallback(){super.disconnectedCallback(),this._activeIndicator?.classList.toggle("animate",!1)}reconnectedCallback(){super.reconnectedCallback(),this._activeIndicator?.classList.toggle("animate",!0)}firstUpdated(i){super.firstUpdated(i),this._activeIndicator?.classList.toggle("animate",!0)}render(){return a`<div class="container" aria-hidden="true"><div class="active-indicator"></div></div>`}};$.styles=n`:host { display: inline-block; aspect-ratio: 1 / 1; contain: strict; vertical-align: middle; content-visibility: auto; } :host([variant="uncontained"]) { width: ${p}; } :host([variant="contained"]) { width: ${u}; } :host([variant="uncontained"]) .active-indicator { background-color: ${g}; } :host([variant="contained"]) .active-indicator { background-color: ${m}; } :host([variant="contained"]) .container { background-color: ${L}; } .container { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; border-radius: ${v}; } .active-indicator { margin: auto; aspect-ratio: 1 / 1; width: calc(${p} * 0.842); transform-origin: center; transition: clip-path ${c.motion.spring.slowEffects}; will-change: transform, clip-path; --_polygon-soft-burst: polygon(${k["soft-burst"]}); --_polygon-7-sided-cookie: polygon(${k["7-sided-cookie"]}); --_polygon-pentagon: polygon(${k.pentagon}); --_polygon-pill: polygon(${k.pill}); --_polygon-very-sunny: polygon(${k["very-sunny"]}); --_polygon-4-sided-cookie: polygon(${k["4-sided-cookie"]}); --_polygon-oval: polygon(${k.oval}); } .active-indicator.animate { animation: rotate 4998ms infinite; } @keyframes rotate { 0% { clip-path: var(--_polygon-soft-burst); transform: rotate(0deg); animation-timing-function: cubic-bezier(0.5, 0.2, 0, 0.8); } 14% { clip-path: var(--_polygon-7-sided-cookie); transform: rotate(154deg); animation-timing-function: cubic-bezier(0.5, 0.2, 0, 0.8); } 29% { clip-path: var(--_polygon-pentagon); transform: rotate(309deg); animation-timing-function: cubic-bezier(0.5, 0.2, 0, 0.8); } 43% { clip-path: var(--_polygon-pill); transform: rotate(463deg); animation-timing-function: cubic-bezier(0.5, 0.2, 0, 0.8); } 57% { clip-path: var(--_polygon-very-sunny); transform: rotate(617deg); animation-timing-function: cubic-bezier(0.5, 0.2, 0, 0.8); } 71% { clip-path: var(--_polygon-4-sided-cookie); transform: rotate(771deg); animation-timing-function: cubic-bezier(0.5, 0.2, 0, 0.8); } 83% { clip-path: var(--_polygon-oval); transform: rotate(926deg); animation-timing-function: cubic-bezier(0.5, 0.2, 0, 0.8); } 100% { clip-path: var(--_polygon-soft-burst); transform: rotate(1080deg); } } @media (forced-colors: active) { .active-indicator { background-color: CanvasText !important; } }`,i([e(".active-indicator")],$.prototype,"_activeIndicator",void 0),i([r({reflect:!0})],$.prototype,"variant",void 0),$=i([d("m3e-loading-indicator")],$);export{$ as M3eLoadingIndicatorElement};

package/dist/menu.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 { __decorate, __classPrivateFieldGet, __classPrivateFieldSet } from 'tslib';

package/dist/menu.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{__decorate as e,__classPrivateFieldGet as t,__classPrivateFieldSet as i}from"tslib";import{LitElement as n,nothing as s,html as o,unsafeCSS as r,css as a}from"lit";import{query as l,state as c,property as h}from"lit/decorators.js";import{KeyboardClick as m,Focusable as d,AttachInternals as u,Disabled as p,FocusController as f,isLinkButtonMixin as v,renderPseudoLink as b,DesignToken as g,HtmlFor as k,ActionElementBase as y,customElement as w,LinkButton as $,Role as E,HoverController as x,setCustomState as M,hasAssignedNodes as L,SuppressInitialAnimation as C,ScrollController as _,deleteCustomState as W,addCustomState as T,registerStyleSheet as S,Checked as A,prefersReducedMotion as P}from"@m3e/web/core";import{addAriaReferencedId as D,removeAriaReferencedId as z,RovingTabIndexManager as I}from"@m3e/web/core/a11y";import{positionAnchor as O}from"@m3e/web/core/anchoring";import{M3eDirectionality as R}from"@m3e/web/core/bidi";class U extends(m(d(u(p(n),!0)))){constructor(){super(),new f(this,{callback:e=>{e&&this.menu?._activate()}})}get menu(){return this.closest("m3e-menu")}firstUpdated(e){super.firstUpdated(e),[this._focusRing,this._stateLayer,this._ripple].forEach(e=>e?.attach(this))}render(){return o`<div class="base"><m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer><m3e-focus-ring class="focus-ring" ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" ?disabled="${this.disabled}"></m3e-ripple><div class="touch" aria-hidden="true"></div>${v(this)?this[b]():s}<div class="wrapper">${this._renderContent()}</div></div>`}}U.styles=a`:host { display: inline-block; outline: none; user-select: none; flex: none; height: var(--m3e-menu-item-container-height, 2.75rem); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not(:disabled)) .base { color: var(--m3e-menu-item-color, ${g.color.onSurface}); } :host(:not([aria-expanded="true"])) .base { --m3e-state-layer-hover-color: var(--m3e-menu-item-container-hover-color, ${g.color.onSurface}); --m3e-state-layer-focus-color: var(--m3e-menu-item-container-focus-color, ${g.color.onSurface}); --m3e-ripple-color: var(--m3e-menu-item-ripple-color, ${g.color.onSurface}); } :host(:not(:disabled)[aria-expanded="true"]) .base { background-color: color-mix( in srgb, var(--m3e-menu-item-active-state-layer-color, ${g.color.onSurface}) var(--m3e-menu-active-state-layer-opacity, 8%), transparent ); } :host([aria-expanded="true"]) .state-layer { display: none; } :host(:not(:disabled)[checked]) .base { color: var(--m3e-menu-item-selected-color, ${g.color.onTertiaryContainer}); background-color: var(--m3e-menu-item-selected-container-color, ${g.color.tertiaryContainer}); } :host([checked]) .base { --m3e-state-layer-hover-color: var( --m3e-menu-item-selected-container-hover-color, ${g.color.onTertiaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-menu-item-selected-container-focus-color, ${g.color.onTertiaryContainer} ); --m3e-ripple-color: var(--m3e-menu-item-selected-ripple-color, ${g.color.onTertiaryContainer}); } :host(:not(:disabled)) { cursor: pointer; } :host(:disabled) .base { color: color-mix( in srgb, var(--m3e-menu-item-disabled-color, ${g.color.onSurface}) var(--m3e-menu-item-disabled-opacity, 38%), transparent ); } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; position: relative; width: 100%; height: 100%; border-radius: var(--m3e-menu-item-shape, ${g.shape.corner.extraSmall}); transition: ${r(`border-radius ${g.motion.spring.fastEffects}`)}; } :host([checked]:not(:state(-first))) .base { border-top-left-radius: var(--m3e-menu-item-selected-shape, ${g.shape.corner.medium}); border-top-right-radius: var(--m3e-menu-item-selected-shape, ${g.shape.corner.medium}); } :host([checked]:not(:state(-last))) .base { border-bottom-left-radius: var(--m3e-menu-item-selected-shape, ${g.shape.corner.medium}); border-bottom-right-radius: var(--m3e-menu-item-selected-shape, ${g.shape.corner.medium}); } :host(:state(-first)) .base { border-top-left-radius: var(--m3e-menu-item-first-child-shape, ${g.shape.corner.medium}); border-top-right-radius: var(--m3e-menu-item-first-child-shape, ${g.shape.corner.medium}); } :host(:state(-last)) .base { border-bottom-left-radius: var(--m3e-menu-item-last-child-shape, ${g.shape.corner.medium}); border-bottom-right-radius: var(--m3e-menu-item-last-child-shape, ${g.shape.corner.medium}); } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .wrapper { flex: 1 1 auto; display: inline-flex; align-items: center; column-gap: var(--m3e-menu-item-icon-label-space, 0.5rem); padding-inline-start: var(--m3e-menu-item-padding-start, 0.75rem); padding-inline-end: var(--m3e-menu-item-padding-end, 0.75rem); font-size: var(--m3e-menu-item-label-text-font-size, ${g.typescale.standard.label.large.fontSize}); font-weight: var( --m3e-menu-item-label-text-font-weight, ${g.typescale.standard.label.large.fontWeight} ); line-height: var( --m3e-menu-item-label-text-line-height, ${g.typescale.standard.label.large.lineHeight} ); letter-spacing: var(--m3e-menu-item-label-text-tracking, ${g.typescale.standard.label.large.tracking}); } .focus-ring { border-radius: var(--m3e-menu-item-focus-ring-shape, inherit); } .content { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } ::slotted([slot="icon"]), ::slotted([slot="trailing-icon"]), .trailing-icon { flex: none; width: 1em; font-size: var(--m3e-menu-item-icon-size, 1.25rem) !important; } @media (prefers-reduced-motion) { .base { transition: none; } } @media (forced-colors: active) { .base { background-color: Menu; color: MenuText; } :host(:disabled) .base { color: GrayText; } }`,e([l(".focus-ring")],U.prototype,"_focusRing",void 0),e([l(".state-layer")],U.prototype,"_stateLayer",void 0),e([l(".ripple")],U.prototype,"_ripple",void 0);let Y=class extends(k(y)){get menu(){return"M3E-MENU"===this.control?.tagName?this.control:null}attach(e){super.attach(e);const t=this.menu;t&&(this.parentElement&&(this.parentElement.ariaHasPopup="menu",this.parentElement.ariaExpanded="false",t.id&&D(this.parentElement,"aria-controls",t.id)),this.closest("m3e-menu")&&(t.submenu=!0))}detach(){if(this.parentElement){this.parentElement.ariaHasPopup=null,this.parentElement.ariaExpanded=null;const e=this.menu;e?.id&&z(this.parentElement,"aria-controls",e.id)}super.detach()}_onClick(){this.parentElement&&("M3E-MENU-ITEM"===this.parentElement.tagName?this.menu?.show(this.parentElement):this.menu?.toggle(this.parentElement))}};var B,H,K,N,Z,X,j,q,G,V,F,J;Y=e([w("m3e-menu-trigger")],Y);let Q=J=class extends($(E(U,"menuitem"))){constructor(){super(),B.add(this),H.set(this,e=>t(this,B,"m",G).call(this,e)),K.set(this,e=>t(this,B,"m",V).call(this,e)),N.set(this,()=>t(this,B,"m",F).call(this)),this._hasSubmenu=!1,Z.set(this,void 0),new x(this,{startDelay:500,endDelay:500,callback:e=>{e&&!this.disabled&&t(this,Z,"f")&&t(this,Z,"f").menu?.show(this)}})}get submenu(){return t(this,Z,"f")?.menu??null}connectedCallback(){super.connectedCallback(),this.addEventListener("click",t(this,H,"f")),this.addEventListener("keydown",t(this,K,"f")),this.addEventListener("mouseenter",t(this,N,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",t(this,H,"f")),this.removeEventListener("keydown",t(this,K,"f")),this.removeEventListener("mouseenter",t(this,N,"f"))}_renderContent(){return o`<slot name="icon" aria-hidden="true" @slotchange="${t(this,B,"m",j)}"></slot><span class="content"><slot @slotchange="${t(this,B,"m",X)}"></slot></span>${this._hasSubmenu?"ltr"===R.current?o`<svg class="trailing-icon" aria-hidden="true" viewBox="0 -960 960 960" fill="currentColor"><path d="M400-280v-400l200 200-200 200Z"/></svg>`:o`<svg class="trailing-icon" aria-hidden="true" viewBox="0 -960 960 960" fill="currentColor"><path d="M560-280 360-480l200-200v400Z"/></svg>`:o`<slot name="trailing-icon" aria-hidden="true" @slotchange="${t(this,B,"m",q)}"></slot>`}`}};var ee,te,ie,ne,se,oe,re,ae,le,ce,he,me,de,ue,pe,fe;H=new WeakMap,K=new WeakMap,N=new WeakMap,Z=new WeakMap,B=new WeakSet,X=function(e){i(this,Z,e.target.assignedElements({flatten:!0}).find(e=>e instanceof Y),"f"),this._hasSubmenu=void 0!==t(this,Z,"f")},j=function(e){M(this,"-with-icon",L(e.target))},q=function(e){M(this,"-with-trailing-icon",L(e.target))},G=function(e){e.defaultPrevented||this._hasSubmenu||this.menu?.hideAll(!0)},V=function(e){if(!e.defaultPrevented&&!this.disabled)switch(e.key){case"Right":case"ArrowRight":"ltr"===R.current&&(e.preventDefault(),this.submenu?.show(this));break;case"Left":case"ArrowLeft":"rtl"===R.current&&(e.preventDefault(),this.submenu?.show(this))}},F=function(){this.menu?.items.forEach(e=>{e instanceof J&&e!==this&&e.submenu?.isOpen&&e.submenu.hide()})},e([c()],Q.prototype,"_hasSubmenu",void 0),Q=J=e([w("m3e-menu-item")],Q);let ve=fe=class extends(C(u(E(n,"menu")))){constructor(){super(...arguments),ee.add(this),te.set(this,void 0),ie.set(this,void 0),ne.set(this,(new I).withWrap().withHomeAndEnd().withVerticalOrientation()),se.set(this,e=>t(this,ee,"m",he).call(this,e)),oe.set(this,()=>t(this,ee,"m",me).call(this)),re.set(this,e=>t(this,ee,"m",de).call(this,e)),ae.set(this,new _(this,{target:null,callback:e=>e instanceof fe?e.items.filter(e=>e instanceof Q).forEach(e=>e.submenu?.hide()):this.hideAll()})),le.set(this,e=>{"closed"===e.newState?(t(this,ie,"f")?.call(this),i(this,ie,void 0,"f")):setTimeout(()=>{t(this,ne,"f").setActiveItem(t(this,ne,"f").items.find(e=>!e.disabled))},40)}),this.positionX="after",this.positionY="below",this.variant="standard",this.submenu=!1}get items(){return t(this,ne,"f").items}get isOpen(){return void 0!==t(this,te,"f")}connectedCallback(){super.connectedCallback(),this.tabIndex=-1,this.setAttribute("popover","manual"),this.addEventListener("keydown",t(this,se,"f")),this.addEventListener("mouseenter",t(this,oe,"f")),this.addEventListener("toggle",t(this,le,"f")),document.addEventListener("click",t(this,re,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",t(this,se,"f")),this.removeEventListener("mouseenter",t(this,oe,"f")),this.removeEventListener("toggle",t(this,le,"f")),document.removeEventListener("click",t(this,re,"f")),t(this,ee,"m",pe).call(this)}async show(e){t(this,te,"f")&&t(this,te,"f")!==e&&this.hide();let n=this.positionX;"rtl"===R.current&&(n="before"===n?"after":"before"),i(this,ie,await O(this,e,{position:this.submenu?"before"===n?"left-start":"right-start":"above"===this.positionY?"before"===n?"top-end":"top-start":"before"===n?"bottom-end":"bottom-start",inline:!0,flip:!0,shift:"main",offset:this.submenu?void 0:4},(e,i,n)=>{if(this.submenu){if(t(this,te,"f")){const e=t(this,ee,"m",ue).call(this,t(this,te,"f")).y;M(this,"-shift-down",!1),M(this,"-shift-up",!1),M(this,Math.round(i)===Math.round(e)?"-shift-down":"-shift-up",!0)}}else M(this,"-top",n.includes("top")),M(this,"-bottom",n.includes("bottom"));"rtl"===R.current?this.style.right=window.innerWidth-e-this.clientWidth+"px":this.style.left=`${e}px`,this.style.top=`${i}px`}),"f");const s=e.closest("m3e-menu");s?this.variant=s.variant:this._activate(),this.showPopover(),i(this,te,e,"f"),t(this,te,"f").ariaExpanded="true",t(this,ae,"f").observe(t(this,te,"f"))}hide(e=!1){for(const e of t(this,ne,"f").items){const t=e.submenu;t&&t.isOpen&&t.hide()}t(this,ee,"m",pe).call(this),this.hidePopover(),t(this,te,"f")&&(t(this,te,"f").ariaExpanded="false",e&&t(this,te,"f").focus(),t(this,ae,"f").unobserve(t(this,te,"f")),i(this,te,void 0,"f"))}hideAll(e=!1){let i=this;for(;t(i,te,"f");){const e=t(i,te,"f").closest("m3e-menu");if(!e)break;i=e}i.hide(e)}async toggle(e){t(this,te,"f")?this.hide():await this.show(e)}render(){return o`<div class="base"><slot @slotchange="${t(this,ee,"m",ce)}"></slot></div>`}_activate(){this!==fe.__activeMenu&&(fe.__activeMenu&&W(fe.__activeMenu,"-active"),fe.__activeMenu=this,T(fe.__activeMenu,"-active"))}};var be,ge,ke,ye,we,$e,Ee,xe,Me,Le,Ce,_e;te=new WeakMap,ie=new WeakMap,ne=new WeakMap,se=new WeakMap,oe=new WeakMap,re=new WeakMap,ae=new WeakMap,le=new WeakMap,ee=new WeakSet,ce=function(){const{added:e}=t(this,ne,"f").setItems([...this.querySelectorAll("m3e-menu-item,m3e-menu-item-checkbox,m3e-menu-item-radio")].filter(e=>e.closest("m3e-menu")===this));t(this,ne,"f").activeItem||t(this,ne,"f").updateActiveItem(e.find(e=>!e.disabled)),t(this,ne,"f").items.forEach((e,i)=>{M(e,"-first",0===i&&!e.previousElementSibling),M(e,"-last",i===t(this,ne,"f").items.length-1)})},he=function(e){switch(e.key){case"Right":case"ArrowRight":"rtl"===R.current?(e.preventDefault(),this.hide(!0)):t(this,ne,"f").onKeyDown(e);break;case"Left":case"ArrowLeft":"ltr"===R.current?(e.preventDefault(),this.hide(!0)):t(this,ne,"f").onKeyDown(e);break;case"Tab":this.hideAll();break;case"Escape":e.shiftKey||e.ctrlKey||this.hide(!0);break;default:t(this,ne,"f").onKeyDown(e)}},me=function(){this._activate()},de=function(e){this.submenu||e.composedPath().some(e=>e instanceof fe||e===t(this,te,"f"))||this.hide()},ue=function(e){let t=0,i=0;for(let n=e;n;n=n.offsetParent instanceof HTMLElement?n.offsetParent:null)t+=n.offsetLeft-n.scrollLeft+n.clientLeft,i+=n.offsetTop-n.scrollTop+n.clientTop;return{x:t,y:i}},pe=function(){this===fe.__activeMenu&&(W(fe.__activeMenu,"-active"),fe.__activeMenu=void 0)},S(a`m3e-menu > m3e-divider { margin-block: var(--m3e-menu-divider-spacing, 0.5rem); }`),ve.styles=a`:host { position: absolute; padding: unset; margin: unset; border: unset; overflow-y: auto; overflow-x: visible; scrollbar-width: ${g.scrollbar.thinWidth}; scrollbar-color: ${g.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, ${g.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(:state(-active))) { border-radius: var(--m3e-menu-container-shape, ${g.shape.corner.small}); } :host(:not(:state(-active))) .base { --m3e-menu-item-first-child-shape: ${g.shape.corner.extraSmall}; --m3e-menu-item-last-child-shape: ${g.shape.corner.extraSmall}; } :host(:state(-active)) { border-radius: var(--m3e-menu-active-container-shape, ${g.shape.corner.large}); } :host(:not(:state(-no-animate))) { transition: ${r(`opacity ${g.motion.duration.short2} ${g.motion.easing.standard}, \n        transform ${g.motion.duration.short2} ${g.motion.easing.standard},\n        overlay ${g.motion.duration.short2} ${g.motion.easing.standard} allow-discrete,\n        display ${g.motion.duration.short2} ${g.motion.easing.standard} allow-discrete,\n        border-radius ${g.motion.spring.fastEffects}`)}; } :host(:not([submenu])) { transform: scaleY(0.8); } :host(:not([submenu]):popover-open) { transform: scaleY(1); } :host::backdrop { background-color: transparent; } :host(:popover-open) { display: block; opacity: 1; } :host(:state(-bottom)) { transform-origin: top; } :host(:state(-top)) { transform-origin: bottom; } :host(:state(-shift-down)) { margin-top: calc(0px - var(--m3e-menu-container-padding-block, 0.25rem)); } :host(:state(-shift-up)) { margin-top: var(--m3e-menu-container-padding-block, 0.25rem); } :host([variant="vibrant"]) { background-color: var(--m3e-vibrant-menu-container-color, ${g.color.tertiaryContainer}); --m3e-menu-item-color: var(--m3e-vibrant-menu-item-color, ${g.color.onTertiaryContainer}); --m3e-menu-item-container-hover-color: var( --m3e-vibrant-menu-item-container-hover-color, ${g.color.onTertiaryContainer} ); --m3e-menu-item-container-focus-color: var( --m3e-vibrant-menu-item-container-focus-color, ${g.color.onTertiaryContainer} ); --m3e-menu-item-ripple-color: var(--m3e-vibrant-menu-item-ripple-color, ${g.color.onTertiaryContainer}); --m3e-menu-item-active-state-layer-color: var( --m3e-vibrant-menu-item-active-state-layer-color, ${g.color.onTertiaryContainer} ); --m3e-menu-item-selected-color: var(--m3e-vibrant-menu-item-selected-color, ${g.color.onTertiary}); --m3e-menu-item-selected-container-color: var( --m3e-vibrant-menu-item-selected-container-color, ${g.color.tertiary} ); --m3e-menu-item-selected-container-hover-color: var( --m3e-vibrant-menu-item-selected-container-hover-color, ${g.color.onTertiary} ); --m3e-menu-item-container-selected-focus-color: var( --m3e-vibrant-menu-item-selected-container-focus-color, ${g.color.onTertiary} ); --m3e-menu-item-selected-ripple-color: var( --m3e-vibrant-menu-item-selected-ripple-color, ${g.color.onTertiary} ); --m3e-menu-item-disabled-color: var( --m3e-vibrant-menu-item-disabled-color, ${g.color.onTertiaryContainer} ); } :host([variant="standard"]) { background-color: var(--m3e-menu-container-color, ${g.color.surfaceContainer}); } @starting-style { :host(:popover-open) { opacity: 0; } :host(:not([submenu]):popover-open) { transform: scaleY(0.8); } } @media (prefers-reduced-motion) { :host(:not(:state(-no-animate))) { transition: none; } } @media (forced-colors: active) { :host { background-color: Menu; color: MenuText; outline: 1px solid MenuText; } }`,e([h({attribute:"position-x"})],ve.prototype,"positionX",void 0),e([h({attribute:"position-y"})],ve.prototype,"positionY",void 0),e([h({reflect:!0})],ve.prototype,"variant",void 0),e([h({type:Boolean,reflect:!0})],ve.prototype,"submenu",void 0),ve=fe=e([w("m3e-menu")],ve);let We=class extends(A(E(U,"menuitemcheckbox"))){constructor(){super(...arguments),be.add(this),ge.set(this,e=>t(this,be,"m",Me).call(this,e)),ke.set(this,e=>t(this,be,"m",Le).call(this,e)),ye.set(this,()=>t(this,be,"m",Ce).call(this)),we.set(this,()=>t(this,be,"m",_e).call(this)),$e.set(this,!1)}connectedCallback(){super.connectedCallback(),this.addEventListener("click",t(this,ge,"f")),this.addEventListener("keydown",t(this,ke,"f")),this.addEventListener("keyup",t(this,ye,"f")),this.addEventListener("mouseenter",t(this,we,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",t(this,ge,"f")),this.removeEventListener("keydown",t(this,ke,"f")),this.removeEventListener("keyup",t(this,ye,"f")),this.removeEventListener("mouseenter",t(this,we,"f"))}_renderContent(){return o`<div class="icon"><svg class="check" viewBox="0 -960 960 960" aria-hidden="true"><path fill="currentColor" d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/></svg><slot name="icon" @slotchange="${t(this,be,"m",Ee)}"></slot></div><slot></slot><slot name="trailing-icon" aria-hidden="true" @slotchange="${t(this,be,"m",xe)}"></slot>`}};ge=new WeakMap,ke=new WeakMap,ye=new WeakMap,we=new WeakMap,$e=new WeakMap,be=new WeakSet,Ee=function(e){M(this,"-with-icon",L(e.target))},xe=function(e){M(this,"-with-trailing-icon",L(e.target))},Me=function(e){e.defaultPrevented||(this.checked=!this.checked,this.performUpdate(),t(this,$e,"f")||(P()?this.menu?.hideAll(!0):setTimeout(()=>this.menu?.hideAll(!0),150)))},Le=function(e){i(this,$e," "===e.key,"f")},Ce=function(){i(this,$e,!1,"f")},_e=function(){this.menu?.items.forEach(e=>{e instanceof Q&&e.submenu?.isOpen&&e.submenu.hide()})},We.styles=[U.styles,a`.icon { display: flex; align-items: center; justify-content: center; transition: margin-inline-start ${g.motion.spring.fastEffects}; } :host(:not(:state(-with-icon))) .icon { margin-inline-start: calc(0px - var(--m3e-menu-item-icon-label-space, 0.75rem)); } .check { width: 1em; font-size: var(--m3e-menu-item-icon-size, 1.25rem) !important; } :host(:not([checked])) .check { display: none; } :host([checked]) .icon { margin-inline-start: 0; } :host([checked]) ::slotted([slot="icon"]) { display: none !important; } @media (prefers-reduced-motion) { .icon { transition: none; } }`],We=e([w("m3e-menu-item-checkbox")],We);let Te=class extends(E(n,"group")){render(){return o`<slot></slot>`}};var Se,Ae,Pe,De,ze,Ie,Oe,Re,Ue,Ye,Be,He;Te.styles=a`:host { display: contents; }`,Te=e([w("m3e-menu-item-group")],Te);let Ke=class extends(A(E(U,"menuitemradio"))){constructor(){super(...arguments),Se.add(this),Ae.set(this,e=>t(this,Se,"m",Ue).call(this,e)),Pe.set(this,e=>t(this,Se,"m",Ye).call(this,e)),De.set(this,()=>t(this,Se,"m",Be).call(this)),ze.set(this,()=>t(this,Se,"m",He).call(this)),Ie.set(this,!1)}connectedCallback(){super.connectedCallback(),this.addEventListener("click",t(this,Ae,"f")),this.addEventListener("keydown",t(this,Pe,"f")),this.addEventListener("keyup",t(this,De,"f")),this.addEventListener("mouseenter",t(this,ze,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",t(this,Ae,"f")),this.removeEventListener("keydown",t(this,Pe,"f")),this.removeEventListener("keyup",t(this,De,"f")),this.removeEventListener("mouseenter",t(this,ze,"f"))}update(e){super.update(e),e.has("checked")&&this.checked&&(this.closest("[role='group']")??this.closest("m3e-menu"))?.querySelectorAll("m3e-menu-item-radio").forEach(e=>{e!==this&&e.checked&&(e.checked=!1)})}_renderContent(){return o`<div class="icon"><svg class="check" viewBox="0 -960 960 960" aria-hidden="true"><path fill="currentColor" d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/></svg><slot name="icon" @slotchange="${t(this,Se,"m",Oe)}"></slot></div><slot></slot><slot name="trailing-icon" aria-hidden="true" @slotchange="${t(this,Se,"m",Re)}"></slot>`}};Ae=new WeakMap,Pe=new WeakMap,De=new WeakMap,ze=new WeakMap,Ie=new WeakMap,Se=new WeakSet,Oe=function(e){M(this,"-with-icon",L(e.target))},Re=function(e){M(this,"-with-trailing-icon",L(e.target))},Ue=function(e){e.defaultPrevented||(this.checked=!0,this.performUpdate(),t(this,Ie,"f")||(P()?this.menu?.hideAll(!0):setTimeout(()=>this.menu?.hideAll(!0),150)))},Ye=function(e){i(this,Ie," "===e.key,"f")},Be=function(){i(this,Ie,!1,"f")},He=function(){this.menu?.items.forEach(e=>{e instanceof Q&&e.submenu?.isOpen&&e.submenu.hide()})},Ke.styles=We.styles,Ke=e([w("m3e-menu-item-radio")],Ke);export{ve as M3eMenuElement,We as M3eMenuItemCheckboxElement,Q as M3eMenuItemElement,Te as M3eMenuItemGroupElement,Ke as M3eMenuItemRadioElement,Y as M3eMenuTriggerElement};

package/dist/nav-bar.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, __classPrivateFieldSet, __decorate } from 'tslib';

package/dist/nav-bar.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,__classPrivateFieldSet as t,__decorate as i}from"tslib";import{LitElement as a,html as o,css as r,nothing as n}from"lit";import{state as l,property as s,query as c}from"lit/decorators.js";import{ReconnectedCallback as d,AttachInternals as h,Role as m,setCustomState as v,DesignToken as b,customElement as p,LinkButton as u,Selected as f,KeyboardClick as g,Focusable as y,DisabledInteractive as w,Disabled as x,renderPseudoLink as $}from"@m3e/web/core";import{SelectionManager as k,selectionManager as _}from"@m3e/web/core/a11y";import{M3eBreakpointObserver as z,Breakpoint as S}from"@m3e/web/core/layout";var C,E,I,j,B,W;let M=class extends(d(h(m(a,"navigation")))){constructor(){super(...arguments),C.add(this),this[W]=(new k).disableRovingTabIndex(),E.set(this,void 0),this.mode="compact"}get items(){return this[_].items}get selected(){return this[_].selectedItems[0]??null}get currentMode(){return this._mode??("compact"!==this.mode?"expanded":"compact")}set currentMode(e){this._mode=e}disconnectedCallback(){super.disconnectedCallback(),this._mode=void 0,e(this,E,"f")?.call(this)}reconnectedCallback(){super.reconnectedCallback(),"auto"===this.mode&&e(this,C,"m",I).call(this)}willUpdate(t){super.willUpdate(t),t.has("mode")&&(e(this,E,"f")?.call(this),"auto"===this.mode?e(this,C,"m",I).call(this):(this._mode=void 0,this._updateItems())),t.has("_mode")&&this._updateItems()}render(){return o`<div class="base"><slot @change="${e(this,C,"m",B)}" @slotchange="${e(this,C,"m",j)}"></slot></div>`}_updateItems(){const e="compact"===this.currentMode?"vertical":"horizontal";this._updateOrientation(e),v(this,"-compact","vertical"===e)}_updateOrientation(e){this[_].items.forEach(t=>t.orientation=e)}};var T,L,R;E=new WeakMap,C=new WeakSet,W=_,I=function(){t(this,E,z.observe([S.XSmall,S.Small],e=>{this._mode=e.get(S.XSmall)||e.get(S.Small)?"compact":"expanded",this._updateItems()}),"f")},j=function(){this[_].setItems([...this.querySelectorAll("m3e-nav-item")]),this._updateItems()},B=function(e){e.stopPropagation(),this.dispatchEvent(new Event("change",{bubbles:!0}))},M.styles=r`:host { display: block; overflow-x: auto; overflow-y: hidden; scrollbar-width: ${b.scrollbar.thinWidth}; scrollbar-color: ${b.scrollbar.color}; min-height: var(--m3e-nav-bar-height, 4rem); } .base { display: flex; align-items: stretch; justify-content: center; box-sizing: border-box; min-height: inherit; height: inherit; width: 100%; background-color: var(--m3e-nav-bar-container-color, ${b.color.surfaceContainer}); --_nav-item-min-width: var(--m3e-nav-bar-vertical-item-width, 7rem); }`,i([l()],M.prototype,"_mode",void 0),i([s({reflect:!0})],M.prototype,"mode",void 0),M=i([p("m3e-nav-bar")],M);let U=class extends(u(f(g(y(w(x(h(m(a,"button"),!0)))))))){constructor(){super(...arguments),T.add(this),L.set(this,t=>e(this,T,"m",R).call(this,t)),this.orientation="vertical"}get navBar(){return this.closest("m3e-nav-bar")??this.closest("m3e-nav-rail")??null}connectedCallback(){super.connectedCallback(),this.addEventListener("click",e(this,L,"f"),{capture:!0})}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",e(this,L,"f"),{capture:!0})}update(e){if(super.update(e),e.has("selected")){this.ariaSelected=null,this.ariaPressed=null,this.ariaCurrent=`${this.selected}`;for(const e of this.querySelectorAll("m3e-icon"))e.toggleAttribute("filled",this.selected);this.navBar?.[_].notifySelectionChange(this)}}updated(e){super.updated(e),e.has("orientation")&&this._focusRing?.attach(this)}firstUpdated(e){super.firstUpdated(e),[this._focusRing,this._stateLayer,this._ripple].forEach(e=>e?.attach(this))}render(){const e=this.disabled||this.disabledInteractive;return o`${"vertical"===this.orientation?o`<m3e-focus-ring class="focus-ring" inward></m3e-focus-ring>`:n}<div class="outer">${this[$]()}<div class="inner">${"horizontal"===this.orientation?o`<m3e-focus-ring class="focus-ring"></m3e-focus-ring>`:n}<m3e-state-layer class="state-layer" ?disabled="${e}"></m3e-state-layer><m3e-ripple class="ripple" centered ?disabled="${e}"></m3e-ripple><div class="touch" aria-hidden="true"></div><div class="base"><div class="icon-wrapper" aria-hidden="true"><div class="icon"><slot name="icon" aria-hidden="true"></slot></div></div><div class="label"><slot></slot></div></div></div></div>`}};L=new WeakMap,T=new WeakSet,R=function(e){e.defaultPrevented||(this.selected=!0,this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0,cancelable:!0}))?(this.navBar?.[_].notifySelectionChange(this),this.dispatchEvent(new Event("change",{bubbles:!0}))):this.selected=!1)},U.styles=r`:host { display: inline-block; vertical-align: middle; position: relative; outline: none; user-select: none; flex: 1; font-size: var(--m3e-nav-item-label-text-font-size, ${b.typescale.standard.label.medium.fontSize}); font-weight: var( --m3e-nav-item-label-text-font-weight, ${b.typescale.standard.label.medium.fontWeight} ); line-height: var( --m3e-nav-item-label-text-line-height, ${b.typescale.standard.label.medium.lineHeight} ); letter-spacing: var(--m3e-nav-item-label-text-tracking, ${b.typescale.standard.label.medium.tracking}); border-radius: var(--m3e-nav-item-shape, ${b.shape.corner.full}); min-width: var(--_nav-item-min-width); align-self: var(--_nav-item-align-self); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host([orientation="horizontal"]) { max-width: fit-content; } :host(:not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host([disabled-interactive]) { cursor: not-allowed; } .outer { height: 100%; } .outer, .inner { display: flex; align-items: center; justify-content: var(--_nav-item-justify-content, center); position: relative; border-radius: inherit; } .icon-wrapper { position: relative; flex: none; } .base { justify-content: unset; box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; position: relative; width: 100%; } .icon { position: absolute; } .label { vertical-align: middle; } ::slotted([slot="icon"]), ::slotted([slot="selected-icon"]) { width: 1em; font-size: var(--m3e-nav-item-icon-size, 1.5rem) !important; } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .outer { --m3e-state-layer-hover-color: var( --m3e-nav-item-inactive-hover-state-layer-color, ${b.color.onSecondaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-nav-item-inactive-focus-state-layer-color, ${b.color.onSecondaryContainer} ); --m3e-ripple-color: var( --m3e-nav-item-inactive-pressed-state-layer-color, ${b.color.onSecondaryContainer} ); } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .label { color: var(--m3e-nav-item-inactive-label-text-color, ${b.color.onSurfaceVariant}); } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .icon { color: var(--m3e-nav-item-inactive-icon-color, ${b.color.onSecondaryContainer}); } :host([selected]:not(:disabled):not([disabled-interactive])) .outer { --m3e-state-layer-hover-color: var( --m3e-nav-item-active-hover-state-layer-color, ${b.color.onSecondaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-nav-item-active-focus-state-layer-color, ${b.color.onSecondaryContainer} ); --m3e-ripple-color: var( --m3e-nav-item-active-pressed-state-layer-color, ${b.color.onSecondaryContainer} ); } :host([selected]:not(:disabled):not([disabled-interactive])) .label { color: var(--m3e-nav-item-active-label-text-color, ${b.color.secondary}); } :host([selected]:not(:disabled):not([disabled-interactive])) .state-layer { background-color: var(--m3e-nav-item-active-container-color, ${b.color.secondaryContainer}); } :host([selected]:not(:disabled):not([disabled-interactive])) .icon { color: var(--m3e-nav-item-active-icon-color, ${b.color.onSecondaryContainer}); } :host([orientation="vertical"]) .outer { align-self: stretch; align-items: flex-start; } :host([orientation="vertical"]) .label { text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-clamp: 2; } :host([orientation="vertical"]) .base { flex-direction: column; row-gap: var(--m3e-nav-item-spacing, 0.25rem); } :host([orientation="vertical"]) .base { margin-block: var(--m3e-vertical-nav-item-active-indicator-margin, 0.375rem); } :host([orientation="vertical"]) .state-layer, :host([orientation="vertical"]) .ripple { top: var(--m3e-vertical-nav-item-active-indicator-margin, 0.375rem); bottom: unset; } :host([orientation="vertical"]) .state-layer, :host([orientation="vertical"]) .ripple, :host([orientation="vertical"]) .icon-wrapper { width: var(--m3e-vertical-nav-item-active-indicator-width, 3.5rem); } :host([orientation="vertical"]) .state-layer, :host([orientation="vertical"]) .ripple, :host([orientation="vertical"]) .icon-wrapper { height: var(--m3e-vertical-nav-item-active-indicator-height, 2rem); } :host([orientation="vertical"]) .icon { top: calc( calc(var(--m3e-vertical-nav-item-active-indicator-height, 2rem) / 2) - calc( var(--m3e-nav-item-icon-size, 1.5rem) / 2 ) ); left: calc( calc(var(--m3e-vertical-nav-item-active-indicator-width, 3.5rem) / 2) - calc( var(--m3e-nav-item-icon-size, 1.5rem) / 2 ) ); } :host([orientation="vertical"]) .focus-ring { border-radius: var(--m3e-nav-item-focus-ring-shape, ${b.shape.corner.medium}); } :host([orientation="horizontal"]) .icon-wrapper { width: var(--m3e-nav-item-icon-size, 1.5rem); height: var(--m3e-nav-item-icon-size, 1.5rem); } :host([orientation="horizontal"]) .base { padding: var(--m3e-horizontal-nav-item-padding, 1rem); } :host([orientation="horizontal"]) .label { flex: 1 1 auto; } :host([orientation="horizontal"]) .base { column-gap: var(--m3e-nav-item-spacing, 0.25rem); } :host([orientation="horizontal"]) .inner { height: var(--m3e-horizontal-nav-item-active-indicator-height, 2.5rem); width: fit-content; } .state-layer, .ripple { margin-inline: auto; } :host(:disabled) .label, :host([disabled-interactive]) .label { color: color-mix( in srgb, var(--m3e-nav-item-disabled-label-text-color, ${b.color.onSurface}) var(--m3e-nav-item-disabled-label-text-opacity, 38%), transparent ); } :host(:disabled) .icon, :host([disabled-interactive]) .icon { color: color-mix( in srgb, var(--m3e-nav-item-disabled-icon-color, ${b.color.onSurface}) var(--m3e-nav-item-disabled-icon-opacity, 38%), transparent ); } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } @media (forced-colors: active) { :host(:disabled) .label, :host([disabled-interactive]) .label, :host(:disabled) .icon, :host([disabled-interactive]) .icon { color: GrayText; } :host(:not([selected]):not(:disabled):not([disabled-interactive])) .label, :host(:not([selected]):not(:disabled):not([disabled-interactive])) .icon { color: ButtonText; } :host([selected]:not(:disabled):not([disabled-interactive])) .state-layer { background-color: ButtonText; } :host([orientation="vertical"][selected]:not(:disabled):not([disabled-interactive])) .label { color: ButtonText; } :host([orientation="horizontal"][selected]:not(:disabled):not([disabled-interactive])) .label, :host([selected]:not(:disabled):not([disabled-interactive])) .icon { forced-color-adjust: none; color: ButtonFace; } }`,i([c(".focus-ring")],U.prototype,"_focusRing",void 0),i([c(".state-layer")],U.prototype,"_stateLayer",void 0),i([c(".ripple")],U.prototype,"_ripple",void 0),i([s({reflect:!0})],U.prototype,"orientation",void 0),U=i([p("m3e-nav-item")],U);export{M as M3eNavBarElement,U as M3eNavItemElement};

package/dist/nav-menu.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, __classPrivateFieldSet, __decorate } from 'tslib';

package/dist/nav-menu.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,__classPrivateFieldSet as t,__decorate as i}from"tslib";import{LitElement as s,html as a,css as n,unsafeCSS as o}from"lit";import{Selected as l,Disabled as r,EventAttribute as c,AttachInternals as h,Role as d,setCustomState as m,hasAssignedNodes as u,hasCustomState as p,registerStyleSheet as v,DesignToken as f,customElement as g,scrollIntoViewIfNeeded as b,PressedController as y,FocusController as k,deleteCustomState as w}from"@m3e/web/core";import{selectionManager as $,SelectionManager as I}from"@m3e/web/core/a11y";import{M3eDirectionality as C}from"@m3e/web/core/bidi";import{query as x,state as E,property as A}from"lit/decorators.js";import{ifDefined as S}from"lit/directives/if-defined.js";var _,W,L,M,z,q,R,T,D,P,B,F;let H=F=class extends(l(r(c(h(d(s,"treeitem"),!0),"opening","opened","closing","closed")))){constructor(){super(...arguments),_.add(this),this._hasChildItems=!1,W.set(this,[]),L.set(this,null),M.set(this,new Array),z.set(this,null),this.open=!1}get link(){return e(this,z,"f")}get label(){return this._base??null}get visible(){return!e(this,M,"f").some(e=>!e.open)}get path(){return[...e(this,M,"f"),this]}get hasChildItems(){return this._hasChildItems}get parentItem(){return e(this,M,"f")[e(this,M,"f").length-1]??null}get childItems(){return e(this,W,"f")}get level(){return e(this,M,"f").length+1}expand(e=!1){this.hasChildItems&&(this.open=!0,e&&this.childItems.forEach(e=>e.expand(!0)))}collapse(e=!1){this.hasChildItems&&(this.open=!1,e&&this.childItems.forEach(e=>e.collapse(!0)))}toggle(){this.hasChildItems&&(this.open=!this.open)}connectedCallback(){super.connectedCallback(),e(this,M,"f").length=0;for(let t=this.parentElement?.closest("m3e-nav-menu-item");t;t=t.parentElement?.closest("m3e-nav-menu-item"))e(this,M,"f").push(t);e(this,M,"f").reverse(),this.style.setProperty("--_nav-menu-item-level",`${this.level}`),t(this,L,this.closest("m3e-nav-menu"),"f")}disconnectedCallback(){super.disconnectedCallback(),e(this,M,"f").length=0}update(t){if(super.update(t),t.has("selected")){this.ariaSelected=null,this.ariaCurrent=this.hasChildItems?null:`${this.selected}`;for(const e of this.querySelectorAll(":scope > m3e-icon[slot]"))e.toggleAttribute("filled",this.selected);e(this,M,"f").forEach(e=>e.selected=this.selected),this.selected&&!this.hasChildItems&&this.closest("m3e-nav-menu")?.[$].notifySelectionChange(this)}(t.has("open")||t.has("_hasChildItems"))&&(this.ariaExpanded=this._hasChildItems?`${this.open}`:null),(t.has("_hasChildItems")&&this.disabled||t.has("disabled"))&&e(this,W,"f").forEach(e=>e.disabled=this.disabled)}firstUpdated(e){super.firstUpdated(e);const t=this._base;t&&[this.focusRing,this.stateLayer,this.ripple].forEach(e=>e?.attach(t))}render(){return a`<div class="base" @click="${e(this,_,"m",P)}"><m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer><m3e-focus-ring class="focus-ring" inward ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" ?disabled="${this.disabled}"></m3e-ripple><div class="icon" aria-hidden="true">${e(this,_,"m",q).call(this)}</div><div class="label"><slot name="label" @slotchange="${e(this,_,"m",T)}"></slot></div><slot name="badge"></slot><div aria-hidden="true" class="toggle"><slot name="toggle-icon"><svg class="toggle-icon" viewBox="0 -960 960 960" fill="currentColor"><path d="M480-360 280-560h400L480-360Z"/></svg></slot></div></div><m3e-collapsible class="group" role="group" aria-hidden="${S(this._hasChildItems?void 0:"true")}" ?open="${this._hasChildItems&&this.open}" @opening="${e(this,_,"m",B)}" @opened="${e(this,_,"m",B)}" @closing="${e(this,_,"m",B)}" @closed="${e(this,_,"m",B)}"><slot @slotchange="${e(this,_,"m",D)}"></slot></m3e-collapsible>`}};var j,V,U,G,K,N,O,Z,J,Q,X,Y,ee,te,ie;W=new WeakMap,L=new WeakMap,M=new WeakMap,z=new WeakMap,_=new WeakSet,q=function(){const t=a`<slot name="icon" @slotchange="${e(this,_,"m",R)}"></slot>`;return this.selected&&!this.hasChildItems?a`<slot name="selected-icon" @slotchange="${e(this,_,"m",R)}">${t}</slot>`:t},R=function(e){m(this,"-with-icon",u(e.target))},T=function(i){t(this,z,i.target.assignedElements({flatten:!0}).find(e=>e instanceof HTMLAnchorElement)??null,"f"),e(this,z,"f")?.setAttribute("tabindex","-1")},D=function(i){t(this,W,i.target.assignedElements({flatten:!0}).filter(e=>e instanceof F),"f");const s=this._hasChildItems;this._hasChildItems=e(this,W,"f").length>0,m(this,"-with-items",this._hasChildItems),(s||this._hasChildItems)&&(this.selected=e(this,W,"f").some(e=>e.selected))},P=function(){if(!this.disabled)if(e(this,L,"f")?.[$].setActiveItem(this),this._hasChildItems)this.toggle();else{e(this,L,"f")?.[$].select(this),e(this,M,"f").forEach(e=>e.selected=this.selected),e(this,z,"f")?.click();const t=this.closest("m3e-drawer-container");if(t){const e=this.closest("[slot='start']")??this.closest("[slot='end']");e&&(p(t,`-${e.slot}-push`)||p(t,`-${e.slot}-over`))&&setTimeout(()=>{t.removeAttribute(e.slot),t.dispatchEvent(new Event("change",{bubbles:!0}))},300)}}},B=function(e){e.stopPropagation(),this.dispatchEvent(new Event(e.type,{bubbles:!0}))},v(n`m3e-nav-menu-item > m3e-divider { margin-block: var(--m3e-nav-menu-divider-margin, 0.25rem); flex: none; } m3e-nav-menu-item > m3e-nav-menu-item:first-of-type { margin-block-start: var(--m3e-nav-menu-item-vertical-inset, 0.25rem); } m3e-nav-menu-item > m3e-nav-menu-item:last-of-type { margin-block-end: var(--m3e-nav-menu-item-vertical-inset, 0.25rem); }`),H.styles=n`:host { display: block; flex: none; outline: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { display: flex; align-items: center; position: relative; padding-inline: var(--m3e-nav-menu-item-padding, 1.5rem); height: calc(var(--m3e-nav-menu-item-height, 3.5rem) + ${f.density.calc(-3)}); column-gap: var(--m3e-nav-menu-item-spacing, 0.75rem); font-size: var(--m3e-nav-menu-item-font-size, ${f.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-nav-menu-item-font-weight, ${f.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-nav-menu-item-line-height, ${f.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-nav-menu-item-tracking, ${f.typescale.standard.label.large.tracking}); transition: ${o(`color ${f.motion.duration.short4} ${f.motion.easing.standard},\n        background-color ${f.motion.duration.short4} ${f.motion.easing.standard}`)}; } .base, .focus-ring { border-radius: var(--m3e-nav-menu-item-shape, ${f.shape.corner.full}); } .label { flex: 1 1 auto; display: flex; align-items: center; position: relative; overflow: hidden; vertical-align: middle; } .icon, .toggle { flex: none; display: flex; align-items: center; justify-content: center; position: relative; vertical-align: middle; } ::slotted([slot="badge"]) { flex: none; position: relative; font-size: var(--m3e-nav-menu-item-badge-font-size, ${f.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-nav-menu-item-badge-font-weight, ${f.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-nav-menu-item-badge-line-height, ${f.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-nav-menu-item-badge-tracking, ${f.typescale.standard.label.large.tracking}); } .toggle { transition: ${o(`transform var(--m3e-collapsible-animation-duration, ${f.motion.duration.medium1})\n        ${f.motion.easing.standard}`)}; } :host(:not(:state(-with-icon))) .icon { display: none; } .icon { margin-inline-start: -0.5rem; } .toggle { margin-inline-end: -0.5rem; } .group { padding-inline-start: var(--m3e-nav-menu-item-inset, 1rem); } :host([open]) .toggle { transform: rotate(180deg); } :host(:not(:state(-with-items))) .toggle, :host(:not(:state(-with-items))) .group { display: none; } ::slotted([slot="selected-icon"]), ::slotted([slot="icon"]), ::slotted([slot="toggle-icon"]), .toggle-icon { vertical-align: middle; width: 1em; height: 1em; font-size: var(--m3e-nav-menu-item-icon-size, 1.5rem); } :host(:not(:disabled)) .base { cursor: pointer; } :host(:not(:disabled)) .base { color: var(--m3e-nav-menu-item-label-color, ${f.color.onSurfaceVariant}); } :host(:disabled) .base { color: color-mix( in srgb, var(--m3e-nav-menu-item-disabled-color, ${f.color.onSurface}) var(--m3e-nav-menu-item-disabled-color-opacity, 38%), transparent ); } :host([selected]:not(:state(-with-items)):not(:disabled)) .base { color: var(--m3e-nav-menu-item-selected-label-color, ${f.color.onSecondaryContainer}); background-color: var(--m3e-nav-menu-item-selected-container-color, ${f.color.secondaryContainer}); --m3e-state-layer-focus-color: var( --m3e-nav-menu-item-selected-container-focus-color, ${f.color.onSecondaryContainer} ); --m3e-state-layer-hover-color: var( --m3e-nav-menu-item-selected-container-hover-color, ${f.color.onSecondaryContainer} ); --m3e-ripple-color: var(--m3e-nav-menu-item-selected-ripple-color, ${f.color.onSecondaryContainer}); } :host(:not([selected]):not(:state(-with-items)):not(:disabled)) .base { --m3e-state-layer-focus-color: var( --m3e-nav-menu-item-unselected-container-focus-color, ${f.color.onSurface} ); --m3e-state-layer-hover-color: var( --m3e-nav-menu-item-unselected-container-hover-color, ${f.color.onSurface} ); --m3e-ripple-color: var(--m3e-nav-menu-item-unselected-ripple-color, ${f.color.onSurface}); } .state-layer { margin-inline: auto; } :host([selected]:state(-with-items):not(:disabled)) .base { background-color: var(--m3e-nav-menu-item-open-container-color, ${f.color.surfaceContainerHighest}); --m3e-state-layer-focus-color: var( --m3e-nav-menu-item-open-container-focus-color, ${f.color.onSurface} ); --m3e-state-layer-hover-color: var( --m3e-nav-menu-item-open-container-hover-color, ${f.color.onSurface} ); --m3e-ripple-color: var(--m3e-nav-menu-item-open-ripple-color, ${f.color.onSurface}); } ::slotted(a[slot="label"]) { all: unset; } @media (prefers-reduced-motion) { .base, .toggle, .state-layer { transition: none !important; } } @media (forced-colors: active) { .base, .state-layer { transition: none !important; } :host(:disabled) .base { color: GrayText; } :host(:not([selected]):not(:disabled)) .base { color: ButtonText; } :host([selected]:not(:state(-with-items)):not(:disabled)) .base { forced-color-adjust: none; color: ButtonFace; background-color: ButtonText; } :host([selected]:state(-with-items):not(:disabled)) .base { background-color: unset; color: ButtonText; } }`,i([x(".state-layer")],H.prototype,"stateLayer",void 0),i([x(".focus-ring")],H.prototype,"focusRing",void 0),i([x(".ripple")],H.prototype,"ripple",void 0),i([x(".base")],H.prototype,"_base",void 0),i([E()],H.prototype,"_hasChildItems",void 0),i([A({type:Boolean,reflect:!0})],H.prototype,"open",void 0),H=F=i([g("m3e-nav-menu-item")],H);let se=ie=class extends(d(s,"tree")){constructor(){super(),j.add(this),V.set(this,!1),U.set(this,!1),this[te]=(new I).withVerticalOrientation().withHomeAndEnd().withTypeahead().withSkipPredicate(e=>e.disabled||!e.visible).disableRovingTabIndex().onActiveItemChange(()=>{this[$].activeItem&&e(this,j,"m",X).call(this,this[$].activeItem)}).onSelectedItemsChange(()=>{const t=this.selected;for(const i of this.items)i!==t&&e(this,j,"m",ee).call(this,i,!1,!1);t?.label&&b(t.label,this,{block:"start",behavior:"smooth"})}),G.set(this,t=>e(this,j,"m",Z).call(this,t)),K.set(this,t=>e(this,j,"m",J).call(this,t)),N.set(this,t=>e(this,j,"m",Q).call(this,t)),new y(this,{callback:e=>t(this,U,e,"f")}),new k(this,{callback:()=>{e(this,U,"f")||e(this,j,"m",Y).call(this)}})}get selected(){return this[$].selectedItems[0]??null}get items(){return this[$].items}expand(e){(e??this[$].items).forEach(e=>e.expand())}collapse(e){(e??this[$].items).forEach(e=>e.collapse());const t=this[$].activeItem;if(t&&!t.visible)for(let e=t.parentItem;e;e=e.parentItem)if(e.visible){this[$].setActiveItem(e);break}}connectedCallback(){super.connectedCallback(),this.setAttribute("tabindex","0"),this.addEventListener("keydown",e(this,G,"f")),this.addEventListener("keyup",e(this,K,"f")),this.addEventListener("pointerdown",e(this,N,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",e(this,G,"f")),this.removeEventListener("keyup",e(this,K,"f")),this.removeEventListener("pointerdown",e(this,N,"f"))}render(){return a`<div class="base"><slot @slotchange="${e(this,j,"m",O)}"></slot></div>`}};var ae,ne,oe,le,re;V=new WeakMap,U=new WeakMap,G=new WeakMap,K=new WeakMap,N=new WeakMap,j=new WeakSet,te=$,O=function(){for(const e of this.querySelectorAll("m3e-divider"))e.ariaHidden="true";const{added:t}=this[$].setItems([...this.querySelectorAll("m3e-nav-menu-item")]);for(const e of t)e.id=e.id||"m3e-nav-menu-item-"+ie.__nextId++;this[$].activeItem?(this.setAttribute("aria-activedescendant",this[$].activeItem.id),e(this,j,"m",Y).call(this)):this.removeAttribute("aria-activedescendant")},Z=function(i){t(this,V,!1,"f"),e(this,j,"m",Y).call(this);const s=this[$].activeItem;if(!i.defaultPrevented&&s&&!s.disabled)switch(i.key){case"Enter":case" ":i.preventDefault()," "===i.key&&s.ripple&&!s.ripple.visible&&s.ripple.show(0,0,!0),s.hasChildItems?requestAnimationFrame(()=>s.toggle()):s.selected||(this[$].select(s),s.link?.click());break;case"*":i.preventDefault(),s.expand(!0);break;case"Left":case"ArrowLeft":if(i.preventDefault(),"ltr"===C.current)if(s.hasChildItems&&s.open)requestAnimationFrame(()=>s.collapse());else{const e=s.parentItem;e&&requestAnimationFrame(()=>{e.collapse(),this[$].setActiveItem(e)})}else s.hasChildItems&&!s.open&&s.expand();break;case"Right":case"ArrowRight":if(i.preventDefault(),"rtl"===C.current)if(s.hasChildItems&&s.open)requestAnimationFrame(()=>s.collapse());else{const e=s.parentItem;e&&requestAnimationFrame(()=>{e.collapse(),this[$].setActiveItem(e)})}else s.hasChildItems&&!s.open&&s.expand();break;default:this[$].onKeyDown(i)}},J=function(e){const t=this[$].activeItem;e.defaultPrevented||!t||t.disabled||" "!==e.key||t.ripple?.hide()},Q=function(i){if(!i.defaultPrevented&&!e(this,V,"f")){t(this,V,!0,"f");const s=i.composedPath().reverse().find(e=>e instanceof H);s&&!s.disabled&&e(this,j,"m",ee).call(this,s,!0,!1)}},X=function(t){this.setAttribute("aria-activedescendant",t.id),t.label&&b(t.label,this,{block:"nearest",behavior:"smooth"}),e(this,j,"m",Y).call(this)},Y=function(){const t=this.matches(":focus")||this.matches(":focus-within"),i=!e(this,V,"f")&&this.matches(":focus-visible");this[$].items.forEach(s=>{const a=s===this[$].activeItem;e(this,j,"m",ee).call(this,s,a&&t,a&&i)})},ee=function(e,t,i){t&&i?e.stateLayer?.show("focused"):e.stateLayer?.hide("focused"),i?e.focusRing?.show():e.focusRing?.hide()},v(n`m3e-nav-menu > m3e-divider { margin-block: var(--m3e-nav-menu-divider-margin, 0.25rem); flex: none; }`),se.styles=n`:host { display: block; outline: none; overflow-y: auto; overflow-x: hidden; min-height: 0; scrollbar-width: ${f.scrollbar.width}; scrollbar-color: ${f.scrollbar.color}; } .base { width: 100%; display: flex; flex-direction: column; position: relative; min-height: inherit; box-sizing: border-box; padding-block-start: var(--m3e-nav-menu-padding-top, 0.5rem); padding-block-end: var(--m3e-nav-menu-padding-bottom, 0.5rem); padding-inline-start: var(--m3e-nav-menu-padding-left, 0.75rem); padding-inline-end: var(--m3e-nav-menu-padding-right, 0.75rem); }`,se.__nextId=0,se=ie=i([g("m3e-nav-menu")],se);let ce=re=class extends(h(d(s,"group"))){constructor(){super(...arguments),ae.add(this),ne.set(this,"m3e-nav-menu-item-group-label-"+re.__nextId++),oe.set(this,void 0)}connectedCallback(){super.connectedCallback(),m(this,"-divided","M3E-DIVIDER"===this.previousElementSibling?.tagName)}disconnectedCallback(){super.disconnectedCallback(),w(this,"-divided")}render(){return a`<div class="label"><slot name="label" @slotchange="${e(this,ae,"m",le)}"></slot></div><slot></slot>`}};ne=new WeakMap,oe=new WeakMap,ae=new WeakSet,le=function(i){const s=i.target.assignedElements({flatten:!0})[0];s!==e(this,oe,"f")&&(e(this,oe,"f")?.id===e(this,ne,"f")&&(e(this,oe,"f").id=""),t(this,oe,s,"f"),e(this,oe,"f")?(e(this,oe,"f").id=e(this,oe,"f").id||e(this,ne,"f"),this.setAttribute("aria-labelledby",e(this,oe,"f").id)):this.removeAttribute("aria-labelledby")),m(this,"-with-label",void 0!==e(this,oe,"f"))},ce.styles=n`:host { display: contents; } :host(:not(:state(-with-label))) .label { display: none; } .label { margin-inline-start: var(--m3e-nav-menu-item-group-label-inset, 1rem); margin-block-end: var(--m3e-nav-menu-item-group-label-space, 1rem); flex: none; } :host(:state(-divided)) .label { margin-block-start: calc( var(--m3e-nav-menu-item-group-label-space, 1rem) - var(--m3e-nav-menu-divider-margin, 0.25rem) ); } :host(:not(:state(-divided))) .label { margin-block-start: var(--m3e-nav-menu-item-group-label-space, 1rem); }`,ce.__nextId=0,ce=re=i([g("m3e-nav-menu-item-group")],ce);export{se as M3eNavMenuElement,H as M3eNavMenuItemElement,ce as M3eNavMenuItemGroupElement};

package/dist/nav-rail.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 { __decorate, __classPrivateFieldGet } from 'tslib';

package/dist/nav-rail.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{__decorate as e,__classPrivateFieldGet as t}from"tslib";import{css as a,LitElement as n}from"lit";import{registerStyleSheet as i,DesignToken as o,customElement as l,HtmlFor as r,ActionElementBase as s,MutationController as c}from"@m3e/web/core";import{RovingTabIndexManager as m,selectionManager as d,M3eInteractivityChecker as h,addAriaReferencedId as v,removeAriaReferencedId as p}from"@m3e/web/core/a11y";import{M3eNavBarElement as f}from"@m3e/web/nav-bar";var b,u,w,g;let x=class extends f{constructor(){super(),b.add(this),u.set(this,(new m).withHomeAndEnd().withWrap()),w.set(this,e=>t(this,b,"m",g).call(this,e)),this[d].onSelectedItemsChange(()=>{t(this,u,"f").updateActiveItem(this[d].activeItem)})}connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",t(this,w,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",t(this,w,"f"))}_updateItems(){const e=h.findInteractiveElements(this),{added:a}=t(this,u,"f").setItems(e);if(!t(this,u,"f").activeItem){const e=a.find(e=>!e.hasAttribute("disabled"));e&&t(this,u,"f").updateActiveItem(e)}super._updateItems()}_updateOrientation(e){super._updateOrientation(e),this.querySelectorAll("m3e-fab").forEach(t=>t.toggleAttribute("extended","horizontal"===e))}};var E,k,$;u=new WeakMap,w=new WeakMap,b=new WeakSet,g=function(e){t(this,u,"f").onKeyDown(e)},i(a`m3e-nav-rail > m3e-icon-button, m3e-nav-rail > m3e-fab { margin-block-end: var(--m3e-nav-rail-button-item-space, 1rem); } m3e-nav-rail:not(:state(-compact)) > m3e-icon-button { margin-inline-start: var(--m3e-nav-rail-expanded-icon-button-inset, 0.5rem); }`),x.styles=a`:host { display: block; overflow-x: hidden; overflow-y: auto; scrollbar-width: ${o.scrollbar.thinWidth}; scrollbar-color: ${o.scrollbar.color}; } .base { display: flex; width: 100%; min-width: inherit; max-width: inherit; flex-direction: column; padding-block-start: var(--m3e-nav-rail-top-space, 2.75rem); padding-block-end: var(--m3e-nav-rail-bottom-space, 0.5rem); } :host(:state(-compact)) { width: var(--m3e-nav-rail-compact-width, 6rem); } :host(:state(-compact)) ::slotted(m3e-fab) { align-self: center; } :host(:not(:state(-compact))) { min-width: var(--m3e-nav-rail-expanded-min-width, 13.75rem); max-width: var(--m3e-nav-rail-expanded-max-width, 22.5rem); } :host(:not(:state(-compact))) .base { padding-inline: var(--m3e-nav-rail-expanded-inline-padding, 1.25rem); align-items: flex-start; --m3e-horizontal-nav-item-active-indicator-height: var(--m3e-nav-rail-expanded-item-height, 3.5rem); --_nav-item-align-self: stretch; --_nav-item-justify-content: flex-start; } ::slotted(*) { flex: none; } :host(:state(-compact)) ::slotted(m3e-icon-button) { align-self: center; } ::slotted(m3e-fab) { --m3e-fab-container-elevation: ${o.elevation.level0}; --m3e-fab-disabled-container-elevation: ${o.elevation.level0}; --m3e-fab-focus-container-elevation: ${o.elevation.level0}; --m3e-fab-pressed-container-elevation: ${o.elevation.level0}; --m3e-fab-hover-container-elevation: ${o.elevation.level1}; --m3e-fab-lowered-container-elevation: ${o.elevation.level0}; --m3e-fab-lowered-disabled-container-elevation: ${o.elevation.level0}; --m3e-fab-lowered-focus-container-elevation: ${o.elevation.level0}; --m3e-fab-lowered-pressed-container-elevation: ${o.elevation.level0}; --m3e-fab-lowered-hover-container-elevation: ${o.elevation.level1}; }`,x=e([l("m3e-nav-rail")],x);let y=class extends(r(s)){constructor(){super(...arguments),E.add(this),k.set(this,new c(this,{target:null,config:{attributeFilter:["class"]},callback:()=>t(this,E,"m",$).call(this)}))}attach(e){e instanceof x&&t(this,k,"f").observe(e),this.htmlFor&&this.parentElement&&v(this.parentElement,"aria-controls",this.htmlFor),super.attach(e),t(this,E,"m",$).call(this)}detach(){for(const e of t(this,k,"f").targets)t(this,k,"f").unobserve(e);this.parentElement&&(this.htmlFor&&p(this.parentElement,"aria-controls",this.htmlFor),this.parentElement.ariaExpanded=null),super.detach()}_onClick(){this.control instanceof x&&(this.control.currentMode="compact"===this.control.currentMode?"expanded":"compact")}};k=new WeakMap,E=new WeakSet,$=async function(){if(!this.parentElement)return;const e=this.control instanceof x&&"expanded"===this.control.currentMode;this.parentElement.ariaExpanded=`${e}`,this.parentElement.hasAttribute("toggle")&&this.parentElement.toggleAttribute("selected",e),this.parentElement instanceof n&&(await this.parentElement.updateComplete,this.parentElement.ariaPressed=null)},y=e([l("m3e-nav-rail-toggle")],y);export{x as M3eNavRailElement,y as M3eNavRailToggleElement};

package/dist/option.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, __classPrivateFieldSet, __decorate } from 'tslib';

package/dist/option.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,__classPrivateFieldSet as t,__decorate as o}from"tslib";import{LitElement as a,html as i,unsafeCSS as n,css as r}from"lit";import{query as l,property as s}from"lit/decorators.js";import{Selected as d,Disabled as c,AttachInternals as p,Role as h,getTextContent as m,setCustomState as g,DesignToken as f,customElement as v,MutationController as b,hasAssignedNodes as u,deleteCustomState as y,addCustomState as $,registerStyleSheet as x}from"@m3e/web/core";import{typeaheadLabel as w,removeAriaReferencedId as k,addAriaReferencedId as S}from"@m3e/web/core/a11y";import{M3eFloatingPanelElement as z}from"@m3e/web/core/anchoring";var C,M,W,E;let _=class extends(d(c(p(h(a,"option"))))){constructor(){super(...arguments),C.add(this),M.set(this,void 0),W.set(this,""),this.term="",this.highlightMode="contains",this.disableHighlight=!1}get value(){return e(this,M,"f")??e(this,W,"f")}set value(e){t(this,M,e,"f")}get label(){return e(this,W,"f")}[(M=new WeakMap,W=new WeakMap,C=new WeakSet,w)](){return this.label}get isEmpty(){return""===this.value}connectedCallback(){super.connectedCallback(),[this.focusRing,this.stateLayer,this._ripple].forEach(e=>e?.attach(this))}firstUpdated(e){super.firstUpdated(e),[this.focusRing,this.stateLayer,this._ripple].forEach(e=>e?.attach(this))}update(e){if(super.update(e),e.has("selected")&&this.selected){const e=this.closest("[role='listbox']")??this.closest("m3e-autocomplete")??this.closest("m3e-select");e&&"true"!==e.ariaMultiSelectable&&!e.hasAttribute("multi")&&e.querySelectorAll("m3e-option").forEach(e=>{e!==this&&e.selected&&(e.selected=!1)})}}render(){return i`<div class="base"><m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer><m3e-focus-ring class="focus-ring" ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" ?disabled="${this.disabled}"></m3e-ripple><div class="touch" aria-hidden="true"></div><div class="wrapper"><div class="icon" aria-hidden="true"><svg class="check" viewBox="0 -960 960 960"><path fill="currentColor" d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/></svg></div><m3e-text-overflow class="label"><m3e-text-highlight term="${this.term}" mode="${this.highlightMode}" ?disabled="${this.disableHighlight}"><slot @slotchange="${e(this,C,"m",E)}"></slot></m3e-text-highlight></m3e-text-overflow></div></div>`}};var H,T,q,L,A;E=function(e){t(this,W,m(e.target),"f"),g(this,"-empty",this.isEmpty),this.selected&&this.closest("m3e-select")?.requestUpdate?.()},_.styles=r`:host { display: block; outline: none; user-select: none; flex: none; height: var(--m3e-option-container-height, 2.75rem); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not([aria-disabled="true"])) .base { color: var(--m3e-option-color, ${f.color.onSurface}); --m3e-state-layer-hover-color: var(--m3e-option-container-hover-color, ${f.color.onSurface}); --m3e-state-layer-focus-color: var(--m3e-option-container-focus-color, ${f.color.onSurface}); --m3e-ripple-color: var(--m3e-option-ripple-color, ${f.color.onSurface}); } :host(:not([aria-disabled="true"]):not(:state(-empty))[selected]) .base { color: var(--m3e-option-selected-color, ${f.color.onTertiaryContainer}); background-color: var(--m3e-option-selected-container-color, ${f.color.tertiaryContainer}); --m3e-state-layer-hover-color: var( --m3e-option-selected-container-hover-color, ${f.color.onTertiaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-option-selected-container-focus-color, ${f.color.onTertiaryContainer} ); --m3e-ripple-color: var(--m3e-option-selected-ripple-color, ${f.color.onTertiaryContainer}); } :host(:not([aria-disabled="true"])) { cursor: pointer; } :host([aria-disabled="true"]) .base { color: color-mix( in srgb, var(--m3e-option-disabled-color, ${f.color.onSurface}) var(--m3e-option-disabled-opacity, 38%), transparent ); } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; position: relative; width: 100%; height: 100%; border-radius: var(--m3e-option-shape, ${f.shape.corner.extraSmall}); transition: ${n(`border-radius ${f.motion.spring.fastEffects}`)}; } :host([selected]:not(:state(-first))) .base { border-top-left-radius: var(--m3e-option-selected-shape, ${f.shape.corner.medium}); border-top-right-radius: var(--m3e-option-selected-shape, ${f.shape.corner.medium}); } :host([selected]:not(:state(-last))) .base { border-bottom-left-radius: var(--m3e-option-selected-shape, ${f.shape.corner.medium}); border-bottom-right-radius: var(--m3e-option-selected-shape, ${f.shape.corner.medium}); } :host(:state(-first)) .base { border-top-left-radius: var(--m3e-option-first-child-shape, ${f.shape.corner.medium}); border-top-right-radius: var(--m3e-option-first-child-shape, ${f.shape.corner.medium}); } :host(:state(-last)) .base { border-bottom-left-radius: var(--m3e-option-last-child-shape, ${f.shape.corner.medium}); border-bottom-right-radius: var(--m3e-option-last-child-shape, ${f.shape.corner.medium}); } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .wrapper { flex: 1 1 auto; display: inline-flex; align-items: center; width: 100%; overflow: hidden; column-gap: var(--m3e-option-icon-label-space, 0.5rem); padding-inline-start: var(--_option-padding-start, var(--m3e-option-padding-start, 0.75rem)); padding-inline-end: var(--m3e-option-padding-end, 0.75rem); font-size: var(--m3e-option-label-text-font-size, ${f.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-option-label-text-font-weight, ${f.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-option-label-text-line-height, ${f.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-option-label-text-tracking, ${f.typescale.standard.label.large.tracking}); } .focus-ring { border-radius: var(--m3e-option-focus-ring-shape, inherit); } .icon { margin-inline-start: calc(0px - var(--m3e-option-icon-label-space, 0.5rem)); transition: ${n(`margin-inline-start ${f.motion.spring.fastEffects}, width ${f.motion.spring.fastEffects}`)}; } :host([selected]) .icon { margin-inline-start: 0; width: var(--m3e-option-icon-size, 1.25rem); } .icon { flex: none; width: 0px; font-size: var(--m3e-option-icon-size, 1.25rem); } :host(:state(-empty)) .icon, :host(:state(-hide-selection-indicator)) .icon, :host(:not([selected])) .check { display: none; } @media (forced-colors: active) { .base { background-color: Menu; color: MenuText; } :host([aria-disabled="true"]) .base { color: GrayText; } } @media (prefers-reduced-motion) { .icon, .base { transition: none; } }`,o([l(".focus-ring")],_.prototype,"focusRing",void 0),o([l(".state-layer")],_.prototype,"stateLayer",void 0),o([l(".ripple")],_.prototype,"_ripple",void 0),o([s()],_.prototype,"value",null),o([s()],_.prototype,"term",void 0),o([s({attribute:"highlight-mode"})],_.prototype,"highlightMode",void 0),o([s({attribute:"disable-highlight",type:Boolean})],_.prototype,"disableHighlight",void 0),_=o([v("m3e-option")],_);let R=A=class extends(h(a,"group")){constructor(){super(...arguments),H.add(this),T.set(this,"m3e-optgroup-label-"+A.__nextId++),q.set(this,void 0)}render(){return i`<m3e-text-overflow class="label"><slot name="label" @slotchange="${e(this,H,"m",L)}"></slot></m3e-text-overflow><slot></slot>`}};var U,j,B,I;T=new WeakMap,q=new WeakMap,H=new WeakSet,L=function(o){const a=o.target.assignedElements({flatten:!0})[0]??void 0;a!==e(this,q,"f")&&(e(this,q,"f")?.id&&(k(this,"aria-labelledby",e(this,q,"f").id),e(this,q,"f").id===e(this,T,"f")&&(e(this,q,"f").id="")),t(this,q,a,"f"),e(this,q,"f")&&(e(this,q,"f").id=e(this,q,"f").id||e(this,T,"f"),S(this,"aria-labelledby",e(this,q,"f").id)))},R.styles=r`:host { display: block; --_option-padding-start: calc(var(--m3e-option-padding-start, 0.75rem) * 2); } .label { height: var(--m3e-option-height, 3rem); font-size: var(--m3e-option-font-size, ${f.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-option-font-weight, ${f.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-option-line-height, ${f.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-option-tracking, ${f.typescale.standard.label.large.tracking}); padding-inline-end: var(--m3e-option-padding-end, 0.75rem); padding-inline-start: var(--m3e-option-padding-start, 0.75rem); color: var(--m3e-option-color, ${f.color.onSurface}); flex: none; }`,R.__nextId=0,R=A=o([v("m3e-optgroup")],R);let V=class extends(h(z,"listbox")){constructor(){super(),U.add(this),this.state="content",new b(this,{config:{childList:!0,subtree:!0},callback:()=>e(this,U,"m",I).call(this)})}connectedCallback(){super.connectedCallback(),e(this,U,"m",I).call(this)}render(){return i`<div class="base"><slot></slot><div class="no-data" aria-hidden="true"><slot name="no-data" @slotchange="${e(this,U,"m",j)}"></slot></div><div class="loading" aria-hidden="true"><slot name="loading" @slotchange="${e(this,U,"m",B)}"></slot></div></div>`}};U=new WeakSet,j=function(e){g(this,"-with-no-data",u(e.target))},B=function(e){g(this,"-with-loading",u(e.target)),g(this,"-with-loading-indicator",null!==this.querySelector("m3e-loading-indicator[slot='loading'], m3e-circular-progress-indicator[slot='loading']"))},I=function(){const e=this.querySelectorAll("m3e-option");let t,o=!1;for(let a=0;a<e.length;a++){const i=e[a];!0===i.hidden?(y(i,"-first"),y(i,"-last")):o||i.parentElement instanceof R?(y(i,"-first"),t&&y(t,"-last"),$(i,"-last"),t=i):($(i,"-first"),o=!0,$(i,"-last"),t=i)}},x(r`m3e-option-panel > m3e-divider { margin-block: var(--m3e-option-panel-divider-spacing, 0.5rem); } m3e-option-panel m3e-option[hidden], m3e-option-panel m3e-optgroup[hidden] { display: none; }`),V.styles=[z.styles,r`:host { --m3e-floating-panel-container-shape: var( --m3e-option-panel-container-shape, ${f.shape.corner.large} ); --m3e-floating-panel-container-min-width: var(--m3e-option-panel-container-min-width, 7rem); --m3e-floating-panel-container-max-width: var(--m3e-option-panel-container-max-width, 17.5rem); --m3e-floating-panel-container-max-height: var(--m3e-option-panel-container-max-height, 17.5rem); --m3e-floating-panel-container-color: var( --m3e-option-panel-container-color, ${f.color.surfaceContainer} ); --m3e-floating-panel-container-elevation: var( --m3e-option-panel-container-elevation, ${f.elevation.level3} ); --m3e-floating-panel-container-padding-inline: var(--m3e-option-panel-container-padding-inline, 0.25rem); --m3e-floating-panel-container-padding-block: var(--m3e-option-panel-container-padding-block, 0.25rem); } .base { row-gap: var(--m3e-option-panel-gap, 0.125rem); --m3e-text-highlight-container-color: var( --m3e-option-panel-text-highlight-container-color, ${f.color.tertiaryContainer} ); --m3e-text-highlight-color: var( --m3e-option-panel-text-highlight-color, ${f.color.onTertiaryContainer} ); --m3e-focus-ring-outward-offset: 0px; --m3e-focus-ring-growth-factor: 1.5; } .no-data { display: flex; align-items: center; box-sizing: border-box; min-height: var(--m3e-option-panel-no-data-container-height, 2.75rem); padding: var(--m3e-option-panel-no-data-container-padding, 0.75rem); color: var(--m3e-option-panel-no-data-color, ${f.color.onSurfaceVariant}); font-size: var(--m3e-option-panel-no-data-font-size, ${f.typescale.standard.label.large.fontSize}); font-weight: var( --m3e-option-panel-no-data-font-weight, ${f.typescale.standard.label.large.fontWeight} ); line-height: var( --m3e-option-panel-no-data-line-height, ${f.typescale.standard.label.large.lineHeight} ); letter-spacing: var( --m3e-option-panel-no-data-tracking, ${f.typescale.standard.label.large.tracking} ); } .loading { display: flex; align-items: center; box-sizing: border-box; min-height: var(--m3e-option-panel-loading-container-height, 2.75rem); padding: var(--m3e-option-panel-loading-container-padding, 0.75rem); color: var(--m3e-option-panel-loading-color, ${f.color.onSurfaceVariant}); font-size: var(--m3e-option-panel-loading-font-size, ${f.typescale.standard.label.large.fontSize}); font-weight: var( --m3e-option-panel-loading-font-weight, ${f.typescale.standard.label.large.fontWeight} ); line-height: var( --m3e-option-panel-loading-line-height, ${f.typescale.standard.label.large.lineHeight} ); letter-spacing: var( --m3e-option-panel-loading-tracking, ${f.typescale.standard.label.large.tracking} ); } :host(:state(-no-data)) slot:not([name]), :host(:state(-loading)) slot:not([name]), :host(:state(-loading)) .no-data, :host(:not(:state(-no-data))) .no-data, :host(:not(:state(-with-no-data))) .no-data, :host(:not(:state(-loading))) .loading, :host(:not(:state(-with-loading))) .loading { display: none; } :host(:state(-no-data)) .base, :host(:state(-loading)) .base { overflow-y: hidden; } :host(:state(-with-loading-indicator)) .loading { padding: 0; justify-content: center; }`],o([s({reflect:!0})],V.prototype,"state",void 0),V=o([v("m3e-option-panel")],V);export{R as M3eOptGroupElement,_ as M3eOptionElement,V as M3eOptionPanelElement};

package/dist/paginator.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/paginator.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 t}from"tslib";import{LitElement as i,html as a,nothing as s,css as o}from"lit";import{property as l}from"lit/decorators.js";import{EventAttribute as n,Role as r,DesignToken as p,customElement as g}from"@m3e/web/core";import"@m3e/web/form-field";import"@m3e/web/select";import"@m3e/web/option";import"@m3e/web/icon-button";import"@m3e/web/tooltip";

package/dist/progress-indicator.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 { __decorate, __classPrivateFieldGet, __classPrivateFieldSet } from 'tslib';

package/dist/progress-indicator.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{__decorate as t,__classPrivateFieldGet as e,__classPrivateFieldSet as i}from"tslib";import{LitElement as r,css as a,html as s,nothing as o,svg as n}from"lit";import{property as h}from"lit/decorators.js";import{classMap as l}from"lit/directives/class-map.js";import{ifDefined as d}from"lit/directives/if-defined.js";import{ReconnectedCallback as c,AttachInternals as m,Role as f,DesignToken as p,customElement as v,ResizeController as u,AnimationLoopController as g,resolveFragmentUrl as w,safeStyleMap as k}from"@m3e/web/core";class y extends(c(m(f(r,"progressbar"),!0))){constructor(){super(...arguments),this.value=0,this.max=100,this.variant="flat"}connectedCallback(){super.connectedCallback(),this.ariaValueMin="0"}update(t){super.update(t),t.has("value")&&(this.ariaValueNow=`${this.value}`),t.has("max")&&(this.ariaValueMax=`${this.max}`)}}var $,b,x,M,q,C,_,A,W,B,S,I,R,X,V,U,j,P,N,T,H,z,G,O,L,Q;y.styles=a`@media (forced-colors: active) { :host { --m3e-progress-indicator-color: CanvasText; --m3e-progress-indicator-track-color: Canvas; } }`,t([h({type:Number,reflect:!0})],y.prototype,"value",void 0),t([h({type:Number})],y.prototype,"max",void 0),t([h({reflect:!0})],y.prototype,"variant",void 0);let D=Q=class extends y{constructor(){super(...arguments),$.add(this),b.set(this,"m3e-circular-progress-mask-"+Q.__nextMaskId++),x.set(this,0),M.set(this,0),q.set(this,0),C.set(this,0),_.set(this,void 0),A.set(this,void 0),W.set(this,new u(this,{skipInitial:!0,target:null,callback:()=>{e(this,$,"m",U).call(this),e(this,$,"m",j).call(this),queueMicrotask(()=>this.requestUpdate())}})),B.set(this,new g(this,(t,i)=>e(this,$,"m",P).call(this,i))),this.indeterminate=!1}update(t){super.update(t),t.has("indeterminate")&&(this.ariaValueNow=this.indeterminate?null:`${this.value}`)}reconnectedCallback(){super.reconnectedCallback(),e(this,$,"m",S).call(this)}firstUpdated(t){super.firstUpdated(t),e(this,$,"m",S).call(this)}updated(t){super.updated(t),t.has("indeterminate")&&(i(this,_,this.shadowRoot?.querySelector(".spinner.active-track"),"f"),i(this,A,this.shadowRoot?.querySelector(".spinner.track"),"f"),this.indeterminate?e(this,B,"f").start():e(this,B,"f").stop())}render(){return"wavy"===this.variant?e(this,$,"m",R).call(this):e(this,$,"m",I).call(this)}};var E,F,J,K,Y,Z,tt,et,it,rt,at,st,ot;b=new WeakMap,x=new WeakMap,M=new WeakMap,q=new WeakMap,C=new WeakMap,_=new WeakMap,A=new WeakMap,W=new WeakMap,B=new WeakMap,$=new WeakSet,S=function(){const t=this.shadowRoot?.querySelector(".diameter-and-stroke");t&&(e(this,$,"m",U).call(this),e(this,W,"f").observe(t));const i=this.shadowRoot?.querySelector(".amplitude-and-wavelength");i&&(e(this,$,"m",U).call(this),e(this,W,"f").observe(i))},I=function(){if(this.indeterminate){const t=e(this,$,"m",O).call(this,{startAngle:-45,endAngle:90+e(this,M,"f")}),i=e(this,$,"m",O).call(this,{startAngle:-e(this,M,"f"),endAngle:135});return s`<div class="progress" aria-hidden="true"><div class="spinner"><div class="left"><svg width="${e(this,x,"f")}" height="${e(this,x,"f")}" viewBox="${t.viewBox}" class="circle"><path class="active-track" d="${t.path}" stroke="currentColor" stroke-width="${e(this,M,"f")}" fill="none" stroke-linecap="round"/></svg></div><div class="right"><svg width="${e(this,x,"f")}" height="${e(this,x,"f")}" viewBox="${i.viewBox}" class="circle"><path class="active-track" d="${i.path}" stroke="currentColor" stroke-width="${e(this,M,"f")}" fill="none" stroke-linecap="round"/></svg></div></div></div>${e(this,$,"m",X).call(this)}`}const t=e(this,$,"m",T).call(this,2*e(this,M,"f"),e(this,x,"f"));let i=this.value/this.max*360;i>0&&(i=Math.max(0,t,i));const r=e(this,$,"m",O).call(this,{gap:i<360?e(this,M,"f"):0,endAngle:i}),a=e(this,$,"m",O).call(this,{gap:i>0?e(this,M,"f"):0,startAngle:i,endAngle:360});return s`<div class="progress" aria-hidden="true"><svg width="${e(this,x,"f")}" height="${e(this,x,"f")}" viewBox="${r.viewBox}">${i>0?n`<path

package/dist/radio-group.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, __classPrivateFieldSet } from 'tslib';