@m3e/web 2.5.13 → 2.5.14

package/dist/avatar.js

@@ -60,7 +60,7 @@ let M3eAvatarElement = class M3eAvatarElement extends LitElement {
   }
 };
 /** The styles of the element. */
-M3eAvatarElement.styles = css`:host { display: inline-block; vertical-align: middle; aspect-ratio: 1 / 1; width: var(--m3e-avatar-size, 2.5rem); } .base { user-select: none; white-space: nowrap; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: var(--m3e-avatar-shape, ${DesignToken.shape.corner.full}); font-size: var(--m3e-avatar-font-size, ${DesignToken.typescale.standard.title.medium.fontSize}); font-weight: var(--m3e-avatar-font-weight, ${DesignToken.typescale.standard.title.medium.fontWeight}); line-height: var(--m3e-avatar-line-height, ${DesignToken.typescale.standard.title.medium.lineHeight}); letter-spacing: var(--m3e-avatar-tracking, ${DesignToken.typescale.standard.title.medium.tracking}); background-color: var(--m3e-avatar-color, ${DesignToken.color.primaryContainer}); color: var(--m3e-avatar-label-color, ${DesignToken.color.onPrimaryContainer}); } ::slotted(img) { display: block; margin: 0 auto; overflow: hidden; object-fit: cover; width: 100%; height: 100%; }`;
+M3eAvatarElement.styles = css`:host { display: inline-block; vertical-align: middle; aspect-ratio: 1 / 1; width: var(--m3e-avatar-size, 2.5rem); } .base { contain: layout style paint; user-select: none; white-space: nowrap; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: var(--m3e-avatar-shape, ${DesignToken.shape.corner.full}); font-size: var(--m3e-avatar-font-size, ${DesignToken.typescale.standard.title.medium.fontSize}); font-weight: var(--m3e-avatar-font-weight, ${DesignToken.typescale.standard.title.medium.fontWeight}); line-height: var(--m3e-avatar-line-height, ${DesignToken.typescale.standard.title.medium.lineHeight}); letter-spacing: var(--m3e-avatar-tracking, ${DesignToken.typescale.standard.title.medium.tracking}); background-color: var(--m3e-avatar-color, ${DesignToken.color.primaryContainer}); color: var(--m3e-avatar-label-color, ${DesignToken.color.onPrimaryContainer}); } ::slotted(img) { display: block; margin: 0 auto; overflow: hidden; object-fit: cover; width: 100%; height: 100%; }`;
 M3eAvatarElement = __decorate([customElement("m3e-avatar")], M3eAvatarElement);
 
 export { M3eAvatarElement };

package/dist/avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","sources":["../../src/avatar/AvatarElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement } from \"lit\";\r\n\r\nimport { customElement, DesignToken } from \"@m3e/web/core\";\r\n\r\n/**\r\n * An image, icon or textual initials representing a user or other identity.\r\n *\r\n * @description\r\n * The `m3e-avatar` component is a reusable identity primitive that displays visual or\r\n * textual representation with consistent sizing, shape, and typography.\r\n *\r\n * @example\r\n * The following example illustrates use of the `m3e-avatar` to present textual initials.\r\n * ```html\r\n * <m3e-avatar>AB</m3e-avatar>\r\n * ```\r\n *\r\n * @example\r\n * The next example illustrates use of the `m3e-avatar` to present an icon.\r\n *\r\n * Note: This example uses the `@m3e/icon` package to present Material Design symbols, but any icon package can be\r\n * substituted depending on your design system or preferences.\r\n *\r\n * ```html\r\n * <m3e-avatar>\r\n *  <m3e-icon name=\"person\"></m3e-icon>\r\n * </m3e-avatar>\r\n * ```\r\n *\r\n * @example\r\n * The last example illustrates use of the `m3e-avatar` to present an image.\r\n * ```html\r\n * <m3e-avatar>\r\n *  <img src=\"https://avatars.githubusercontent.com/u/224686995?s=48&v=4\" />\r\n * </m3e-avatar>\r\n * ```\r\n *\r\n * @tag m3e-avatar\r\n *\r\n * @slot - Renders the content of the avatar.\r\n *\r\n * @cssprop --m3e-avatar-size - Size of the avatar.\r\n * @cssprop --m3e-avatar-shape - Border radius of the avatar.\r\n * @cssprop --m3e-avatar-font-size - Font size for the avatar.\r\n * @cssprop --m3e-avatar-font-weight - Font weight for the avatar.\r\n * @cssprop --m3e-avatar-line-height - Line height for the avatar.\r\n * @cssprop --m3e-avatar-tracking - Letter spacing for the avatar.\r\n * @cssprop --m3e-avatar-color - Background color of the avatar.\r\n * @cssprop --m3e-avatar-label-color - Text color of the avatar.\r\n */\r\n@customElement(\"m3e-avatar\")\r\nexport class M3eAvatarElement extends LitElement {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: inline-block;\r\n      vertical-align: middle;\r\n      aspect-ratio: 1 / 1;\r\n      width: var(--m3e-avatar-size, 2.5rem);\r\n    }\r\n    .base {\r\n      user-select: none;\r\n      white-space: nowrap;\r\n      width: 100%;\r\n      height: 100%;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      overflow: hidden;\r\n      border-radius: var(--m3e-avatar-shape, ${DesignToken.shape.corner.full});\r\n      font-size: var(--m3e-avatar-font-size, ${DesignToken.typescale.standard.title.medium.fontSize});\r\n      font-weight: var(--m3e-avatar-font-weight, ${DesignToken.typescale.standard.title.medium.fontWeight});\r\n      line-height: var(--m3e-avatar-line-height, ${DesignToken.typescale.standard.title.medium.lineHeight});\r\n      letter-spacing: var(--m3e-avatar-tracking, ${DesignToken.typescale.standard.title.medium.tracking});\r\n      background-color: var(--m3e-avatar-color, ${DesignToken.color.primaryContainer});\r\n      color: var(--m3e-avatar-label-color, ${DesignToken.color.onPrimaryContainer});\r\n    }\r\n    ::slotted(img) {\r\n      display: block;\r\n      margin: 0 auto;\r\n      overflow: hidden;\r\n      object-fit: cover;\r\n      width: 100%;\r\n      height: 100%;\r\n    }\r\n  `;\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\"><slot></slot></div>`;\r\n  }\r\n}\r\n"],"names":["M3eAvatarElement","LitElement","render","html","styles","css","DesignToken","shape","corner","full","typescale","standard","title","medium","fontSize","fontWeight","lineHeight","tracking","color","primaryContainer","onPrimaryContainer","__decorate","customElement"],"mappings":";;;;;;;;;AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CG;AAEI,IAAMA,gBAAgB,GAAtB,MAAMA,gBAAiB,SAAQC,UAAU,CAAA;AAoC9C;AACmBC,EAAAA,MAAMA,GAAA;AACvB,IAAA,OAAOC,IAAI,CAAA,qCAAA,CAAuC;AACpD,EAAA;;AAtCA;AACgBH,gBAAA,CAAAI,MAAM,GAAmBC,GAAG,yTAgBCC,WAAW,CAACC,KAAK,CAACC,MAAM,CAACC,IAAI,CAAA,0CAAA,EAC7BH,WAAW,CAACI,SAAS,CAACC,QAAQ,CAACC,KAAK,CAACC,MAAM,CAACC,QAAQ,CAAA,8CAAA,EAChDR,WAAW,CAACI,SAAS,CAACC,QAAQ,CAACC,KAAK,CAACC,MAAM,CAACE,UAAU,CAAA,8CAAA,EACtDT,WAAW,CAACI,SAAS,CAACC,QAAQ,CAACC,KAAK,CAACC,MAAM,CAACG,UAAU,CAAA,8CAAA,EACtDV,WAAW,CAACI,SAAS,CAACC,QAAQ,CAACC,KAAK,CAACC,MAAM,CAACI,QAAQ,CAAA,6CAAA,EACrDX,WAAW,CAACY,KAAK,CAACC,gBAAgB,2CACvCb,WAAW,CAACY,KAAK,CAACE,kBAAkB,CAAA,uHAAA,CAtBzD;AAFXpB,gBAAgB,GAAAqB,UAAA,CAAA,CAD5BC,aAAa,CAAC,YAAY,CAAC,CACf,EAAAtB,gBAAgB,CAwC5B;;;;"}
+{"version":3,"file":"avatar.js","sources":["../../src/avatar/AvatarElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement } from \"lit\";\r\n\r\nimport { customElement, DesignToken } from \"@m3e/web/core\";\r\n\r\n/**\r\n * An image, icon or textual initials representing a user or other identity.\r\n *\r\n * @description\r\n * The `m3e-avatar` component is a reusable identity primitive that displays visual or\r\n * textual representation with consistent sizing, shape, and typography.\r\n *\r\n * @example\r\n * The following example illustrates use of the `m3e-avatar` to present textual initials.\r\n * ```html\r\n * <m3e-avatar>AB</m3e-avatar>\r\n * ```\r\n *\r\n * @example\r\n * The next example illustrates use of the `m3e-avatar` to present an icon.\r\n *\r\n * Note: This example uses the `@m3e/icon` package to present Material Design symbols, but any icon package can be\r\n * substituted depending on your design system or preferences.\r\n *\r\n * ```html\r\n * <m3e-avatar>\r\n *  <m3e-icon name=\"person\"></m3e-icon>\r\n * </m3e-avatar>\r\n * ```\r\n *\r\n * @example\r\n * The last example illustrates use of the `m3e-avatar` to present an image.\r\n * ```html\r\n * <m3e-avatar>\r\n *  <img src=\"https://avatars.githubusercontent.com/u/224686995?s=48&v=4\" />\r\n * </m3e-avatar>\r\n * ```\r\n *\r\n * @tag m3e-avatar\r\n *\r\n * @slot - Renders the content of the avatar.\r\n *\r\n * @cssprop --m3e-avatar-size - Size of the avatar.\r\n * @cssprop --m3e-avatar-shape - Border radius of the avatar.\r\n * @cssprop --m3e-avatar-font-size - Font size for the avatar.\r\n * @cssprop --m3e-avatar-font-weight - Font weight for the avatar.\r\n * @cssprop --m3e-avatar-line-height - Line height for the avatar.\r\n * @cssprop --m3e-avatar-tracking - Letter spacing for the avatar.\r\n * @cssprop --m3e-avatar-color - Background color of the avatar.\r\n * @cssprop --m3e-avatar-label-color - Text color of the avatar.\r\n */\r\n@customElement(\"m3e-avatar\")\r\nexport class M3eAvatarElement extends LitElement {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: inline-block;\r\n      vertical-align: middle;\r\n      aspect-ratio: 1 / 1;\r\n      width: var(--m3e-avatar-size, 2.5rem);\r\n    }\r\n    .base {\r\n      contain: layout style paint;\r\n      user-select: none;\r\n      white-space: nowrap;\r\n      width: 100%;\r\n      height: 100%;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      overflow: hidden;\r\n      border-radius: var(--m3e-avatar-shape, ${DesignToken.shape.corner.full});\r\n      font-size: var(--m3e-avatar-font-size, ${DesignToken.typescale.standard.title.medium.fontSize});\r\n      font-weight: var(--m3e-avatar-font-weight, ${DesignToken.typescale.standard.title.medium.fontWeight});\r\n      line-height: var(--m3e-avatar-line-height, ${DesignToken.typescale.standard.title.medium.lineHeight});\r\n      letter-spacing: var(--m3e-avatar-tracking, ${DesignToken.typescale.standard.title.medium.tracking});\r\n      background-color: var(--m3e-avatar-color, ${DesignToken.color.primaryContainer});\r\n      color: var(--m3e-avatar-label-color, ${DesignToken.color.onPrimaryContainer});\r\n    }\r\n    ::slotted(img) {\r\n      display: block;\r\n      margin: 0 auto;\r\n      overflow: hidden;\r\n      object-fit: cover;\r\n      width: 100%;\r\n      height: 100%;\r\n    }\r\n  `;\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\"><slot></slot></div>`;\r\n  }\r\n}\r\n"],"names":["M3eAvatarElement","LitElement","render","html","styles","css","DesignToken","shape","corner","full","typescale","standard","title","medium","fontSize","fontWeight","lineHeight","tracking","color","primaryContainer","onPrimaryContainer","__decorate","customElement"],"mappings":";;;;;;;;;AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CG;AAEI,IAAMA,gBAAgB,GAAtB,MAAMA,gBAAiB,SAAQC,UAAU,CAAA;AAqC9C;AACmBC,EAAAA,MAAMA,GAAA;AACvB,IAAA,OAAOC,IAAI,CAAA,qCAAA,CAAuC;AACpD,EAAA;;AAvCA;AACgBH,gBAAA,CAAAI,MAAM,GAAmBC,GAAG,sVAiBCC,WAAW,CAACC,KAAK,CAACC,MAAM,CAACC,IAAI,CAAA,0CAAA,EAC7BH,WAAW,CAACI,SAAS,CAACC,QAAQ,CAACC,KAAK,CAACC,MAAM,CAACC,QAAQ,CAAA,8CAAA,EAChDR,WAAW,CAACI,SAAS,CAACC,QAAQ,CAACC,KAAK,CAACC,MAAM,CAACE,UAAU,CAAA,8CAAA,EACtDT,WAAW,CAACI,SAAS,CAACC,QAAQ,CAACC,KAAK,CAACC,MAAM,CAACG,UAAU,CAAA,8CAAA,EACtDV,WAAW,CAACI,SAAS,CAACC,QAAQ,CAACC,KAAK,CAACC,MAAM,CAACI,QAAQ,CAAA,6CAAA,EACrDX,WAAW,CAACY,KAAK,CAACC,gBAAgB,2CACvCb,WAAW,CAACY,KAAK,CAACE,kBAAkB,CAAA,uHAAA,CAvBzD;AAFXpB,gBAAgB,GAAAqB,UAAA,CAAA,CAD5BC,aAAa,CAAC,YAAY,CAAC,CACf,EAAAtB,gBAAgB,CAyC5B;;;;"}

package/dist/avatar.min.js

@@ -3,5 +3,5 @@
  * Copyright (c) 2025–2026 matraic
  * See LICENSE file in the project root for full license text.
  */
