@m3e/tooltip 1.2.1 → 1.3.0

package/dist/index.js

@@ -913,6 +913,7 @@ class TooltipElementBase extends HtmlFor(LitElement) {
   async show() {
     if (!this.control || this.disabled || isDisabledMixin(this.control) && this.control.disabled) return;
     _a.__openTooltips.filter(x => x !== this).forEach(x => x.hide());
+    this._base.showPopover();
     __classPrivateFieldSet(this, _TooltipElementBase_anchorCleanup, await positionAnchor(this._base, this.control, {
       position: this._anchorPosition,
       inline: true,
@@ -920,7 +921,6 @@ class TooltipElementBase extends HtmlFor(LitElement) {
       shift: true,
       offset: TOOLTIP_OFFSET
     }, (x, y) => this._updatePosition(this._base, x, y)), "f");
-    this._base.showPopover();
     if (!_a.__openTooltips.includes(this)) {
       _a.__openTooltips.push(this);
     }
@@ -1240,10 +1240,10 @@ _M3eRichTooltipElement_updateMessage = function _M3eRichTooltipElement_updateMes
   }
 };
 /** The styles of the element. */
-M3eRichTooltipElement.styles = css`:host { display: contents; } .base { display: flex; flex-direction: column; position: absolute; padding: unset; margin: unset; border: unset; padding-block-start: var(--m3e-rich-tooltip-padding-top, 0.75rem); padding-inline: var(--m3e-rich-tooltip-padding-inline, 1rem); max-width: var(--m3e-rich-tooltip-max-width, 20rem); box-sizing: border-box; overflow: visible; border-radius: var(--m3e-rich-tooltip-shape, ${DesignToken.shape.corner.medium}); background-color: var(--m3e-rich-tooltip-container-color, ${DesignToken.color.surfaceContainer}); visibility: hidden; opacity: 0; transform: scale(0.8); transition: ${unsafeCSS(`opacity ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard}, 
+M3eRichTooltipElement.styles = css`:host { display: contents; } .base { flex-direction: column; position: absolute; padding: unset; margin: unset; border: unset; padding-block-start: var(--m3e-rich-tooltip-padding-top, 0.75rem); padding-inline: var(--m3e-rich-tooltip-padding-inline, 1rem); max-width: var(--m3e-rich-tooltip-max-width, 20rem); box-sizing: border-box; overflow: visible; border-radius: var(--m3e-rich-tooltip-shape, ${DesignToken.shape.corner.medium}); background-color: var(--m3e-rich-tooltip-container-color, ${DesignToken.color.surfaceContainer}); display: none; opacity: 0; transform: scale(0.8); transition: ${unsafeCSS(`opacity ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard}, 
             transform ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard},
             overlay ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete,
