@m3e/web 2.5.16 → 2.6.0

package/dist/badge.js

@@ -70,6 +70,7 @@ let M3eBadgeElement = class M3eBadgeElement extends HtmlFor(LitElement) {
      */
     this.position = "above-after";
     new MutationController(this, {
+      skipInitial: true,
       config: {
         childList: true,
         subtree: true,
@@ -108,7 +109,7 @@ let M3eBadgeElement = class M3eBadgeElement extends HtmlFor(LitElement) {
   }
   /** @inheritdoc */
   render() {
-    return html`<div class="base"><slot><span aria-hidden="true">&nbsp;</span></slot></div>`;
+    return html`<div class="base"><slot @slotchange="${__classPrivateFieldGet(this, _M3eBadgeElement_instances, "m", _M3eBadgeElement_updatePadding)}"><span aria-hidden="true">&nbsp;</span></slot></div>`;
   }
 };
 _M3eBadgeElement_directionalitySubscription = new WeakMap();

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, 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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"}
+{"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      skipInitial: true,\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 @slotchange=\"${this.#updatePadding}\"><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","skipInitial","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 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};
+import{__classPrivateFieldGet as e,__classPrivateFieldSet as t,__decorate as a}from"tslib";import{LitElement as s,html as r,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(s)){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,{skipInitial:!0,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 r`<div class="base"><slot @slotchange="${e(this,b,"m",v)}"><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,s)=>{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!==s&&(this.style.top=`${s}px`),t(this,g,{x:a,y:s},"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, 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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"}
+{"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      skipInitial: true,\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 @slotchange=\"${this.#updatePadding}\"><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","skipInitial","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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"}