-import{__decorate as e}from"tslib";import{css as t,LitElement as a,html as r}from"lit";import{DesignToken as i,customElement as o}from"@m3e/web/core";let l=class extends a{render(){return r`<div class="base"><slot></slot></div>`}};l.styles=t`:host { display: inline-block; vertical-align: middle; aspect-ratio: 1 / 1; width: var(--m3e-avatar-size, 2.5rem); } .base { user-select: none; white-space: nowrap; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: var(--m3e-avatar-shape, ${i.shape.corner.full}); font-size: var(--m3e-avatar-font-size, ${i.typescale.standard.title.medium.fontSize}); font-weight: var(--m3e-avatar-font-weight, ${i.typescale.standard.title.medium.fontWeight}); line-height: var(--m3e-avatar-line-height, ${i.typescale.standard.title.medium.lineHeight}); letter-spacing: var(--m3e-avatar-tracking, ${i.typescale.standard.title.medium.tracking}); background-color: var(--m3e-avatar-color, ${i.color.primaryContainer}); color: var(--m3e-avatar-label-color, ${i.color.onPrimaryContainer}); } ::slotted(img) { display: block; margin: 0 auto; overflow: hidden; object-fit: cover; width: 100%; height: 100%; }`,l=e([o("m3e-avatar")],l);export{l as M3eAvatarElement};
+import{__decorate as e}from"tslib";import{css as t,LitElement as a,html as r}from"lit";import{DesignToken as i,customElement as o}from"@m3e/web/core";let l=class extends a{render(){return r`<div class="base"><slot></slot></div>`}};l.styles=t`:host { display: inline-block; vertical-align: middle; aspect-ratio: 1 / 1; width: var(--m3e-avatar-size, 2.5rem); } .base { contain: layout style paint; user-select: none; white-space: nowrap; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: var(--m3e-avatar-shape, ${i.shape.corner.full}); font-size: var(--m3e-avatar-font-size, ${i.typescale.standard.title.medium.fontSize}); font-weight: var(--m3e-avatar-font-weight, ${i.typescale.standard.title.medium.fontWeight}); line-height: var(--m3e-avatar-line-height, ${i.typescale.standard.title.medium.lineHeight}); letter-spacing: var(--m3e-avatar-tracking, ${i.typescale.standard.title.medium.tracking}); background-color: var(--m3e-avatar-color, ${i.color.primaryContainer}); color: var(--m3e-avatar-label-color, ${i.color.onPrimaryContainer}); } ::slotted(img) { display: block; margin: 0 auto; overflow: hidden; object-fit: cover; width: 100%; height: 100%; }`,l=e([o("m3e-avatar")],l);export{l as M3eAvatarElement};
 //# sourceMappingURL=avatar.min.js.map

package/dist/avatar.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.min.js","sources":["../../src/avatar/AvatarElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement } from \"lit\";\r\n\r\nimport { customElement, DesignToken } from \"@m3e/web/core\";\r\n\r\n/**\r\n * An image, icon or textual initials representing a user or other identity.\r\n *\r\n * @description\r\n * The `m3e-avatar` component is a reusable identity primitive that displays visual or\r\n * textual representation with consistent sizing, shape, and typography.\r\n *\r\n * @example\r\n * The following example illustrates use of the `m3e-avatar` to present textual initials.\r\n * ```html\r\n * <m3e-avatar>AB</m3e-avatar>\r\n * ```\r\n *\r\n * @example\r\n * The next example illustrates use of the `m3e-avatar` to present an icon.\r\n *\r\n * Note: This example uses the `@m3e/icon` package to present Material Design symbols, but any icon package can be\r\n * substituted depending on your design system or preferences.\r\n *\r\n * ```html\r\n * <m3e-avatar>\r\n *  <m3e-icon name=\"person\"></m3e-icon>\r\n * </m3e-avatar>\r\n * ```\r\n *\r\n * @example\r\n * The last example illustrates use of the `m3e-avatar` to present an image.\r\n * ```html\r\n * <m3e-avatar>\r\n *  <img src=\"https://avatars.githubusercontent.com/u/224686995?s=48&v=4\" />\r\n * </m3e-avatar>\r\n * ```\r\n *\r\n * @tag m3e-avatar\r\n *\r\n * @slot - Renders the content of the avatar.\r\n *\r\n * @cssprop --m3e-avatar-size - Size of the avatar.\r\n * @cssprop --m3e-avatar-shape - Border radius of the avatar.\r\n * @cssprop --m3e-avatar-font-size - Font size for the avatar.\r\n * @cssprop --m3e-avatar-font-weight - Font weight for the avatar.\r\n * @cssprop --m3e-avatar-line-height - Line height for the avatar.\r\n * @cssprop --m3e-avatar-tracking - Letter spacing for the avatar.\r\n * @cssprop --m3e-avatar-color - Background color of the avatar.\r\n * @cssprop --m3e-avatar-label-color - Text color of the avatar.\r\n */\r\n@customElement(\"m3e-avatar\")\r\nexport class M3eAvatarElement extends LitElement {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: inline-block;\r\n      vertical-align: middle;\r\n      aspect-ratio: 1 / 1;\r\n      width: var(--m3e-avatar-size, 2.5rem);\r\n    }\r\n    .base {\r\n      user-select: none;\r\n      white-space: nowrap;\r\n      width: 100%;\r\n      height: 100%;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      overflow: hidden;\r\n      border-radius: var(--m3e-avatar-shape, ${DesignToken.shape.corner.full});\r\n      font-size: var(--m3e-avatar-font-size, ${DesignToken.typescale.standard.title.medium.fontSize});\r\n      font-weight: var(--m3e-avatar-font-weight, ${DesignToken.typescale.standard.title.medium.fontWeight});\r\n      line-height: var(--m3e-avatar-line-height, ${DesignToken.typescale.standard.title.medium.lineHeight});\r\n      letter-spacing: var(--m3e-avatar-tracking, ${DesignToken.typescale.standard.title.medium.tracking});\r\n      background-color: var(--m3e-avatar-color, ${DesignToken.color.primaryContainer});\r\n      color: var(--m3e-avatar-label-color, ${DesignToken.color.onPrimaryContainer});\r\n    }\r\n    ::slotted(img) {\r\n      display: block;\r\n      margin: 0 auto;\r\n      overflow: hidden;\r\n      object-fit: cover;\r\n      width: 100%;\r\n      height: 100%;\r\n    }\r\n  `;\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\"><slot></slot></div>`;\r\n  }\r\n}\r\n"],"names":["M3eAvatarElement","LitElement","render","html","styles","css","DesignToken","shape","corner","full","typescale","standard","title","medium","fontSize","fontWeight","lineHeight","tracking","color","primaryContainer","onPrimaryContainer","__decorate","customElement"],"mappings":";;;;;sJAmDO,IAAMA,EAAN,cAA+BC,EAqCjBC,MAAAA,GACjB,OAAOC,CAAI,uCACb,GArCgBH,EAAAI,OAAyBC,CAAG,yTAgBCC,EAAYC,MAAMC,OAAOC,iDACzBH,EAAYI,UAAUC,SAASC,MAAMC,OAAOC,yDACxCR,EAAYI,UAAUC,SAASC,MAAMC,OAAOE,2DAC5CT,EAAYI,UAAUC,SAASC,MAAMC,OAAOG,2DAC5CV,EAAYI,UAAUC,SAASC,MAAMC,OAAOI,wDAC7CX,EAAYY,MAAMC,2DACvBb,EAAYY,MAAME,4IAxBlDpB,EAAgBqB,EAAA,CAD5BC,EAAc,eACFtB"}
+{"version":3,"file":"avatar.min.js","sources":["../../src/avatar/AvatarElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement } from \"lit\";\r\n\r\nimport { customElement, DesignToken } from \"@m3e/web/core\";\r\n\r\n/**\r\n * An image, icon or textual initials representing a user or other identity.\r\n *\r\n * @description\r\n * The `m3e-avatar` component is a reusable identity primitive that displays visual or\r\n * textual representation with consistent sizing, shape, and typography.\r\n *\r\n * @example\r\n * The following example illustrates use of the `m3e-avatar` to present textual initials.\r\n * ```html\r\n * <m3e-avatar>AB</m3e-avatar>\r\n * ```\r\n *\r\n * @example\r\n * The next example illustrates use of the `m3e-avatar` to present an icon.\r\n *\r\n * Note: This example uses the `@m3e/icon` package to present Material Design symbols, but any icon package can be\r\n * substituted depending on your design system or preferences.\r\n *\r\n * ```html\r\n * <m3e-avatar>\r\n *  <m3e-icon name=\"person\"></m3e-icon>\r\n * </m3e-avatar>\r\n * ```\r\n *\r\n * @example\r\n * The last example illustrates use of the `m3e-avatar` to present an image.\r\n * ```html\r\n * <m3e-avatar>\r\n *  <img src=\"https://avatars.githubusercontent.com/u/224686995?s=48&v=4\" />\r\n * </m3e-avatar>\r\n * ```\r\n *\r\n * @tag m3e-avatar\r\n *\r\n * @slot - Renders the content of the avatar.\r\n *\r\n * @cssprop --m3e-avatar-size - Size of the avatar.\r\n * @cssprop --m3e-avatar-shape - Border radius of the avatar.\r\n * @cssprop --m3e-avatar-font-size - Font size for the avatar.\r\n * @cssprop --m3e-avatar-font-weight - Font weight for the avatar.\r\n * @cssprop --m3e-avatar-line-height - Line height for the avatar.\r\n * @cssprop --m3e-avatar-tracking - Letter spacing for the avatar.\r\n * @cssprop --m3e-avatar-color - Background color of the avatar.\r\n * @cssprop --m3e-avatar-label-color - Text color of the avatar.\r\n */\r\n@customElement(\"m3e-avatar\")\r\nexport class M3eAvatarElement extends LitElement {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: inline-block;\r\n      vertical-align: middle;\r\n      aspect-ratio: 1 / 1;\r\n      width: var(--m3e-avatar-size, 2.5rem);\r\n    }\r\n    .base {\r\n      contain: layout style paint;\r\n      user-select: none;\r\n      white-space: nowrap;\r\n      width: 100%;\r\n      height: 100%;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      overflow: hidden;\r\n      border-radius: var(--m3e-avatar-shape, ${DesignToken.shape.corner.full});\r\n      font-size: var(--m3e-avatar-font-size, ${DesignToken.typescale.standard.title.medium.fontSize});\r\n      font-weight: var(--m3e-avatar-font-weight, ${DesignToken.typescale.standard.title.medium.fontWeight});\r\n      line-height: var(--m3e-avatar-line-height, ${DesignToken.typescale.standard.title.medium.lineHeight});\r\n      letter-spacing: var(--m3e-avatar-tracking, ${DesignToken.typescale.standard.title.medium.tracking});\r\n      background-color: var(--m3e-avatar-color, ${DesignToken.color.primaryContainer});\r\n      color: var(--m3e-avatar-label-color, ${DesignToken.color.onPrimaryContainer});\r\n    }\r\n    ::slotted(img) {\r\n      display: block;\r\n      margin: 0 auto;\r\n      overflow: hidden;\r\n      object-fit: cover;\r\n      width: 100%;\r\n      height: 100%;\r\n    }\r\n  `;\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\"><slot></slot></div>`;\r\n  }\r\n}\r\n"],"names":["M3eAvatarElement","LitElement","render","html","styles","css","DesignToken","shape","corner","full","typescale","standard","title","medium","fontSize","fontWeight","lineHeight","tracking","color","primaryContainer","onPrimaryContainer","__decorate","customElement"],"mappings":";;;;;sJAmDO,IAAMA,EAAN,cAA+BC,EAsCjBC,MAAAA,GACjB,OAAOC,CAAI,uCACb,GAtCgBH,EAAAI,OAAyBC,CAAG,sVAiBCC,EAAYC,MAAMC,OAAOC,iDACzBH,EAAYI,UAAUC,SAASC,MAAMC,OAAOC,yDACxCR,EAAYI,UAAUC,SAASC,MAAMC,OAAOE,2DAC5CT,EAAYI,UAAUC,SAASC,MAAMC,OAAOG,2DAC5CV,EAAYI,UAAUC,SAASC,MAAMC,OAAOI,wDAC7CX,EAAYY,MAAMC,2DACvBb,EAAYY,MAAME,4IAzBlDpB,EAAgBqB,EAAA,CAD5BC,EAAc,eACFtB"}

package/dist/badge.js

@@ -6,11 +6,11 @@
 import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate } from 'tslib';
 import { LitElement, html, css } from 'lit';
 import { property } from 'lit/decorators.js';
-import { HtmlFor, DesignToken, customElement } from '@m3e/web/core';
+import { HtmlFor, MutationController, DesignToken, customElement } from '@m3e/web/core';
 import { M3eDirectionality } from '@m3e/web/core/bidi';
 import { positionAnchor } from '@m3e/web/core/anchoring';
 