-            visibility ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete`)}; } .base:not(.has-actions) { padding-block-end: var(--m3e-rich-tooltip-padding-bottom, 0.75rem); } .base::backdrop { background-color: transparent; } .base:not(:popover-open) { visibility: hidden; opacity: 0; transform: scale(0.8); } .base:popover-open { visibility: visible; opacity: 1; transform: scale(1); } .base:not(.has-subhead) .subhead, .base:not(.has-actions) .actions { display: none; } .subhead { color: var(--m3e-rich-tooltip-subhead-color, ${DesignToken.color.onSurfaceVariant}); font-size: var(--m3e-rich-tooltip-subhead-font-size, ${DesignToken.typescale.standard.title.small.fontSize}); font-weight: var( --m3e-rich-tooltip-subhead-font-weight, ${DesignToken.typescale.standard.title.small.fontWeight} ); line-height: var( --m3e-rich-tooltip-subhead-line-height, ${DesignToken.typescale.standard.title.small.lineHeight} ); letter-spacing: var(--m3e-rich-tooltip-subhead-tracking, ${DesignToken.typescale.standard.title.small.tracking}); padding-block-end: var(--m3e-rich-tooltip-subhead-bottom-space, 0.25rem); } .content { color: var(--m3e-rich-tooltip-supporting-text-color, ${DesignToken.color.onSurfaceVariant}); font-size: var( --m3e-rich-tooltip-supporting-text-font-size, ${DesignToken.typescale.standard.body.medium.fontSize} ); font-weight: var( --m3e-rich-tooltip-supporting-text-font-weight, ${DesignToken.typescale.standard.body.medium.fontWeight} ); line-height: var( --m3e-rich-tooltip-supporting-text-line-height, ${DesignToken.typescale.standard.body.medium.lineHeight} ); letter-spacing: var( --m3e-rich-tooltip-supporting-text-tracking, ${DesignToken.typescale.standard.body.medium.tracking} ); } .actions { margin-inline: calc( 0px - calc( var(--m3e-rich-tooltip-padding-inline, 1rem) - var(--m3e-rich-tooltip-actions-padding-inline, 0.25rem) ) ); padding-block-start: var(--m3e-rich-tooltip-actions-top-space, 0.75rem); padding-block-end: var(--m3e-rich-tooltip-actions-bottom-space, 0.5rem); } ::slotted([slot="actions"]) { flex: none; display: flex; align-items: center; min-height: 1.5rem; column-gap: 0.5rem; } ::slotted([slot="actions"][end]) { justify-content: flex-end; } @starting-style { .base:popover-open { opacity: 0; transform: scale(0.8); } } @media (prefers-reduced-motion) { .base { transition: none; } } @media (forced-colors: active) { .base { background-color: Canvas; color: CanvasText; box-sizing: border-box; border: 1px solid CanvasText; } }`;
+            display ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete`)}; } .base:not(.has-actions) { padding-block-end: var(--m3e-rich-tooltip-padding-bottom, 0.75rem); } .base::backdrop { background-color: transparent; } .base:popover-open { display: flex; opacity: 1; transform: scale(1); } .base:not(.has-subhead) .subhead, .base:not(.has-actions) .actions { display: none; } .subhead { color: var(--m3e-rich-tooltip-subhead-color, ${DesignToken.color.onSurfaceVariant}); font-size: var(--m3e-rich-tooltip-subhead-font-size, ${DesignToken.typescale.standard.title.small.fontSize}); font-weight: var( --m3e-rich-tooltip-subhead-font-weight, ${DesignToken.typescale.standard.title.small.fontWeight} ); line-height: var( --m3e-rich-tooltip-subhead-line-height, ${DesignToken.typescale.standard.title.small.lineHeight} ); letter-spacing: var(--m3e-rich-tooltip-subhead-tracking, ${DesignToken.typescale.standard.title.small.tracking}); padding-block-end: var(--m3e-rich-tooltip-subhead-bottom-space, 0.25rem); } .content { color: var(--m3e-rich-tooltip-supporting-text-color, ${DesignToken.color.onSurfaceVariant}); font-size: var( --m3e-rich-tooltip-supporting-text-font-size, ${DesignToken.typescale.standard.body.medium.fontSize} ); font-weight: var( --m3e-rich-tooltip-supporting-text-font-weight, ${DesignToken.typescale.standard.body.medium.fontWeight} ); line-height: var( --m3e-rich-tooltip-supporting-text-line-height, ${DesignToken.typescale.standard.body.medium.lineHeight} ); letter-spacing: var( --m3e-rich-tooltip-supporting-text-tracking, ${DesignToken.typescale.standard.body.medium.tracking} ); } .actions { margin-inline: calc( 0px - calc( var(--m3e-rich-tooltip-padding-inline, 1rem) - var(--m3e-rich-tooltip-actions-padding-inline, 0.25rem) ) ); padding-block-start: var(--m3e-rich-tooltip-actions-top-space, 0.75rem); padding-block-end: var(--m3e-rich-tooltip-actions-bottom-space, 0.5rem); } ::slotted([slot="actions"]) { flex: none; display: flex; align-items: center; min-height: 1.5rem; column-gap: 0.5rem; } ::slotted([slot="actions"][end]) { justify-content: flex-end; } @starting-style { .base:popover-open { opacity: 0; transform: scale(0.8); } } @media (prefers-reduced-motion) { .base { transition: none; } } @media (forced-colors: active) { .base { background-color: Canvas; color: CanvasText; box-sizing: border-box; border: 1px solid CanvasText; } }`;
 /** @private */
 M3eRichTooltipElement.__nextId = 0;
 __decorate([r$1()], M3eRichTooltipElement.prototype, "_hasSubhead", void 0);
@@ -1367,10 +1367,10 @@ _M3eTooltipElement_handleToggle = function _M3eTooltipElement_handleToggle(e) {
   }
 };
 /** The styles of the element. */
