@m3e/tooltip 1.2.0 → 1.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +4 -4
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/dist/src/RichTooltipElement.d.ts.map +1 -1
- package/dist/src/TooltipElement.d.ts.map +1 -1
- package/dist/src/TooltipElementBase.d.ts.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1240,10 +1240,10 @@ _M3eRichTooltipElement_updateMessage = function _M3eRichTooltipElement_updateMes
|
|
|
1240
1240
|
}
|
|
1241
1241
|
};
|
|
1242
1242
|
/** The styles of the element. */
|
|
1243
|
-
M3eRichTooltipElement.styles = css`:host { display: contents; } .base {
|
|
1243
|
+
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},
|
|
1244
1244
|
transform ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard},
|
|
1245
1245
|
overlay ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete,
|
|
1246
|
-
|
|
1246
|
+
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; } }`;
|
|
1247
1247
|
/** @private */
|
|
1248
1248
|
M3eRichTooltipElement.__nextId = 0;
|
|
1249
1249
|
__decorate([r$1()], M3eRichTooltipElement.prototype, "_hasSubhead", void 0);
|
|
@@ -1367,10 +1367,10 @@ _M3eTooltipElement_handleToggle = function _M3eTooltipElement_handleToggle(e) {
|
|
|
1367
1367
|
}
|
|
1368
1368
|
};
|
|
1369
1369
|
/** The styles of the element. */
|
|
1370
|
-
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} );
|
|
1370
|
+
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},
|
|
1371
1371
|
transform ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard},
|
|
1372
1372
|
overlay ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete,
|
|
1373
|
-
|
|
1373
|
+
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; } }`;
|
|
1374
1374
|
__decorate([n$1()], M3eTooltipElement.prototype, "position", void 0);
|
|
1375
1375
|
M3eTooltipElement = __decorate([t$2("m3e-tooltip")], M3eTooltipElement);
|
|
1376
1376
|
|