-var _M3eBadgeElement_instances, _M3eBadgeElement_directionalitySubscription, _M3eBadgeElement_anchorCleanup, _M3eBadgeElement_handleSlotChange, _M3eBadgeElement_detach, _M3eBadgeElement_attach;
+var _M3eBadgeElement_instances, _M3eBadgeElement_directionalitySubscription, _M3eBadgeElement_anchorCleanup, _M3eBadgeElement_anchorLastPosition, _M3eBadgeElement_updatePadding, _M3eBadgeElement_detach, _M3eBadgeElement_attach;
 /**
  * A visual indicator used to label content.
  *
@@ -51,12 +51,14 @@ var _M3eBadgeElement_instances, _M3eBadgeElement_directionalitySubscription, _M3
  */
 let M3eBadgeElement = class M3eBadgeElement extends HtmlFor(LitElement) {
   constructor() {
-    super(...arguments);
+    super();
     _M3eBadgeElement_instances.add(this);
     /** @private */
     _M3eBadgeElement_directionalitySubscription.set(this, void 0);
     /** @private */
     _M3eBadgeElement_anchorCleanup.set(this, void 0);
+    /** @private */
+    _M3eBadgeElement_anchorLastPosition.set(this, void 0);
     /**
      * The size of the badge.
      * @default "medium"
@@ -67,6 +69,15 @@ let M3eBadgeElement = class M3eBadgeElement extends HtmlFor(LitElement) {
      * @default "above-after"
      */
     this.position = "above-after";
+    new MutationController(this, {
+      config: {
+        childList: true,
+        subtree: true,
+        characterData: true,
+        attributes: false
+      },
+      callback: () => __classPrivateFieldGet(this, _M3eBadgeElement_instances, "m", _M3eBadgeElement_updatePadding).call(this)
+    });
   }
   /** @inheritdoc */
   attach(control) {
@@ -97,19 +108,21 @@ let M3eBadgeElement = class M3eBadgeElement extends HtmlFor(LitElement) {
   }
   /** @inheritdoc */
   render() {
-    return html`<div class="base"><slot @slotchange="${__classPrivateFieldGet(this, _M3eBadgeElement_instances, "m", _M3eBadgeElement_handleSlotChange)}"><span aria-hidden="true">&nbsp;</span></slot></div>`;
+    return html`<div class="base"><slot><span aria-hidden="true">&nbsp;</span></slot></div>`;
   }
 };
 _M3eBadgeElement_directionalitySubscription = new WeakMap();
 _M3eBadgeElement_anchorCleanup = new WeakMap();
+_M3eBadgeElement_anchorLastPosition = new WeakMap();
 _M3eBadgeElement_instances = new WeakSet();
-_M3eBadgeElement_handleSlotChange = function _M3eBadgeElement_handleSlotChange() {
+_M3eBadgeElement_updatePadding = function _M3eBadgeElement_updatePadding() {
   if (!this.isConnected) return;
   this.style.setProperty("--_badge-padding", this.textContent && this.textContent.length > 2 ? `0 ${this.size === "medium" ? "0.25rem" : this.size === "large" ? "0.5rem" : "0"}` : "");
 };
 _M3eBadgeElement_detach = function _M3eBadgeElement_detach() {
   __classPrivateFieldGet(this, _M3eBadgeElement_anchorCleanup, "f")?.call(this);
   __classPrivateFieldSet(this, _M3eBadgeElement_anchorCleanup, undefined, "f");
+  __classPrivateFieldSet(this, _M3eBadgeElement_anchorLastPosition, undefined, "f");
 };
 _M3eBadgeElement_attach = /** @private */
 async function _M3eBadgeElement_attach() {
@@ -156,12 +169,20 @@ async function _M3eBadgeElement_attach() {
         x += this.clientWidth;
       }
     }
-    this.style.left = `${x}px`;
-    this.style.top = `${y}px`;
+    if (__classPrivateFieldGet(this, _M3eBadgeElement_anchorLastPosition, "f")?.x !== x) {
+      this.style.left = `${x}px`;
+    }
+    if (__classPrivateFieldGet(this, _M3eBadgeElement_anchorLastPosition, "f")?.y !== y) {
+      this.style.top = `${y}px`;
+    }
+    __classPrivateFieldSet(this, _M3eBadgeElement_anchorLastPosition, {
+      x,
+      y
+    }, "f");
   }), "f");
 };
 /** The styles of the element. */
-M3eBadgeElement.styles = css`:host { display: inline-block; vertical-align: baseline; } .base { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; white-space: nowrap; vertical-align: baseline; box-sizing: border-box; user-select: none; padding: var(--_badge-padding); border-radius: var(--m3e-badge-shape, ${DesignToken.shape.corner.full}); color: var(--m3e-badge-color, ${DesignToken.color.onError}); background-color: var(--m3e-badge-container-color, ${DesignToken.color.error}); } :host([for]) { position: absolute; z-index: 1; } :host([for][position="above"]) { transform: translateY(var(--_badge-offset, 0px)); } :host([for][position="above-after"]:not(:dir(rtl))) { transform: translate3d(calc(0px - var(--_badge-offset, 0px)), var(--_badge-offset, 0px), 0); } :host([for][position="above-after"]:dir(rtl)) { transform: translate3d(var(--_badge-offset, 0px), var(--_badge-offset, 0px), 0); } :host([for][position="above-before"]:not(:dir(rtl))) { transform: translate3d(var(--_badge-offset, 0px), var(--_badge-offset, 0px), 0); } :host([for][position="above-before"]:dir(rtl)) { transform: translate3d(calc(0px - var(--_badge-offset, 0px)), var(--_badge-offset, 0px), 0); } :host([for][position="below"]) { transform: translateY(calc(0px - var(--_badge-offset, 0px))); } :host([for][position="below-after"]:not(:dir(rtl))) { transform: translate3d(calc(0px - var(--_badge-offset, 0px)), calc(0px - var(--_badge-offset, 0px)), 0); } :host([for][position="below-after"]:dir(rtl)) { transform: translate3d(var(--_badge-offset, 0px), calc(0px - var(--_badge-offset, 0px)), 0); } :host([for][position="below-before"]:not(:dir(rtl))) { transform: translate3d(var(--_badge-offset, 0px), calc(0px - var(--_badge-offset, 0px)), 0); } :host([for][position="below-before"]:dir(rtl)) { transform: translate3d(calc(0px - var(--_badge-offset, 0px)), calc(0px - var(--_badge-offset, 0px)), 0); } :host([for][position="before"]:not(:dir(rtl))), :host([for][position="after"]:dir(rtl)) { transform: translateX(var(--_badge-offset, 0px)); } :host([for][position="before"]:dir(rtl)), :host([for][position="after"]:not(:dir(rtl))) { transform: translateX(calc(0px - var(--_badge-offset, 0px))); } :host([size="small"]) { height: var(--m3e-badge-small-size, 0.375rem); max-height: var(--m3e-badge-small-size, 0.375rem); width: var(--m3e-badge-small-size, 0.375rem); min-width: var(--m3e-badge-small-size, 0.375rem); --_badge-offset: var(--m3e-badge-small-offset, 0.375rem); } :host([size="small"]) .base { font-size: 0; } :host([size="medium"]) { height: var(--m3e-badge-medium-size, 1.375rem); min-width: var(--m3e-badge-medium-size, 1.375rem); --_badge-offset: var(--m3e-badge-small-offset, 0.75rem); } :host([size="medium"]) .base { font-size: var(--m3e-badge-medium-font-size, ${DesignToken.typescale.standard.label.small.fontSize}); font-weight: var(--m3e-badge-medium-font-weight, ${DesignToken.typescale.standard.label.small.fontWeight}); line-height: var(--m3e-badge-medium-line-height, ${DesignToken.typescale.standard.label.small.lineHeight}); letter-spacing: var(--m3e-badge-medium-tracking, ${DesignToken.typescale.standard.label.small.tracking}); } :host([size="large"]) { height: var(--m3e-badge-large-size, 1.75rem); min-width: var(--m3e-badge-large-size, 1.75rem); --_badge-offset: var(--m3e-badge-small-offset, 1rem); } :host([size="large"]) .base { font-size: var(--m3e-badge-large-font-size, ${DesignToken.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-badge-large-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-badge-large-line-height, ${DesignToken.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-badge-large-tracking, ${DesignToken.typescale.standard.label.large.tracking}); } @media (forced-colors: active) { .base { background-color: ButtonFace; color: ButtonText; outline: 1px solid ButtonText; } }`;
+M3eBadgeElement.styles = css`:host { display: inline-block; vertical-align: baseline; } .base { contain: layout style paint; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; white-space: nowrap; vertical-align: baseline; box-sizing: border-box; user-select: none; padding: var(--_badge-padding); border-radius: var(--m3e-badge-shape, ${DesignToken.shape.corner.full}); color: var(--m3e-badge-color, ${DesignToken.color.onError}); background-color: var(--m3e-badge-container-color, ${DesignToken.color.error}); } :host([for]) { position: absolute; z-index: 1; } :host([for][position="above"]) { transform: translateY(var(--_badge-offset, 0px)); } :host([for][position="above-after"]:not(:dir(rtl))) { transform: translate3d(calc(0px - var(--_badge-offset, 0px)), var(--_badge-offset, 0px), 0); } :host([for][position="above-after"]:dir(rtl)) { transform: translate3d(var(--_badge-offset, 0px), var(--_badge-offset, 0px), 0); } :host([for][position="above-before"]:not(:dir(rtl))) { transform: translate3d(var(--_badge-offset, 0px), var(--_badge-offset, 0px), 0); } :host([for][position="above-before"]:dir(rtl)) { transform: translate3d(calc(0px - var(--_badge-offset, 0px)), var(--_badge-offset, 0px), 0); } :host([for][position="below"]) { transform: translateY(calc(0px - var(--_badge-offset, 0px))); } :host([for][position="below-after"]:not(:dir(rtl))) { transform: translate3d(calc(0px - var(--_badge-offset, 0px)), calc(0px - var(--_badge-offset, 0px)), 0); } :host([for][position="below-after"]:dir(rtl)) { transform: translate3d(var(--_badge-offset, 0px), calc(0px - var(--_badge-offset, 0px)), 0); } :host([for][position="below-before"]:not(:dir(rtl))) { transform: translate3d(var(--_badge-offset, 0px), calc(0px - var(--_badge-offset, 0px)), 0); } :host([for][position="below-before"]:dir(rtl)) { transform: translate3d(calc(0px - var(--_badge-offset, 0px)), calc(0px - var(--_badge-offset, 0px)), 0); } :host([for][position="before"]:not(:dir(rtl))), :host([for][position="after"]:dir(rtl)) { transform: translateX(var(--_badge-offset, 0px)); } :host([for][position="before"]:dir(rtl)), :host([for][position="after"]:not(:dir(rtl))) { transform: translateX(calc(0px - var(--_badge-offset, 0px))); } :host([size="small"]) { height: var(--m3e-badge-small-size, 0.375rem); max-height: var(--m3e-badge-small-size, 0.375rem); width: var(--m3e-badge-small-size, 0.375rem); min-width: var(--m3e-badge-small-size, 0.375rem); --_badge-offset: var(--m3e-badge-small-offset, 0.375rem); } :host([size="small"]) .base { font-size: 0; } :host([size="medium"]) { height: var(--m3e-badge-medium-size, 1.375rem); min-width: var(--m3e-badge-medium-size, 1.375rem); --_badge-offset: var(--m3e-badge-small-offset, 0.75rem); } :host([size="medium"]) .base { font-size: var(--m3e-badge-medium-font-size, ${DesignToken.typescale.standard.label.small.fontSize}); font-weight: var(--m3e-badge-medium-font-weight, ${DesignToken.typescale.standard.label.small.fontWeight}); line-height: var(--m3e-badge-medium-line-height, ${DesignToken.typescale.standard.label.small.lineHeight}); letter-spacing: var(--m3e-badge-medium-tracking, ${DesignToken.typescale.standard.label.small.tracking}); } :host([size="large"]) { height: var(--m3e-badge-large-size, 1.75rem); min-width: var(--m3e-badge-large-size, 1.75rem); --_badge-offset: var(--m3e-badge-small-offset, 1rem); } :host([size="large"]) .base { font-size: var(--m3e-badge-large-font-size, ${DesignToken.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-badge-large-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-badge-large-line-height, ${DesignToken.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-badge-large-tracking, ${DesignToken.typescale.standard.label.large.tracking}); } @media (forced-colors: active) { .base { background-color: ButtonFace; color: ButtonText; outline: 1px solid ButtonText; } }`;
 __decorate([property({
   reflect: true
 })], M3eBadgeElement.prototype, "size", void 0);