-M3eTooltipElement.styles = css`:host { display: contents; } .base { position: absolute; pointer-events: none; margin: unset; border: unset; word-break: normal; overflow-wrap: anywhere; padding: var(--m3e-tooltip-padding, 0.25rem 0.5rem); min-width: var(--m3e-tooltip-min-width, 2.5rem); max-width: var(--m3e-tooltip-max-width, 12.5rem); min-height: var(--m3e-tooltip-min-height, 1.5rem); max-height: var(--m3e-tooltip-max-height, 40vh); box-sizing: border-box; overflow: hidden; text-align: center; border-radius: var(--m3e-tooltip-shape, ${DesignToken.shape.corner.extraSmall}); background-color: var(--m3e-tooltip-container-color, ${DesignToken.color.inverseSurface}); color: var(--m3e-tooltip-supporting-text-color, ${DesignToken.color.inverseOnSurface}); font-size: var(--m3e-tooltip-supporting-text-font-size, ${DesignToken.typescale.standard.body.small.fontSize}); font-weight: var( --m3e-tooltip-supporting-text-font-weight, ${DesignToken.typescale.standard.body.small.fontWeight} ); line-height: var( --m3e-tooltip-supporting-text-line-height, ${DesignToken.typescale.standard.body.small.lineHeight} ); letter-spacing: var( --m3e-tooltip-supporting-text-tracking, ${DesignToken.typescale.standard.body.small.tracking} ); visibility: hidden; opacity: 0; transform: scale(0.8); transition: ${unsafeCSS(`opacity ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard}, 
+M3eTooltipElement.styles = css`:host { display: contents; } .base { position: absolute; pointer-events: none; margin: unset; border: unset; word-break: normal; overflow-wrap: anywhere; padding: var(--m3e-tooltip-padding, 0.25rem 0.5rem); min-width: var(--m3e-tooltip-min-width, 2.5rem); max-width: var(--m3e-tooltip-max-width, 12.5rem); min-height: var(--m3e-tooltip-min-height, 1.5rem); max-height: var(--m3e-tooltip-max-height, 40vh); box-sizing: border-box; overflow: hidden; text-align: center; border-radius: var(--m3e-tooltip-shape, ${DesignToken.shape.corner.extraSmall}); background-color: var(--m3e-tooltip-container-color, ${DesignToken.color.inverseSurface}); color: var(--m3e-tooltip-supporting-text-color, ${DesignToken.color.inverseOnSurface}); font-size: var(--m3e-tooltip-supporting-text-font-size, ${DesignToken.typescale.standard.body.small.fontSize}); font-weight: var( --m3e-tooltip-supporting-text-font-weight, ${DesignToken.typescale.standard.body.small.fontWeight} ); line-height: var( --m3e-tooltip-supporting-text-line-height, ${DesignToken.typescale.standard.body.small.lineHeight} ); letter-spacing: var( --m3e-tooltip-supporting-text-tracking, ${DesignToken.typescale.standard.body.small.tracking} ); display: none; opacity: 0; transform: scale(0.8); transition: ${unsafeCSS(`opacity ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard}, 
         transform ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard},
         overlay ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete,
-        visibility ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete`)}; } :host(.-multiline) .base { text-align: start; } .base::backdrop { background-color: transparent; } .base:not(:popover-open) { visibility: hidden; opacity: 0; transform: scale(0.8); } .base:popover-open { visibility: visible; opacity: 1; transform: scale(1); } @starting-style { .base:popover-open { opacity: 0; transform: scale(0.8); } } @media (prefers-reduced-motion) { .base { transition: none; } } @media (forced-colors: active) { .base { background-color: Canvas; color: CanvasText; box-sizing: border-box; border: 1px solid CanvasText; } }`;
+        display ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete`)}; } :host(.-multiline) .base { text-align: start; } .base::backdrop { background-color: transparent; } .base:popover-open { display: block; opacity: 1; transform: scale(1); } @starting-style { .base:popover-open { opacity: 0; transform: scale(0.8); } } @media (prefers-reduced-motion) { .base { transition: none; } } @media (forced-colors: active) { .base { background-color: Canvas; color: CanvasText; box-sizing: border-box; border: 1px solid CanvasText; } }`;
 __decorate([n$1()], M3eTooltipElement.prototype, "position", void 0);
 M3eTooltipElement = __decorate([t$2("m3e-tooltip")], M3eTooltipElement);