package/dist/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","sources":["../../src/badge/BadgeElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { property } from \"lit/decorators.js\";\r\n\r\nimport { customElement, DesignToken, HtmlFor } from \"@m3e/web/core\";\r\nimport { M3eDirectionality } from \"@m3e/web/core/bidi\";\r\nimport { AnchorPosition, positionAnchor } from \"@m3e/web/core/anchoring\";\r\n\r\nimport { BadgeSize } from \"./BadgeSize\";\r\nimport { BadgePosition } from \"./BadgePosition\";\r\n\r\n/**\r\n * A visual indicator used to label content.\r\n *\r\n * @description\r\n * The `m3e-badge` component is a compact visual indicator used to label content. Designed\r\n * according to Material Design 3 guidelines, it can display counts, presence, or semantic\r\n * emphasis, and is attachable to icons, buttons, or other components. Badges support dynamic\r\n * sizing, color, and shape, ensuring clarity and accessibility while maintaining a consistent,\r\n * expressive appearance across surfaces.\r\n *\r\n * @example\r\n * The following example illustrates attaching a `m3e-badge` to another element using the `for` attribute.\r\n * ```html\r\n * <m3e-button id=\"button\">Button</m3e-button>\r\n * <m3e-badge for=\"button\">10</m3e-badge>\r\n * ```\r\n *\r\n * @tag m3e-badge\r\n *\r\n * @slot - Renders the content of the badge.\r\n *\r\n * @attr size - The size of the badge.\r\n *\r\n * @cssprop --m3e-badge-shape - Corner radius of the badge.\r\n * @cssprop --m3e-badge-color - Foreground color of badge content.\r\n * @cssprop --m3e-badge-container-color - Background color of the badge.\r\n * @cssprop --m3e-badge-small-size - Fixed dimensions for small badge. Used for minimal indicators (e.g. dot).\r\n * @cssprop --m3e-badge-medium-size - Height and min-width for medium badge.\r\n * @cssprop --m3e-badge-medium-font-size - Font size for medium badge label.\r\n * @cssprop --m3e-badge-medium-font-weight - Font weight for medium badge label.\r\n * @cssprop --m3e-badge-medium-line-height - Line height for medium badge label.\r\n * @cssprop --m3e-badge-medium-tracking - Letter spacing for medium badge label.\r\n * @cssprop --m3e-badge-large-size - Height and min-width for large badge.\r\n * @cssprop --m3e-badge-large-font-size - Font size for large badge label.\r\n * @cssprop --m3e-badge-large-font-weight - Font weight for large badge label.\r\n * @cssprop --m3e-badge-large-line-height - Line height for large badge label.\r\n * @cssprop --m3e-badge-large-tracking - Letter spacing for large badge label.\r\n */\r\n@customElement(\"m3e-badge\")\r\nexport class M3eBadgeElement extends HtmlFor(LitElement) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: inline-block;\r\n      vertical-align: baseline;\r\n    }\r\n    .base {\r\n      width: 100%;\r\n      height: 100%;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      text-align: center;\r\n      white-space: nowrap;\r\n      vertical-align: baseline;\r\n      box-sizing: border-box;\r\n      user-select: none;\r\n      padding: var(--_badge-padding);\r\n      border-radius: var(--m3e-badge-shape, ${DesignToken.shape.corner.full});\r\n      color: var(--m3e-badge-color, ${DesignToken.color.onError});\r\n      background-color: var(--m3e-badge-container-color, ${DesignToken.color.error});\r\n    }\r\n    :host([for]) {\r\n      position: absolute;\r\n      z-index: 1;\r\n    }\r\n    :host([for][position=\"above\"]) {\r\n      transform: translateY(var(--_badge-offset, 0px));\r\n    }\r\n    :host([for][position=\"above-after\"]:not(:dir(rtl))) {\r\n      transform: translate3d(calc(0px - var(--_badge-offset, 0px)), var(--_badge-offset, 0px), 0);\r\n    }\r\n    :host([for][position=\"above-after\"]:dir(rtl)) {\r\n      transform: translate3d(var(--_badge-offset, 0px), var(--_badge-offset, 0px), 0);\r\n    }\r\n    :host([for][position=\"above-before\"]:not(:dir(rtl))) {\r\n      transform: translate3d(var(--_badge-offset, 0px), var(--_badge-offset, 0px), 0);\r\n    }\r\n    :host([for][position=\"above-before\"]:dir(rtl)) {\r\n      transform: translate3d(calc(0px - var(--_badge-offset, 0px)), var(--_badge-offset, 0px), 0);\r\n    }\r\n    :host([for][position=\"below\"]) {\r\n      transform: translateY(calc(0px - var(--_badge-offset, 0px)));\r\n    }\r\n    :host([for][position=\"below-after\"]:not(:dir(rtl))) {\r\n      transform: translate3d(calc(0px - var(--_badge-offset, 0px)), calc(0px - var(--_badge-offset, 0px)), 0);\r\n    }\r\n    :host([for][position=\"below-after\"]:dir(rtl)) {\r\n      transform: translate3d(var(--_badge-offset, 0px), calc(0px - var(--_badge-offset, 0px)), 0);\r\n    }\r\n    :host([for][position=\"below-before\"]:not(:dir(rtl))) {\r\n      transform: translate3d(var(--_badge-offset, 0px), calc(0px - var(--_badge-offset, 0px)), 0);\r\n    }\r\n    :host([for][position=\"below-before\"]:dir(rtl)) {\r\n      transform: translate3d(calc(0px - var(--_badge-offset, 0px)), calc(0px - var(--_badge-offset, 0px)), 0);\r\n    }\r\n    :host([for][position=\"before\"]:not(:dir(rtl))),\r\n    :host([for][position=\"after\"]:dir(rtl)) {\r\n      transform: translateX(var(--_badge-offset, 0px));\r\n    }\r\n    :host([for][position=\"before\"]:dir(rtl)),\r\n    :host([for][position=\"after\"]:not(:dir(rtl))) {\r\n      transform: translateX(calc(0px - var(--_badge-offset, 0px)));\r\n    }\r\n    :host([size=\"small\"]) {\r\n      height: var(--m3e-badge-small-size, 0.375rem);\r\n      max-height: var(--m3e-badge-small-size, 0.375rem);\r\n      width: var(--m3e-badge-small-size, 0.375rem);\r\n      min-width: var(--m3e-badge-small-size, 0.375rem);\r\n      --_badge-offset: var(--m3e-badge-small-offset, 0.375rem);\r\n    }\r\n    :host([size=\"small\"]) .base {\r\n      font-size: 0;\r\n    }\r\n    :host([size=\"medium\"]) {\r\n      height: var(--m3e-badge-medium-size, 1.375rem);\r\n      min-width: var(--m3e-badge-medium-size, 1.375rem);\r\n      --_badge-offset: var(--m3e-badge-small-offset, 0.75rem);\r\n    }\r\n    :host([size=\"medium\"]) .base {\r\n      font-size: var(--m3e-badge-medium-font-size, ${DesignToken.typescale.standard.label.small.fontSize});\r\n      font-weight: var(--m3e-badge-medium-font-weight, ${DesignToken.typescale.standard.label.small.fontWeight});\r\n      line-height: var(--m3e-badge-medium-line-height, ${DesignToken.typescale.standard.label.small.lineHeight});\r\n      letter-spacing: var(--m3e-badge-medium-tracking, ${DesignToken.typescale.standard.label.small.tracking});\r\n    }\r\n    :host([size=\"large\"]) {\r\n      height: var(--m3e-badge-large-size, 1.75rem);\r\n      min-width: var(--m3e-badge-large-size, 1.75rem);\r\n      --_badge-offset: var(--m3e-badge-small-offset, 1rem);\r\n    }\r\n    :host([size=\"large\"]) .base {\r\n      font-size: var(--m3e-badge-large-font-size, ${DesignToken.typescale.standard.label.large.fontSize});\r\n      font-weight: var(--m3e-badge-large-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight});\r\n      line-height: var(--m3e-badge-large-line-height, ${DesignToken.typescale.standard.label.large.lineHeight});\r\n      letter-spacing: var(--m3e-badge-large-tracking, ${DesignToken.typescale.standard.label.large.tracking});\r\n    }\r\n    @media (forced-colors: active) {\r\n      .base {\r\n        background-color: ButtonFace;\r\n        color: ButtonText;\r\n        outline: 1px solid ButtonText;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ #directionalitySubscription?: () => void;\r\n  /** @private */ #anchorCleanup?: () => void;\r\n\r\n  /**\r\n   * The size of the badge.\r\n   * @default \"medium\"\r\n   */\r\n  @property({ reflect: true }) size: BadgeSize = \"medium\";\r\n\r\n  /**\r\n   * The position of the badge, when attached to another element.\r\n   * @default \"above-after\"\r\n   */\r\n  @property({ reflect: true }) position: BadgePosition = \"above-after\";\r\n\r\n  /** @inheritdoc */\r\n  override attach(control: HTMLElement): void {\r\n    super.attach(control);\r\n    this.#attach();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override detach(): void {\r\n    super.detach();\r\n    this.#detach();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    this.#directionalitySubscription = M3eDirectionality.observe(() => this.#attach());\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this.#directionalitySubscription?.();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override update(changedProperties: PropertyValues<this>): void {\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"position\") || changedProperties.has(\"size\") || changedProperties.has(\"htmlFor\")) {\r\n      this.#attach();\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <slot @slotchange=\"${this.#handleSlotChange}\"> <span aria-hidden=\"true\">&nbsp;</span></slot>\r\n    </div>`;\r\n  }\r\n\r\n  /** @internal */\r\n  #handleSlotChange() {\r\n    if (!this.isConnected) return;\r\n    this.style.setProperty(\r\n      \"--_badge-padding\",\r\n      this.textContent && this.textContent.length > 2\r\n        ? `0 ${this.size === \"medium\" ? \"0.25rem\" : this.size === \"large\" ? \"0.5rem\" : \"0\"}`\r\n        : \"\",\r\n    );\r\n  }\r\n\r\n  /** @private */\r\n  #detach(): void {\r\n    this.#anchorCleanup?.();\r\n    this.#anchorCleanup = undefined;\r\n  }\r\n\r\n  /** @private */\r\n  async #attach(): Promise<void> {\r\n    this.#detach();\r\n\r\n    if (!this.control) return;\r\n\r\n    let position: AnchorPosition = \"top-end\";\r\n    switch (this.position) {\r\n      case \"above\":\r\n        position = \"top\";\r\n        break;\r\n      case \"above-before\":\r\n        position = \"top-start\";\r\n        break;\r\n      case \"after\":\r\n        position = \"right\";\r\n        break;\r\n      case \"before\":\r\n        position = \"left\";\r\n        break;\r\n      case \"below\":\r\n        position = \"bottom\";\r\n        break;\r\n      case \"below-after\":\r\n        position = \"bottom-end\";\r\n        break;\r\n      case \"below-before\":\r\n        position = \"bottom-start\";\r\n        break;\r\n    }\r\n\r\n    this.#anchorCleanup = await positionAnchor(this, this.control, { position }, (x, y) => {\r\n      if (this.position.includes(\"before\") && this.position !== \"before\") {\r\n        if (M3eDirectionality.current === \"rtl\") {\r\n          x += this.clientWidth;\r\n        } else {\r\n          x -= this.clientWidth;\r\n        }\r\n      }\r\n      if (this.position.includes(\"after\") && this.position !== \"after\") {\r\n        if (M3eDirectionality.current === \"rtl\") {\r\n          x -= this.clientWidth;\r\n        } else {\r\n          x += this.clientWidth;\r\n        }\r\n      }\r\n\r\n      this.style.left = `${x}px`;\r\n      this.style.top = `${y}px`;\r\n    });\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-badge\": M3eBadgeElement;\r\n  }\r\n}\r\n"],"names":["M3eBadgeElement","HtmlFor","LitElement","constructor","_M3eBadgeElement_directionalitySubscription","set","_M3eBadgeElement_anchorCleanup","size","position","attach","control","__classPrivateFieldGet","_M3eBadgeElement_instances","_M3eBadgeElement_attach","call","detach","_M3eBadgeElement_detach","connectedCallback","__classPrivateFieldSet","M3eDirectionality","observe","disconnectedCallback","update","changedProperties","has","render","html","_M3eBadgeElement_handleSlotChange","isConnected","style","setProperty","textContent","length","undefined","positionAnchor","x","y","includes","current","clientWidth","left","top","styles","css","DesignToken","shape","corner","full","color","onError","error","typescale","standard","label","small","fontSize","fontWeight","lineHeight","tracking","large","__decorate","property","reflect","prototype","customElement"],"mappings":"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"}
+{"version":3,"file":"badge.js","sources":["../../src/badge/BadgeElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { property } from \"lit/decorators.js\";\r\n\r\nimport { customElement, DesignToken, HtmlFor, MutationController } from \"@m3e/web/core\";\r\nimport { M3eDirectionality } from \"@m3e/web/core/bidi\";\r\nimport { AnchorPosition, positionAnchor } from \"@m3e/web/core/anchoring\";\r\n\r\nimport { BadgeSize } from \"./BadgeSize\";\r\nimport { BadgePosition } from \"./BadgePosition\";\r\n\r\n/**\r\n * A visual indicator used to label content.\r\n *\r\n * @description\r\n * The `m3e-badge` component is a compact visual indicator used to label content. Designed\r\n * according to Material Design 3 guidelines, it can display counts, presence, or semantic\r\n * emphasis, and is attachable to icons, buttons, or other components. Badges support dynamic\r\n * sizing, color, and shape, ensuring clarity and accessibility while maintaining a consistent,\r\n * expressive appearance across surfaces.\r\n *\r\n * @example\r\n * The following example illustrates attaching a `m3e-badge` to another element using the `for` attribute.\r\n * ```html\r\n * <m3e-button id=\"button\">Button</m3e-button>\r\n * <m3e-badge for=\"button\">10</m3e-badge>\r\n * ```\r\n *\r\n * @tag m3e-badge\r\n *\r\n * @slot - Renders the content of the badge.\r\n *\r\n * @attr size - The size of the badge.\r\n *\r\n * @cssprop --m3e-badge-shape - Corner radius of the badge.\r\n * @cssprop --m3e-badge-color - Foreground color of badge content.\r\n * @cssprop --m3e-badge-container-color - Background color of the badge.\r\n * @cssprop --m3e-badge-small-size - Fixed dimensions for small badge. Used for minimal indicators (e.g. dot).\r\n * @cssprop --m3e-badge-medium-size - Height and min-width for medium badge.\r\n * @cssprop --m3e-badge-medium-font-size - Font size for medium badge label.\r\n * @cssprop --m3e-badge-medium-font-weight - Font weight for medium badge label.\r\n * @cssprop --m3e-badge-medium-line-height - Line height for medium badge label.\r\n * @cssprop --m3e-badge-medium-tracking - Letter spacing for medium badge label.\r\n * @cssprop --m3e-badge-large-size - Height and min-width for large badge.\r\n * @cssprop --m3e-badge-large-font-size - Font size for large badge label.\r\n * @cssprop --m3e-badge-large-font-weight - Font weight for large badge label.\r\n * @cssprop --m3e-badge-large-line-height - Line height for large badge label.\r\n * @cssprop --m3e-badge-large-tracking - Letter spacing for large badge label.\r\n */\r\n@customElement(\"m3e-badge\")\r\nexport class M3eBadgeElement extends HtmlFor(LitElement) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: inline-block;\r\n      vertical-align: baseline;\r\n    }\r\n    .base {\r\n      contain: layout style paint;\r\n      width: 100%;\r\n      height: 100%;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      text-align: center;\r\n      white-space: nowrap;\r\n      vertical-align: baseline;\r\n      box-sizing: border-box;\r\n      user-select: none;\r\n      padding: var(--_badge-padding);\r\n      border-radius: var(--m3e-badge-shape, ${DesignToken.shape.corner.full});\r\n      color: var(--m3e-badge-color, ${DesignToken.color.onError});\r\n      background-color: var(--m3e-badge-container-color, ${DesignToken.color.error});\r\n    }\r\n    :host([for]) {\r\n      position: absolute;\r\n      z-index: 1;\r\n    }\r\n    :host([for][position=\"above\"]) {\r\n      transform: translateY(var(--_badge-offset, 0px));\r\n    }\r\n    :host([for][position=\"above-after\"]:not(:dir(rtl))) {\r\n      transform: translate3d(calc(0px - var(--_badge-offset, 0px)), var(--_badge-offset, 0px), 0);\r\n    }\r\n    :host([for][position=\"above-after\"]:dir(rtl)) {\r\n      transform: translate3d(var(--_badge-offset, 0px), var(--_badge-offset, 0px), 0);\r\n    }\r\n    :host([for][position=\"above-before\"]:not(:dir(rtl))) {\r\n      transform: translate3d(var(--_badge-offset, 0px), var(--_badge-offset, 0px), 0);\r\n    }\r\n    :host([for][position=\"above-before\"]:dir(rtl)) {\r\n      transform: translate3d(calc(0px - var(--_badge-offset, 0px)), var(--_badge-offset, 0px), 0);\r\n    }\r\n    :host([for][position=\"below\"]) {\r\n      transform: translateY(calc(0px - var(--_badge-offset, 0px)));\r\n    }\r\n    :host([for][position=\"below-after\"]:not(:dir(rtl))) {\r\n      transform: translate3d(calc(0px - var(--_badge-offset, 0px)), calc(0px - var(--_badge-offset, 0px)), 0);\r\n    }\r\n    :host([for][position=\"below-after\"]:dir(rtl)) {\r\n      transform: translate3d(var(--_badge-offset, 0px), calc(0px - var(--_badge-offset, 0px)), 0);\r\n    }\r\n    :host([for][position=\"below-before\"]:not(:dir(rtl))) {\r\n      transform: translate3d(var(--_badge-offset, 0px), calc(0px - var(--_badge-offset, 0px)), 0);\r\n    }\r\n    :host([for][position=\"below-before\"]:dir(rtl)) {\r\n      transform: translate3d(calc(0px - var(--_badge-offset, 0px)), calc(0px - var(--_badge-offset, 0px)), 0);\r\n    }\r\n    :host([for][position=\"before\"]:not(:dir(rtl))),\r\n    :host([for][position=\"after\"]:dir(rtl)) {\r\n      transform: translateX(var(--_badge-offset, 0px));\r\n    }\r\n    :host([for][position=\"before\"]:dir(rtl)),\r\n    :host([for][position=\"after\"]:not(:dir(rtl))) {\r\n      transform: translateX(calc(0px - var(--_badge-offset, 0px)));\r\n    }\r\n    :host([size=\"small\"]) {\r\n      height: var(--m3e-badge-small-size, 0.375rem);\r\n      max-height: var(--m3e-badge-small-size, 0.375rem);\r\n      width: var(--m3e-badge-small-size, 0.375rem);\r\n      min-width: var(--m3e-badge-small-size, 0.375rem);\r\n      --_badge-offset: var(--m3e-badge-small-offset, 0.375rem);\r\n    }\r\n    :host([size=\"small\"]) .base {\r\n      font-size: 0;\r\n    }\r\n    :host([size=\"medium\"]) {\r\n      height: var(--m3e-badge-medium-size, 1.375rem);\r\n      min-width: var(--m3e-badge-medium-size, 1.375rem);\r\n      --_badge-offset: var(--m3e-badge-small-offset, 0.75rem);\r\n    }\r\n    :host([size=\"medium\"]) .base {\r\n      font-size: var(--m3e-badge-medium-font-size, ${DesignToken.typescale.standard.label.small.fontSize});\r\n      font-weight: var(--m3e-badge-medium-font-weight, ${DesignToken.typescale.standard.label.small.fontWeight});\r\n      line-height: var(--m3e-badge-medium-line-height, ${DesignToken.typescale.standard.label.small.lineHeight});\r\n      letter-spacing: var(--m3e-badge-medium-tracking, ${DesignToken.typescale.standard.label.small.tracking});\r\n    }\r\n    :host([size=\"large\"]) {\r\n      height: var(--m3e-badge-large-size, 1.75rem);\r\n      min-width: var(--m3e-badge-large-size, 1.75rem);\r\n      --_badge-offset: var(--m3e-badge-small-offset, 1rem);\r\n    }\r\n    :host([size=\"large\"]) .base {\r\n      font-size: var(--m3e-badge-large-font-size, ${DesignToken.typescale.standard.label.large.fontSize});\r\n      font-weight: var(--m3e-badge-large-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight});\r\n      line-height: var(--m3e-badge-large-line-height, ${DesignToken.typescale.standard.label.large.lineHeight});\r\n      letter-spacing: var(--m3e-badge-large-tracking, ${DesignToken.typescale.standard.label.large.tracking});\r\n    }\r\n    @media (forced-colors: active) {\r\n      .base {\r\n        background-color: ButtonFace;\r\n        color: ButtonText;\r\n        outline: 1px solid ButtonText;\r\n      }\r\n    }\r\n  `;\r\n\r\n  constructor() {\r\n    super();\r\n\r\n    new MutationController(this, {\r\n      config: {\r\n        childList: true,\r\n        subtree: true,\r\n        characterData: true,\r\n        attributes: false,\r\n      },\r\n      callback: () => this.#updatePadding(),\r\n    });\r\n  }\r\n\r\n  /** @private */ #directionalitySubscription?: () => void;\r\n  /** @private */ #anchorCleanup?: () => void;\r\n  /** @private */ #anchorLastPosition?: { x: number; y: number };\r\n\r\n  /**\r\n   * The size of the badge.\r\n   * @default \"medium\"\r\n   */\r\n  @property({ reflect: true }) size: BadgeSize = \"medium\";\r\n\r\n  /**\r\n   * The position of the badge, when attached to another element.\r\n   * @default \"above-after\"\r\n   */\r\n  @property({ reflect: true }) position: BadgePosition = \"above-after\";\r\n\r\n  /** @inheritdoc */\r\n  override attach(control: HTMLElement): void {\r\n    super.attach(control);\r\n    this.#attach();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override detach(): void {\r\n    super.detach();\r\n    this.#detach();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    this.#directionalitySubscription = M3eDirectionality.observe(() => this.#attach());\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this.#directionalitySubscription?.();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override update(changedProperties: PropertyValues<this>): void {\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"position\") || changedProperties.has(\"size\") || changedProperties.has(\"htmlFor\")) {\r\n      this.#attach();\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <slot><span aria-hidden=\"true\">&nbsp;</span></slot>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #updatePadding() {\r\n    if (!this.isConnected) return;\r\n    this.style.setProperty(\r\n      \"--_badge-padding\",\r\n      this.textContent && this.textContent.length > 2\r\n        ? `0 ${this.size === \"medium\" ? \"0.25rem\" : this.size === \"large\" ? \"0.5rem\" : \"0\"}`\r\n        : \"\",\r\n    );\r\n  }\r\n\r\n  /** @private */\r\n  #detach(): void {\r\n    this.#anchorCleanup?.();\r\n    this.#anchorCleanup = undefined;\r\n    this.#anchorLastPosition = undefined;\r\n  }\r\n\r\n  /** @private */\r\n  async #attach(): Promise<void> {\r\n    this.#detach();\r\n\r\n    if (!this.control) return;\r\n\r\n    let position: AnchorPosition = \"top-end\";\r\n    switch (this.position) {\r\n      case \"above\":\r\n        position = \"top\";\r\n        break;\r\n      case \"above-before\":\r\n        position = \"top-start\";\r\n        break;\r\n      case \"after\":\r\n        position = \"right\";\r\n        break;\r\n      case \"before\":\r\n        position = \"left\";\r\n        break;\r\n      case \"below\":\r\n        position = \"bottom\";\r\n        break;\r\n      case \"below-after\":\r\n        position = \"bottom-end\";\r\n        break;\r\n      case \"below-before\":\r\n        position = \"bottom-start\";\r\n        break;\r\n    }\r\n\r\n    this.#anchorCleanup = await positionAnchor(this, this.control, { position }, (x, y) => {\r\n      if (this.position.includes(\"before\") && this.position !== \"before\") {\r\n        if (M3eDirectionality.current === \"rtl\") {\r\n          x += this.clientWidth;\r\n        } else {\r\n          x -= this.clientWidth;\r\n        }\r\n      }\r\n      if (this.position.includes(\"after\") && this.position !== \"after\") {\r\n        if (M3eDirectionality.current === \"rtl\") {\r\n          x -= this.clientWidth;\r\n        } else {\r\n          x += this.clientWidth;\r\n        }\r\n      }\r\n\r\n      if (this.#anchorLastPosition?.x !== x) {\r\n        this.style.left = `${x}px`;\r\n      }\r\n\r\n      if (this.#anchorLastPosition?.y !== y) {\r\n        this.style.top = `${y}px`;\r\n      }\r\n\r\n      this.#anchorLastPosition = { x, y };\r\n    });\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-badge\": M3eBadgeElement;\r\n  }\r\n}\r\n"],"names":["M3eBadgeElement","HtmlFor","LitElement","constructor","_M3eBadgeElement_directionalitySubscription","set","_M3eBadgeElement_anchorCleanup","_M3eBadgeElement_anchorLastPosition","size","position","MutationController","config","childList","subtree","characterData","attributes","callback","__classPrivateFieldGet","_M3eBadgeElement_instances","_M3eBadgeElement_updatePadding","call","attach","control","_M3eBadgeElement_attach","detach","_M3eBadgeElement_detach","connectedCallback","__classPrivateFieldSet","M3eDirectionality","observe","disconnectedCallback","update","changedProperties","has","render","html","isConnected","style","setProperty","textContent","length","undefined","positionAnchor","x","y","includes","current","clientWidth","left","top","styles","css","DesignToken","shape","corner","full","color","onError","error","typescale","standard","label","small","fontSize","fontWeight","lineHeight","tracking","large","__decorate","property","reflect","prototype","customElement"],"mappings":"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"}

package/dist/badge.min.js

@@ -3,5 +3,5 @@
  * 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 a}from"tslib";import{LitElement as r,html as o,css as s}from"lit";import{property as i}from"lit/decorators.js";import{HtmlFor as l,DesignToken as n,customElement as d}from"@m3e/web/core";import{M3eDirectionality as f}from"@m3e/web/core/bidi";import{positionAnchor as b}from"@m3e/web/core/anchoring";var c,h,m,p,g,v;let x=class extends(l(r)){constructor(){super(...arguments),c.add(this),h.set(this,void 0),m.set(this,void 0),this.size="medium",this.position="above-after"}attach(t){super.attach(t),e(this,c,"m",v).call(this)}detach(){super.detach(),e(this,c,"m",g).call(this)}connectedCallback(){super.connectedCallback(),t(this,h,f.observe(()=>e(this,c,"m",v).call(this)),"f")}disconnectedCallback(){super.disconnectedCallback(),e(this,h,"f")?.call(this)}update(t){super.update(t),(t.has("position")||t.has("size")||t.has("htmlFor"))&&e(this,c,"m",v).call(this)}render(){return o`<div class="base"><slot @slotchange="${e(this,c,"m",p)}"><span aria-hidden="true">&nbsp;</span></slot></div>`}};h=new WeakMap,m=new WeakMap,c=new WeakSet,p=function(){this.isConnected&&this.style.setProperty("--_badge-padding",this.textContent&&this.textContent.length>2?"0 "+("medium"===this.size?"0.25rem":"large"===this.size?"0.5rem":"0"):"")},g=function(){e(this,m,"f")?.call(this),t(this,m,void 0,"f")},v=async function(){if(e(this,c,"m",g).call(this),!this.control)return;let a="top-end";switch(this.position){case"above":a="top";break;case"above-before":a="top-start";break;case"after":a="right";break;case"before":a="left";break;case"below":a="bottom";break;case"below-after":a="bottom-end";break;case"below-before":a="bottom-start"}t(this,m,await b(this,this.control,{position:a},(e,t)=>{this.position.includes("before")&&"before"!==this.position&&("rtl"===f.current?e+=this.clientWidth:e-=this.clientWidth),this.position.includes("after")&&"after"!==this.position&&("rtl"===f.current?e-=this.clientWidth:e+=this.clientWidth),this.style.left=`${e}px`,this.style.top=`${t}px`}),"f")},x.styles=s`:host { display: inline-block; vertical-align: baseline; } .base { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; white-space: nowrap; vertical-align: baseline; box-sizing: border-box; user-select: none; padding: var(--_badge-padding); border-radius: var(--m3e-badge-shape, ${n.shape.corner.full}); color: var(--m3e-badge-color, ${n.color.onError}); background-color: var(--m3e-badge-container-color, ${n.color.error}); } :host([for]) { position: absolute; z-index: 1; } :host([for][position="above"]) { transform: translateY(var(--_badge-offset, 0px)); } :host([for][position="above-after"]:not(:dir(rtl))) { transform: translate3d(calc(0px - var(--_badge-offset, 0px)), var(--_badge-offset, 0px), 0); } :host([for][position="above-after"]:dir(rtl)) { transform: translate3d(var(--_badge-offset, 0px), var(--_badge-offset, 0px), 0); } :host([for][position="above-before"]:not(:dir(rtl))) { transform: translate3d(var(--_badge-offset, 0px), var(--_badge-offset, 0px), 0); } :host([for][position="above-before"]:dir(rtl)) { transform: translate3d(calc(0px - var(--_badge-offset, 0px)), var(--_badge-offset, 0px), 0); } :host([for][position="below"]) { transform: translateY(calc(0px - var(--_badge-offset, 0px))); } :host([for][position="below-after"]:not(:dir(rtl))) { transform: translate3d(calc(0px - var(--_badge-offset, 0px)), calc(0px - var(--_badge-offset, 0px)), 0); } :host([for][position="below-after"]:dir(rtl)) { transform: translate3d(var(--_badge-offset, 0px), calc(0px - var(--_badge-offset, 0px)), 0); } :host([for][position="below-before"]:not(:dir(rtl))) { transform: translate3d(var(--_badge-offset, 0px), calc(0px - var(--_badge-offset, 0px)), 0); } :host([for][position="below-before"]:dir(rtl)) { transform: translate3d(calc(0px - var(--_badge-offset, 0px)), calc(0px - var(--_badge-offset, 0px)), 0); } :host([for][position="before"]:not(:dir(rtl))), :host([for][position="after"]:dir(rtl)) { transform: translateX(var(--_badge-offset, 0px)); } :host([for][position="before"]:dir(rtl)), :host([for][position="after"]:not(:dir(rtl))) { transform: translateX(calc(0px - var(--_badge-offset, 0px))); } :host([size="small"]) { height: var(--m3e-badge-small-size, 0.375rem); max-height: var(--m3e-badge-small-size, 0.375rem); width: var(--m3e-badge-small-size, 0.375rem); min-width: var(--m3e-badge-small-size, 0.375rem); --_badge-offset: var(--m3e-badge-small-offset, 0.375rem); } :host([size="small"]) .base { font-size: 0; } :host([size="medium"]) { height: var(--m3e-badge-medium-size, 1.375rem); min-width: var(--m3e-badge-medium-size, 1.375rem); --_badge-offset: var(--m3e-badge-small-offset, 0.75rem); } :host([size="medium"]) .base { font-size: var(--m3e-badge-medium-font-size, ${n.typescale.standard.label.small.fontSize}); font-weight: var(--m3e-badge-medium-font-weight, ${n.typescale.standard.label.small.fontWeight}); line-height: var(--m3e-badge-medium-line-height, ${n.typescale.standard.label.small.lineHeight}); letter-spacing: var(--m3e-badge-medium-tracking, ${n.typescale.standard.label.small.tracking}); } :host([size="large"]) { height: var(--m3e-badge-large-size, 1.75rem); min-width: var(--m3e-badge-large-size, 1.75rem); --_badge-offset: var(--m3e-badge-small-offset, 1rem); } :host([size="large"]) .base { font-size: var(--m3e-badge-large-font-size, ${n.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-badge-large-font-weight, ${n.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-badge-large-line-height, ${n.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-badge-large-tracking, ${n.typescale.standard.label.large.tracking}); } @media (forced-colors: active) { .base { background-color: ButtonFace; color: ButtonText; outline: 1px solid ButtonText; } }`,a([i({reflect:!0})],x.prototype,"size",void 0),a([i({reflect:!0})],x.prototype,"position",void 0),x=a([d("m3e-badge")],x);export{x as M3eBadgeElement};
+import{__classPrivateFieldGet as e,__classPrivateFieldSet as t,__decorate as a}from"tslib";import{LitElement as r,html as s,css as o}from"lit";import{property as i}from"lit/decorators.js";import{HtmlFor as l,MutationController as n,DesignToken as d,customElement as f}from"@m3e/web/core";import{M3eDirectionality as h}from"@m3e/web/core/bidi";import{positionAnchor as c}from"@m3e/web/core/anchoring";var b,m,p,g,v,x,u;let w=class extends(l(r)){constructor(){super(),b.add(this),m.set(this,void 0),p.set(this,void 0),g.set(this,void 0),this.size="medium",this.position="above-after",new n(this,{config:{childList:!0,subtree:!0,characterData:!0,attributes:!1},callback:()=>e(this,b,"m",v).call(this)})}attach(t){super.attach(t),e(this,b,"m",u).call(this)}detach(){super.detach(),e(this,b,"m",x).call(this)}connectedCallback(){super.connectedCallback(),t(this,m,h.observe(()=>e(this,b,"m",u).call(this)),"f")}disconnectedCallback(){super.disconnectedCallback(),e(this,m,"f")?.call(this)}update(t){super.update(t),(t.has("position")||t.has("size")||t.has("htmlFor"))&&e(this,b,"m",u).call(this)}render(){return s`<div class="base"><slot><span aria-hidden="true">&nbsp;</span></slot></div>`}};m=new WeakMap,p=new WeakMap,g=new WeakMap,b=new WeakSet,v=function(){this.isConnected&&this.style.setProperty("--_badge-padding",this.textContent&&this.textContent.length>2?"0 "+("medium"===this.size?"0.25rem":"large"===this.size?"0.5rem":"0"):"")},x=function(){e(this,p,"f")?.call(this),t(this,p,void 0,"f"),t(this,g,void 0,"f")},u=async function(){if(e(this,b,"m",x).call(this),!this.control)return;let a="top-end";switch(this.position){case"above":a="top";break;case"above-before":a="top-start";break;case"after":a="right";break;case"before":a="left";break;case"below":a="bottom";break;case"below-after":a="bottom-end";break;case"below-before":a="bottom-start"}t(this,p,await c(this,this.control,{position:a},(a,r)=>{this.position.includes("before")&&"before"!==this.position&&("rtl"===h.current?a+=this.clientWidth:a-=this.clientWidth),this.position.includes("after")&&"after"!==this.position&&("rtl"===h.current?a-=this.clientWidth:a+=this.clientWidth),e(this,g,"f")?.x!==a&&(this.style.left=`${a}px`),e(this,g,"f")?.y!==r&&(this.style.top=`${r}px`),t(this,g,{x:a,y:r},"f")}),"f")},w.styles=o`:host { display: inline-block; vertical-align: baseline; } .base { contain: layout style paint; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; white-space: nowrap; vertical-align: baseline; box-sizing: border-box; user-select: none; padding: var(--_badge-padding); border-radius: var(--m3e-badge-shape, ${d.shape.corner.full}); color: var(--m3e-badge-color, ${d.color.onError}); background-color: var(--m3e-badge-container-color, ${d.color.error}); } :host([for]) { position: absolute; z-index: 1; } :host([for][position="above"]) { transform: translateY(var(--_badge-offset, 0px)); } :host([for][position="above-after"]:not(:dir(rtl))) { transform: translate3d(calc(0px - var(--_badge-offset, 0px)), var(--_badge-offset, 0px), 0); } :host([for][position="above-after"]:dir(rtl)) { transform: translate3d(var(--_badge-offset, 0px), var(--_badge-offset, 0px), 0); } :host([for][position="above-before"]:not(:dir(rtl))) { transform: translate3d(var(--_badge-offset, 0px), var(--_badge-offset, 0px), 0); } :host([for][position="above-before"]:dir(rtl)) { transform: translate3d(calc(0px - var(--_badge-offset, 0px)), var(--_badge-offset, 0px), 0); } :host([for][position="below"]) { transform: translateY(calc(0px - var(--_badge-offset, 0px))); } :host([for][position="below-after"]:not(:dir(rtl))) { transform: translate3d(calc(0px - var(--_badge-offset, 0px)), calc(0px - var(--_badge-offset, 0px)), 0); } :host([for][position="below-after"]:dir(rtl)) { transform: translate3d(var(--_badge-offset, 0px), calc(0px - var(--_badge-offset, 0px)), 0); } :host([for][position="below-before"]:not(:dir(rtl))) { transform: translate3d(var(--_badge-offset, 0px), calc(0px - var(--_badge-offset, 0px)), 0); } :host([for][position="below-before"]:dir(rtl)) { transform: translate3d(calc(0px - var(--_badge-offset, 0px)), calc(0px - var(--_badge-offset, 0px)), 0); } :host([for][position="before"]:not(:dir(rtl))), :host([for][position="after"]:dir(rtl)) { transform: translateX(var(--_badge-offset, 0px)); } :host([for][position="before"]:dir(rtl)), :host([for][position="after"]:not(:dir(rtl))) { transform: translateX(calc(0px - var(--_badge-offset, 0px))); } :host([size="small"]) { height: var(--m3e-badge-small-size, 0.375rem); max-height: var(--m3e-badge-small-size, 0.375rem); width: var(--m3e-badge-small-size, 0.375rem); min-width: var(--m3e-badge-small-size, 0.375rem); --_badge-offset: var(--m3e-badge-small-offset, 0.375rem); } :host([size="small"]) .base { font-size: 0; } :host([size="medium"]) { height: var(--m3e-badge-medium-size, 1.375rem); min-width: var(--m3e-badge-medium-size, 1.375rem); --_badge-offset: var(--m3e-badge-small-offset, 0.75rem); } :host([size="medium"]) .base { font-size: var(--m3e-badge-medium-font-size, ${d.typescale.standard.label.small.fontSize}); font-weight: var(--m3e-badge-medium-font-weight, ${d.typescale.standard.label.small.fontWeight}); line-height: var(--m3e-badge-medium-line-height, ${d.typescale.standard.label.small.lineHeight}); letter-spacing: var(--m3e-badge-medium-tracking, ${d.typescale.standard.label.small.tracking}); } :host([size="large"]) { height: var(--m3e-badge-large-size, 1.75rem); min-width: var(--m3e-badge-large-size, 1.75rem); --_badge-offset: var(--m3e-badge-small-offset, 1rem); } :host([size="large"]) .base { font-size: var(--m3e-badge-large-font-size, ${d.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-badge-large-font-weight, ${d.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-badge-large-line-height, ${d.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-badge-large-tracking, ${d.typescale.standard.label.large.tracking}); } @media (forced-colors: active) { .base { background-color: ButtonFace; color: ButtonText; outline: 1px solid ButtonText; } }`,a([i({reflect:!0})],w.prototype,"size",void 0),a([i({reflect:!0})],w.prototype,"position",void 0),w=a([f("m3e-badge")],w);export{w as M3eBadgeElement};
 //# sourceMappingURL=badge.min.js.map

package/dist/badge.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.min.js","sources":["../../src/badge/BadgeElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { property } from \"lit/decorators.js\";\r\n\r\nimport { customElement, DesignToken, HtmlFor } from \"@m3e/web/core\";\r\nimport { M3eDirectionality } from \"@m3e/web/core/bidi\";\r\nimport { AnchorPosition, positionAnchor } from \"@m3e/web/core/anchoring\";\r\n\r\nimport { BadgeSize } from \"./BadgeSize\";\r\nimport { BadgePosition } from \"./BadgePosition\";\r\n\r\n/**\r\n * A visual indicator used to label content.\r\n *\r\n * @description\r\n * The `m3e-badge` component is a compact visual indicator used to label content. Designed\r\n * according to Material Design 3 guidelines, it can display counts, presence, or semantic\r\n * emphasis, and is attachable to icons, buttons, or other components. Badges support dynamic\r\n * sizing, color, and shape, ensuring clarity and accessibility while maintaining a consistent,\r\n * expressive appearance across surfaces.\r\n *\r\n * @example\r\n * The following example illustrates attaching a `m3e-badge` to another element using the `for` attribute.\r\n * ```html\r\n * <m3e-button id=\"button\">Button</m3e-button>\r\n * <m3e-badge for=\"button\">10</m3e-badge>\r\n * ```\r\n *\r\n * @tag m3e-badge\r\n *\r\n * @slot - Renders the content of the badge.\r\n *\r\n * @attr size - The size of the badge.\r\n *\r\n * @cssprop --m3e-badge-shape - Corner radius of the badge.\r\n * @cssprop --m3e-badge-color - Foreground color of badge content.\r\n * @cssprop --m3e-badge-container-color - Background color of the badge.\r\n * @cssprop --m3e-badge-small-size - Fixed dimensions for small badge. Used for minimal indicators (e.g. dot).\r\n * @cssprop --m3e-badge-medium-size - Height and min-width for medium badge.\r\n * @cssprop --m3e-badge-medium-font-size - Font size for medium badge label.\r\n * @cssprop --m3e-badge-medium-font-weight - Font weight for medium badge label.\r\n * @cssprop --m3e-badge-medium-line-height - Line height for medium badge label.\r\n * @cssprop --m3e-badge-medium-tracking - Letter spacing for medium badge label.\r\n * @cssprop --m3e-badge-large-size - Height and min-width for large badge.\r\n * @cssprop --m3e-badge-large-font-size - Font size for large badge label.\r\n * @cssprop --m3e-badge-large-font-weight - Font weight for large badge label.\r\n * @cssprop --m3e-badge-large-line-height - Line height for large badge label.\r\n * @cssprop --m3e-badge-large-tracking - Letter spacing for large badge label.\r\n */\r\n@customElement(\"m3e-badge\")\r\nexport class M3eBadgeElement extends HtmlFor(LitElement) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: inline-block;\r\n      vertical-align: baseline;\r\n    }\r\n    .base {\r\n      width: 100%;\r\n      height: 100%;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      text-align: center;\r\n      white-space: nowrap;\r\n      vertical-align: baseline;\r\n      box-sizing: border-box;\r\n      user-select: none;\r\n      padding: var(--_badge-padding);\r\n      border-radius: var(--m3e-badge-shape, ${DesignToken.shape.corner.full});\r\n      color: var(--m3e-badge-color, ${DesignToken.color.onError});\r\n      background-color: var(--m3e-badge-container-color, ${DesignToken.color.error});\r\n    }\r\n    :host([for]) {\r\n      position: absolute;\r\n      z-index: 1;\r\n    }\r\n    :host([for][position=\"above\"]) {\r\n      transform: translateY(var(--_badge-offset, 0px));\r\n    }\r\n    :host([for][position=\"above-after\"]:not(:dir(rtl))) {\r\n      transform: translate3d(calc(0px - var(--_badge-offset, 0px)), var(--_badge-offset, 0px), 0);\r\n    }\r\n    :host([for][position=\"above-after\"]:dir(rtl)) {\r\n      transform: translate3d(var(--_badge-offset, 0px), var(--_badge-offset, 0px), 0);\r\n    }\r\n    :host([for][position=\"above-before\"]:not(:dir(rtl))) {\r\n      transform: translate3d(var(--_badge-offset, 0px), var(--_badge-offset, 0px), 0);\r\n    }\r\n    :host([for][position=\"above-before\"]:dir(rtl)) {\r\n      transform: translate3d(calc(0px - var(--_badge-offset, 0px)), var(--_badge-offset, 0px), 0);\r\n    }\r\n    :host([for][position=\"below\"]) {\r\n      transform: translateY(calc(0px - var(--_badge-offset, 0px)));\r\n    }\r\n    :host([for][position=\"below-after\"]:not(:dir(rtl))) {\r\n      transform: translate3d(calc(0px - var(--_badge-offset, 0px)), calc(0px - var(--_badge-offset, 0px)), 0);\r\n    }\r\n    :host([for][position=\"below-after\"]:dir(rtl)) {\r\n      transform: translate3d(var(--_badge-offset, 0px), calc(0px - var(--_badge-offset, 0px)), 0);\r\n    }\r\n    :host([for][position=\"below-before\"]:not(:dir(rtl))) {\r\n      transform: translate3d(var(--_badge-offset, 0px), calc(0px - var(--_badge-offset, 0px)), 0);\r\n    }\r\n    :host([for][position=\"below-before\"]:dir(rtl)) {\r\n      transform: translate3d(calc(0px - var(--_badge-offset, 0px)), calc(0px - var(--_badge-offset, 0px)), 0);\r\n    }\r\n    :host([for][position=\"before\"]:not(:dir(rtl))),\r\n    :host([for][position=\"after\"]:dir(rtl)) {\r\n      transform: translateX(var(--_badge-offset, 0px));\r\n    }\r\n    :host([for][position=\"before\"]:dir(rtl)),\r\n    :host([for][position=\"after\"]:not(:dir(rtl))) {\r\n      transform: translateX(calc(0px - var(--_badge-offset, 0px)));\r\n    }\r\n    :host([size=\"small\"]) {\r\n      height: var(--m3e-badge-small-size, 0.375rem);\r\n      max-height: var(--m3e-badge-small-size, 0.375rem);\r\n      width: var(--m3e-badge-small-size, 0.375rem);\r\n      min-width: var(--m3e-badge-small-size, 0.375rem);\r\n      --_badge-offset: var(--m3e-badge-small-offset, 0.375rem);\r\n    }\r\n    :host([size=\"small\"]) .base {\r\n      font-size: 0;\r\n    }\r\n    :host([size=\"medium\"]) {\r\n      height: var(--m3e-badge-medium-size, 1.375rem);\r\n      min-width: var(--m3e-badge-medium-size, 1.375rem);\r\n      --_badge-offset: var(--m3e-badge-small-offset, 0.75rem);\r\n    }\r\n    :host([size=\"medium\"]) .base {\r\n      font-size: var(--m3e-badge-medium-font-size, ${DesignToken.typescale.standard.label.small.fontSize});\r\n      font-weight: var(--m3e-badge-medium-font-weight, ${DesignToken.typescale.standard.label.small.fontWeight});\r\n      line-height: var(--m3e-badge-medium-line-height, ${DesignToken.typescale.standard.label.small.lineHeight});\r\n      letter-spacing: var(--m3e-badge-medium-tracking, ${DesignToken.typescale.standard.label.small.tracking});\r\n    }\r\n    :host([size=\"large\"]) {\r\n      height: var(--m3e-badge-large-size, 1.75rem);\r\n      min-width: var(--m3e-badge-large-size, 1.75rem);\r\n      --_badge-offset: var(--m3e-badge-small-offset, 1rem);\r\n    }\r\n    :host([size=\"large\"]) .base {\r\n      font-size: var(--m3e-badge-large-font-size, ${DesignToken.typescale.standard.label.large.fontSize});\r\n      font-weight: var(--m3e-badge-large-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight});\r\n      line-height: var(--m3e-badge-large-line-height, ${DesignToken.typescale.standard.label.large.lineHeight});\r\n      letter-spacing: var(--m3e-badge-large-tracking, ${DesignToken.typescale.standard.label.large.tracking});\r\n    }\r\n    @media (forced-colors: active) {\r\n      .base {\r\n        background-color: ButtonFace;\r\n        color: ButtonText;\r\n        outline: 1px solid ButtonText;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ #directionalitySubscription?: () => void;\r\n  /** @private */ #anchorCleanup?: () => void;\r\n\r\n  /**\r\n   * The size of the badge.\r\n   * @default \"medium\"\r\n   */\r\n  @property({ reflect: true }) size: BadgeSize = \"medium\";\r\n\r\n  /**\r\n   * The position of the badge, when attached to another element.\r\n   * @default \"above-after\"\r\n   */\r\n  @property({ reflect: true }) position: BadgePosition = \"above-after\";\r\n\r\n  /** @inheritdoc */\r\n  override attach(control: HTMLElement): void {\r\n    super.attach(control);\r\n    this.#attach();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override detach(): void {\r\n    super.detach();\r\n    this.#detach();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    this.#directionalitySubscription = M3eDirectionality.observe(() => this.#attach());\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this.#directionalitySubscription?.();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override update(changedProperties: PropertyValues<this>): void {\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"position\") || changedProperties.has(\"size\") || changedProperties.has(\"htmlFor\")) {\r\n      this.#attach();\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <slot @slotchange=\"${this.#handleSlotChange}\"> <span aria-hidden=\"true\">&nbsp;</span></slot>\r\n    </div>`;\r\n  }\r\n\r\n  /** @internal */\r\n  #handleSlotChange() {\r\n    if (!this.isConnected) return;\r\n    this.style.setProperty(\r\n      \"--_badge-padding\",\r\n      this.textContent && this.textContent.length > 2\r\n        ? `0 ${this.size === \"medium\" ? \"0.25rem\" : this.size === \"large\" ? \"0.5rem\" : \"0\"}`\r\n        : \"\",\r\n    );\r\n  }\r\n\r\n  /** @private */\r\n  #detach(): void {\r\n    this.#anchorCleanup?.();\r\n    this.#anchorCleanup = undefined;\r\n  }\r\n\r\n  /** @private */\r\n  async #attach(): Promise<void> {\r\n    this.#detach();\r\n\r\n    if (!this.control) return;\r\n\r\n    let position: AnchorPosition = \"top-end\";\r\n    switch (this.position) {\r\n      case \"above\":\r\n        position = \"top\";\r\n        break;\r\n      case \"above-before\":\r\n        position = \"top-start\";\r\n        break;\r\n      case \"after\":\r\n        position = \"right\";\r\n        break;\r\n      case \"before\":\r\n        position = \"left\";\r\n        break;\r\n      case \"below\":\r\n        position = \"bottom\";\r\n        break;\r\n      case \"below-after\":\r\n        position = \"bottom-end\";\r\n        break;\r\n      case \"below-before\":\r\n        position = \"bottom-start\";\r\n        break;\r\n    }\r\n\r\n    this.#anchorCleanup = await positionAnchor(this, this.control, { position }, (x, y) => {\r\n      if (this.position.includes(\"before\") && this.position !== \"before\") {\r\n        if (M3eDirectionality.current === \"rtl\") {\r\n          x += this.clientWidth;\r\n        } else {\r\n          x -= this.clientWidth;\r\n        }\r\n      }\r\n      if (this.position.includes(\"after\") && this.position !== \"after\") {\r\n        if (M3eDirectionality.current === \"rtl\") {\r\n          x -= this.clientWidth;\r\n        } else {\r\n          x += this.clientWidth;\r\n        }\r\n      }\r\n\r\n      this.style.left = `${x}px`;\r\n      this.style.top = `${y}px`;\r\n    });\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-badge\": M3eBadgeElement;\r\n  }\r\n}\r\n"],"names":["M3eBadgeElement","HtmlFor","LitElement","constructor","_M3eBadgeElement_directionalitySubscription","set","this","_M3eBadgeElement_anchorCleanup","size","position","attach","control","super","__classPrivateFieldGet","_M3eBadgeElement_instances","_M3eBadgeElement_attach","call","detach","_M3eBadgeElement_detach","connectedCallback","__classPrivateFieldSet","M3eDirectionality","observe","disconnectedCallback","update","changedProperties","has","render","html","_M3eBadgeElement_handleSlotChange","isConnected","style","setProperty","textContent","length","undefined","async","positionAnchor","x","y","includes","current","clientWidth","left","top","styles","css","DesignToken","shape","corner","full","color","onError","error","typescale","standard","label","small","fontSize","fontWeight","lineHeight","tracking","large","__decorate","property","reflect","prototype","customElement"],"mappings":"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"}
+{"version":3,"file":"badge.min.js","sources":["../../src/badge/BadgeElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { property } from \"lit/decorators.js\";\r\n\r\nimport { customElement, DesignToken, HtmlFor, MutationController } from \"@m3e/web/core\";\r\nimport { M3eDirectionality } from \"@m3e/web/core/bidi\";\r\nimport { AnchorPosition, positionAnchor } from \"@m3e/web/core/anchoring\";\r\n\r\nimport { BadgeSize } from \"./BadgeSize\";\r\nimport { BadgePosition } from \"./BadgePosition\";\r\n\r\n/**\r\n * A visual indicator used to label content.\r\n *\r\n * @description\r\n * The `m3e-badge` component is a compact visual indicator used to label content. Designed\r\n * according to Material Design 3 guidelines, it can display counts, presence, or semantic\r\n * emphasis, and is attachable to icons, buttons, or other components. Badges support dynamic\r\n * sizing, color, and shape, ensuring clarity and accessibility while maintaining a consistent,\r\n * expressive appearance across surfaces.\r\n *\r\n * @example\r\n * The following example illustrates attaching a `m3e-badge` to another element using the `for` attribute.\r\n * ```html\r\n * <m3e-button id=\"button\">Button</m3e-button>\r\n * <m3e-badge for=\"button\">10</m3e-badge>\r\n * ```\r\n *\r\n * @tag m3e-badge\r\n *\r\n * @slot - Renders the content of the badge.\r\n *\r\n * @attr size - The size of the badge.\r\n *\r\n * @cssprop --m3e-badge-shape - Corner radius of the badge.\r\n * @cssprop --m3e-badge-color - Foreground color of badge content.\r\n * @cssprop --m3e-badge-container-color - Background color of the badge.\r\n * @cssprop --m3e-badge-small-size - Fixed dimensions for small badge. Used for minimal indicators (e.g. dot).\r\n * @cssprop --m3e-badge-medium-size - Height and min-width for medium badge.\r\n * @cssprop --m3e-badge-medium-font-size - Font size for medium badge label.\r\n * @cssprop --m3e-badge-medium-font-weight - Font weight for medium badge label.\r\n * @cssprop --m3e-badge-medium-line-height - Line height for medium badge label.\r\n * @cssprop --m3e-badge-medium-tracking - Letter spacing for medium badge label.\r\n * @cssprop --m3e-badge-large-size - Height and min-width for large badge.\r\n * @cssprop --m3e-badge-large-font-size - Font size for large badge label.\r\n * @cssprop --m3e-badge-large-font-weight - Font weight for large badge label.\r\n * @cssprop --m3e-badge-large-line-height - Line height for large badge label.\r\n * @cssprop --m3e-badge-large-tracking - Letter spacing for large badge label.\r\n */\r\n@customElement(\"m3e-badge\")\r\nexport class M3eBadgeElement extends HtmlFor(LitElement) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: inline-block;\r\n      vertical-align: baseline;\r\n    }\r\n    .base {\r\n      contain: layout style paint;\r\n      width: 100%;\r\n      height: 100%;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      text-align: center;\r\n      white-space: nowrap;\r\n      vertical-align: baseline;\r\n      box-sizing: border-box;\r\n      user-select: none;\r\n      padding: var(--_badge-padding);\r\n      border-radius: var(--m3e-badge-shape, ${DesignToken.shape.corner.full});\r\n      color: var(--m3e-badge-color, ${DesignToken.color.onError});\r\n      background-color: var(--m3e-badge-container-color, ${DesignToken.color.error});\r\n    }\r\n    :host([for]) {\r\n      position: absolute;\r\n      z-index: 1;\r\n    }\r\n    :host([for][position=\"above\"]) {\r\n      transform: translateY(var(--_badge-offset, 0px));\r\n    }\r\n    :host([for][position=\"above-after\"]:not(:dir(rtl))) {\r\n      transform: translate3d(calc(0px - var(--_badge-offset, 0px)), var(--_badge-offset, 0px), 0);\r\n    }\r\n    :host([for][position=\"above-after\"]:dir(rtl)) {\r\n      transform: translate3d(var(--_badge-offset, 0px), var(--_badge-offset, 0px), 0);\r\n    }\r\n    :host([for][position=\"above-before\"]:not(:dir(rtl))) {\r\n      transform: translate3d(var(--_badge-offset, 0px), var(--_badge-offset, 0px), 0);\r\n    }\r\n    :host([for][position=\"above-before\"]:dir(rtl)) {\r\n      transform: translate3d(calc(0px - var(--_badge-offset, 0px)), var(--_badge-offset, 0px), 0);\r\n    }\r\n    :host([for][position=\"below\"]) {\r\n      transform: translateY(calc(0px - var(--_badge-offset, 0px)));\r\n    }\r\n    :host([for][position=\"below-after\"]:not(:dir(rtl))) {\r\n      transform: translate3d(calc(0px - var(--_badge-offset, 0px)), calc(0px - var(--_badge-offset, 0px)), 0);\r\n    }\r\n    :host([for][position=\"below-after\"]:dir(rtl)) {\r\n      transform: translate3d(var(--_badge-offset, 0px), calc(0px - var(--_badge-offset, 0px)), 0);\r\n    }\r\n    :host([for][position=\"below-before\"]:not(:dir(rtl))) {\r\n      transform: translate3d(var(--_badge-offset, 0px), calc(0px - var(--_badge-offset, 0px)), 0);\r\n    }\r\n    :host([for][position=\"below-before\"]:dir(rtl)) {\r\n      transform: translate3d(calc(0px - var(--_badge-offset, 0px)), calc(0px - var(--_badge-offset, 0px)), 0);\r\n    }\r\n    :host([for][position=\"before\"]:not(:dir(rtl))),\r\n    :host([for][position=\"after\"]:dir(rtl)) {\r\n      transform: translateX(var(--_badge-offset, 0px));\r\n    }\r\n    :host([for][position=\"before\"]:dir(rtl)),\r\n    :host([for][position=\"after\"]:not(:dir(rtl))) {\r\n      transform: translateX(calc(0px - var(--_badge-offset, 0px)));\r\n    }\r\n    :host([size=\"small\"]) {\r\n      height: var(--m3e-badge-small-size, 0.375rem);\r\n      max-height: var(--m3e-badge-small-size, 0.375rem);\r\n      width: var(--m3e-badge-small-size, 0.375rem);\r\n      min-width: var(--m3e-badge-small-size, 0.375rem);\r\n      --_badge-offset: var(--m3e-badge-small-offset, 0.375rem);\r\n    }\r\n    :host([size=\"small\"]) .base {\r\n      font-size: 0;\r\n    }\r\n    :host([size=\"medium\"]) {\r\n      height: var(--m3e-badge-medium-size, 1.375rem);\r\n      min-width: var(--m3e-badge-medium-size, 1.375rem);\r\n      --_badge-offset: var(--m3e-badge-small-offset, 0.75rem);\r\n    }\r\n    :host([size=\"medium\"]) .base {\r\n      font-size: var(--m3e-badge-medium-font-size, ${DesignToken.typescale.standard.label.small.fontSize});\r\n      font-weight: var(--m3e-badge-medium-font-weight, ${DesignToken.typescale.standard.label.small.fontWeight});\r\n      line-height: var(--m3e-badge-medium-line-height, ${DesignToken.typescale.standard.label.small.lineHeight});\r\n      letter-spacing: var(--m3e-badge-medium-tracking, ${DesignToken.typescale.standard.label.small.tracking});\r\n    }\r\n    :host([size=\"large\"]) {\r\n      height: var(--m3e-badge-large-size, 1.75rem);\r\n      min-width: var(--m3e-badge-large-size, 1.75rem);\r\n      --_badge-offset: var(--m3e-badge-small-offset, 1rem);\r\n    }\r\n    :host([size=\"large\"]) .base {\r\n      font-size: var(--m3e-badge-large-font-size, ${DesignToken.typescale.standard.label.large.fontSize});\r\n      font-weight: var(--m3e-badge-large-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight});\r\n      line-height: var(--m3e-badge-large-line-height, ${DesignToken.typescale.standard.label.large.lineHeight});\r\n      letter-spacing: var(--m3e-badge-large-tracking, ${DesignToken.typescale.standard.label.large.tracking});\r\n    }\r\n    @media (forced-colors: active) {\r\n      .base {\r\n        background-color: ButtonFace;\r\n        color: ButtonText;\r\n        outline: 1px solid ButtonText;\r\n      }\r\n    }\r\n  `;\r\n\r\n  constructor() {\r\n    super();\r\n\r\n    new MutationController(this, {\r\n      config: {\r\n        childList: true,\r\n        subtree: true,\r\n        characterData: true,\r\n        attributes: false,\r\n      },\r\n      callback: () => this.#updatePadding(),\r\n    });\r\n  }\r\n\r\n  /** @private */ #directionalitySubscription?: () => void;\r\n  /** @private */ #anchorCleanup?: () => void;\r\n  /** @private */ #anchorLastPosition?: { x: number; y: number };\r\n\r\n  /**\r\n   * The size of the badge.\r\n   * @default \"medium\"\r\n   */\r\n  @property({ reflect: true }) size: BadgeSize = \"medium\";\r\n\r\n  /**\r\n   * The position of the badge, when attached to another element.\r\n   * @default \"above-after\"\r\n   */\r\n  @property({ reflect: true }) position: BadgePosition = \"above-after\";\r\n\r\n  /** @inheritdoc */\r\n  override attach(control: HTMLElement): void {\r\n    super.attach(control);\r\n    this.#attach();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override detach(): void {\r\n    super.detach();\r\n    this.#detach();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    this.#directionalitySubscription = M3eDirectionality.observe(() => this.#attach());\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this.#directionalitySubscription?.();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override update(changedProperties: PropertyValues<this>): void {\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"position\") || changedProperties.has(\"size\") || changedProperties.has(\"htmlFor\")) {\r\n      this.#attach();\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <slot><span aria-hidden=\"true\">&nbsp;</span></slot>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #updatePadding() {\r\n    if (!this.isConnected) return;\r\n    this.style.setProperty(\r\n      \"--_badge-padding\",\r\n      this.textContent && this.textContent.length > 2\r\n        ? `0 ${this.size === \"medium\" ? \"0.25rem\" : this.size === \"large\" ? \"0.5rem\" : \"0\"}`\r\n        : \"\",\r\n    );\r\n  }\r\n\r\n  /** @private */\r\n  #detach(): void {\r\n    this.#anchorCleanup?.();\r\n    this.#anchorCleanup = undefined;\r\n    this.#anchorLastPosition = undefined;\r\n  }\r\n\r\n  /** @private */\r\n  async #attach(): Promise<void> {\r\n    this.#detach();\r\n\r\n    if (!this.control) return;\r\n\r\n    let position: AnchorPosition = \"top-end\";\r\n    switch (this.position) {\r\n      case \"above\":\r\n        position = \"top\";\r\n        break;\r\n      case \"above-before\":\r\n        position = \"top-start\";\r\n        break;\r\n      case \"after\":\r\n        position = \"right\";\r\n        break;\r\n      case \"before\":\r\n        position = \"left\";\r\n        break;\r\n      case \"below\":\r\n        position = \"bottom\";\r\n        break;\r\n      case \"below-after\":\r\n        position = \"bottom-end\";\r\n        break;\r\n      case \"below-before\":\r\n        position = \"bottom-start\";\r\n        break;\r\n    }\r\n\r\n    this.#anchorCleanup = await positionAnchor(this, this.control, { position }, (x, y) => {\r\n      if (this.position.includes(\"before\") && this.position !== \"before\") {\r\n        if (M3eDirectionality.current === \"rtl\") {\r\n          x += this.clientWidth;\r\n        } else {\r\n          x -= this.clientWidth;\r\n        }\r\n      }\r\n      if (this.position.includes(\"after\") && this.position !== \"after\") {\r\n        if (M3eDirectionality.current === \"rtl\") {\r\n          x -= this.clientWidth;\r\n        } else {\r\n          x += this.clientWidth;\r\n        }\r\n      }\r\n\r\n      if (this.#anchorLastPosition?.x !== x) {\r\n        this.style.left = `${x}px`;\r\n      }\r\n\r\n      if (this.#anchorLastPosition?.y !== y) {\r\n        this.style.top = `${y}px`;\r\n      }\r\n\r\n      this.#anchorLastPosition = { x, y };\r\n    });\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-badge\": M3eBadgeElement;\r\n  }\r\n}\r\n"],"names":["M3eBadgeElement","HtmlFor","LitElement","constructor","super","_M3eBadgeElement_directionalitySubscription","set","this","_M3eBadgeElement_anchorCleanup","_M3eBadgeElement_anchorLastPosition","size","position","MutationController","config","childList","subtree","characterData","attributes","callback","__classPrivateFieldGet","_M3eBadgeElement_instances","_M3eBadgeElement_updatePadding","call","attach","control","_M3eBadgeElement_attach","detach","_M3eBadgeElement_detach","connectedCallback","__classPrivateFieldSet","M3eDirectionality","observe","disconnectedCallback","update","changedProperties","has","render","html","isConnected","style","setProperty","textContent","length","undefined","async","positionAnchor","x","y","includes","current","clientWidth","left","top","styles","css","DesignToken","shape","corner","full","color","onError","error","typescale","standard","label","small","fontSize","fontWeight","lineHeight","tracking","large","__decorate","property","reflect","prototype","customElement"],"mappings":"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"}

package/dist/bottom-sheet.js

@@ -687,7 +687,7 @@ M3eBottomSheetElement.styles = css`:host { display: block; position: fixed; left
         overlay ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete,
         visibility ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete`)}; } :host([modal]:popover-open)::backdrop { background-color: color-mix( in srgb, var(--m3e-bottom-sheet-scrim-color, ${DesignToken.color.scrim}) var(--m3e-bottom-sheet-scrim-opacity, 32%), transparent ); } :host([modal]:popover-open:not(:is(:state(--no-animate), :--no-animate)))::backdrop { transition: ${unsafeCSS(`background-color ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard}, 
         overlay ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard} allow-discrete,
-        visibility ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard} allow-discrete`)}; } @starting-style { :host([modal]:popover-open)::backdrop { background-color: color-mix( in srgb, var(--m3e-bottom-sheet-scrim-color, ${DesignToken.color.scrim}) 0%, transparent ); } } .base { display: flex; border-radius: inherit; flex-direction: column; height: 100%; --_bottom-sheet-peek-height: var(--m3e-bottom-sheet-peek-height, 0); --_bottom-sheet-top-space: var(--m3e-bottom-sheet-compact-top-space, 4.5rem); } @media (max-height: 640px) { .base { --_bottom-sheet-top-space: var(--m3e-bottom-sheet-top-space, 3.5rem); } } .body { flex: 1 1 auto; overflow-y: auto; scrollbar-width: ${DesignToken.scrollbar.thinWidth}; scrollbar-color: ${DesignToken.scrollbar.color}; padding-block-end: var(--m3e-bottom-sheet-padding-block, 0.5rem); padding-inline: var(--m3e-bottom-sheet-padding-inline, 1rem); font-size: var(--m3e-bottom-sheet-content-font-size, ${DesignToken.typescale.standard.body.medium.fontSize}); font-weight: var( --m3e-bottom-sheet-content-font-weight, ${DesignToken.typescale.standard.body.medium.fontWeight} ); line-height: var( --m3e-bottom-sheet-content-line-height, ${DesignToken.typescale.standard.body.medium.lineHeight} ); letter-spacing: var(--m3e-bottom-sheet-content-tracking, ${DesignToken.typescale.standard.body.medium.tracking}); } .content { height: fit-content; } :host(:not([handle])) .header { display: none; } :host(:not([handle])) .body, .header { border-top-left-radius: inherit; border-top-right-radius: inherit; padding-block-start: var(--m3e-bottom-sheet-padding-block, 0.5rem); font-size: var(--m3e-bottom-sheet-header-font-size, ${DesignToken.typescale.standard.title.large.fontSize}); font-weight: var(--m3e-bottom-sheet-header-font-weight, ${DesignToken.typescale.standard.title.large.fontWeight}); line-height: var(--m3e-bottom-sheet-header-line-height, ${DesignToken.typescale.standard.title.large.lineHeight}); letter-spacing: var(--m3e-bottom-sheet-header-tracking, ${DesignToken.typescale.standard.title.large.tracking}); } .header { cursor: grab; touch-action: none; outline: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; flex: none; display: flex; flex-direction: column; min-height: 3rem; --m3e-app-bar-container-color: var(--m3e-bottom-sheet-container-color, ${DesignToken.color.surfaceContainerLow}); } .handle-row { position: relative; flex: none; display: flex; align-items: center; justify-content: center; opacity: 1; visibility: visible; height: var(--m3e-bottom-sheet-handle-container-height, 1.5rem); } :host(:not(:is(:state(--no-animate), :--no-animate))) .handle-row { transition: ${unsafeCSS(`opacity ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard},
+        visibility ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard} allow-discrete`)}; } @starting-style { :host([modal]:popover-open)::backdrop { background-color: color-mix( in srgb, var(--m3e-bottom-sheet-scrim-color, ${DesignToken.color.scrim}) 0%, transparent ); } } .base { contain: layout style paint; display: flex; border-radius: inherit; flex-direction: column; height: 100%; --_bottom-sheet-peek-height: var(--m3e-bottom-sheet-peek-height, 0); --_bottom-sheet-top-space: var(--m3e-bottom-sheet-compact-top-space, 4.5rem); } @media (max-height: 640px) { .base { --_bottom-sheet-top-space: var(--m3e-bottom-sheet-top-space, 3.5rem); } } .body { flex: 1 1 auto; overflow-y: auto; scrollbar-width: ${DesignToken.scrollbar.thinWidth}; scrollbar-color: ${DesignToken.scrollbar.color}; padding-block-end: var(--m3e-bottom-sheet-padding-block, 0.5rem); padding-inline: var(--m3e-bottom-sheet-padding-inline, 1rem); font-size: var(--m3e-bottom-sheet-content-font-size, ${DesignToken.typescale.standard.body.medium.fontSize}); font-weight: var( --m3e-bottom-sheet-content-font-weight, ${DesignToken.typescale.standard.body.medium.fontWeight} ); line-height: var( --m3e-bottom-sheet-content-line-height, ${DesignToken.typescale.standard.body.medium.lineHeight} ); letter-spacing: var(--m3e-bottom-sheet-content-tracking, ${DesignToken.typescale.standard.body.medium.tracking}); } .content { height: fit-content; } :host(:not([handle])) .header { display: none; } :host(:not([handle])) .body, .header { border-top-left-radius: inherit; border-top-right-radius: inherit; padding-block-start: var(--m3e-bottom-sheet-padding-block, 0.5rem); font-size: var(--m3e-bottom-sheet-header-font-size, ${DesignToken.typescale.standard.title.large.fontSize}); font-weight: var(--m3e-bottom-sheet-header-font-weight, ${DesignToken.typescale.standard.title.large.fontWeight}); line-height: var(--m3e-bottom-sheet-header-line-height, ${DesignToken.typescale.standard.title.large.lineHeight}); letter-spacing: var(--m3e-bottom-sheet-header-tracking, ${DesignToken.typescale.standard.title.large.tracking}); } .header { cursor: grab; touch-action: none; outline: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; flex: none; display: flex; flex-direction: column; min-height: 3rem; --m3e-app-bar-container-color: var(--m3e-bottom-sheet-container-color, ${DesignToken.color.surfaceContainerLow}); } .handle-row { position: relative; flex: none; display: flex; align-items: center; justify-content: center; opacity: 1; visibility: visible; height: var(--m3e-bottom-sheet-handle-container-height, 1.5rem); } :host(:not(:is(:state(--no-animate), :--no-animate))) .handle-row { transition: ${unsafeCSS(`opacity ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard},
         padding ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard},
         height ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard},
         visibility ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete`)}; } .handle { position: relative; width: var(--m3e-bottom-sheet-handle-width, 2rem); height: var(--m3e-bottom-sheet-handle-height, 4px); border-radius: var(--m3e-bottom-sheet-handle-shape, ${DesignToken.shape.corner.full}); background-color: var(--m3e-bottom-sheet-handle-color, ${DesignToken.color.onSurfaceVariant}); } .handle-touch { position: absolute; aspect-ratio: 1 / 1; height: 3rem; left: calc(0px - calc(calc(3rem - var(--m3e-bottom-sheet-handle-width, 2rem)) / 2)); right: calc(0px - calc(calc(3rem - var(--m3e-bottom-sheet-handle-width, 2rem)) / 2)); top: calc( 0px - calc( calc(3rem - var(--m3e-bottom-sheet-handle-container-height, 1.5rem)) - calc( var(--m3e-bottom-sheet-handle-height, 4px) / 2 ) ) ); } @media (prefers-reduced-motion) { :host(:not(:is(:state(--no-animate), :--no-animate))), :host([modal]:not(:is(:state(--no-animate), :--no-animate)))::backdrop, :host([modal]:popover-open:not(:is(:state(--no-animate), :--no-animate)))::backdrop, :host(:not(:is(:state(--no-animate), :--no-animate))) .handle-row { transition: none; } } @media (forced-colors: active) { :host([modal]:not(:is(:state(--no-animate), :--no-animate)))::backdrop, :host([modal]:popover-open:not(:is(:state(--no-animate), :--no-animate)))::backdrop { transition: none; } .base { border-style: solid; border-width: 1px; border-color: CanvasText; } .handle { background-color: ButtonText; } }`;