@m3e/web 2.0.1 → 2.0.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/all.js +11 -5
- package/dist/all.js.map +1 -1
- package/dist/all.min.js +1 -1
- package/dist/all.min.js.map +1 -1
- package/dist/bottom-sheet.js +11 -5
- package/dist/bottom-sheet.js.map +1 -1
- package/dist/bottom-sheet.min.js +3 -3
- package/dist/bottom-sheet.min.js.map +1 -1
- package/dist/css-custom-data.json +390 -390
- package/dist/custom-elements.json +10087 -10087
- package/dist/html-custom-data.json +170 -170
- package/dist/src/bottom-sheet/BottomSheetElement.d.ts +2 -0
- package/dist/src/bottom-sheet/BottomSheetElement.d.ts.map +1 -1
- package/package.json +1 -1
package/dist/all.js
CHANGED
|
@@ -1722,6 +1722,11 @@ let M3eBottomSheetElement = M3eBottomSheetElement_1 = class M3eBottomSheetElemen
|
|
|
1722
1722
|
}
|
|
1723
1723
|
}
|
|
1724
1724
|
/** @inheritdoc */
|
|
1725
|
+
connectedCallback() {
|
|
1726
|
+
super.connectedCallback();
|
|
1727
|
+
this.classList.add("-no-animate");
|
|
1728
|
+
}
|
|
1729
|
+
/** @inheritdoc */
|
|
1725
1730
|
update(changedProperties) {
|
|
1726
1731
|
super.update(changedProperties);
|
|
1727
1732
|
if (changedProperties.has("modal")) {
|
|
@@ -1743,6 +1748,7 @@ let M3eBottomSheetElement = M3eBottomSheetElement_1 = class M3eBottomSheetElemen
|
|
|
1743
1748
|
__classPrivateFieldSet(this, _M3eBottomSheetElement_cachedHeaderHeight, header.clientHeight, "f");
|
|
1744
1749
|
__classPrivateFieldGet(this, _M3eBottomSheetElement_resizeController, "f").observe(header);
|
|
1745
1750
|
}
|
|
1751
|
+
this.classList.remove("-no-animate");
|
|
1746
1752
|
}
|
|
1747
1753
|
/** @inheritdoc */
|
|
1748
1754
|
updated(_changedProperties) {
|
|
@@ -2150,15 +2156,15 @@ _M3eBottomSheetElement_restoreInert = function _M3eBottomSheetElement_restoreIne
|
|
|
2150
2156
|
}
|
|
2151
2157
|
})();
|
|
2152
2158
|
/** The styles of the element. */
|
|
2153
|
-
M3eBottomSheetElement.styles = css`:host { display: block; position: fixed; left: 50%; top: calc(100vh - var(--_bottom-sheet-height)); margin: 0; padding: 0; outline: none; overflow: hidden; border: none; box-sizing: border-box; width: var(--m3e-bottom-sheet-width, 100%); max-width: var(--m3e-bottom-sheet-max-width, 40rem); height: var(--_bottom-sheet-height); color: var(--m3e-bottom-sheet-color, ${DesignToken$1.color.onSurface}); background-color: var(--m3e-bottom-sheet-container-color, ${DesignToken$1.color.surfaceContainerLow}); transition: ${unsafeCSS(`transform ${DesignToken$1.motion.duration.medium2} ${DesignToken$1.motion.easing.standardDecelerate},
|
|
2154
|
-
border-radius ${DesignToken$1.motion.duration.medium2} ${DesignToken$1.motion.easing.standard}`)}; } :host(:not([modal]):not(.-full)) .elevation { --m3e-elevation-level: var(--m3e-bottom-sheet-elevation, ${DesignToken$1.elevation.level1}); } :host([modal]:not(.-full)) .elevation { --m3e-elevation-level: var(--m3e-bottom-sheet-modal-elevation, ${DesignToken$1.elevation.level1}); } :host(.-full) .elevation { --m3e-elevation-level: var(--m3e-bottom-sheet-full-elevation, ${DesignToken$1.elevation.level1}); } :host(:not([modal])) { z-index: var(--m3e-bottom-sheet-z-index, 10); } :host(:not([modal]):not([open])), :host([modal]:not(:popover-open)) { border-radius: var(--m3e-bottom-sheet-minimized-container-shape, ${DesignToken$1.shape.corner.none}); transform: translateX(-50%) translateY(100%); } :host(:not([modal])[open]:not(.-full)), :host([modal]:not(.-full):popover-open) { border-radius: var(--m3e-bottom-sheet-container-shape, ${DesignToken$1.shape.corner.extraLargeTop}); } :host(:not([modal])[open].-full), :host([modal].-full:popover-open) { border-radius: var(--m3e-bottom-sheet-full-container-shape, ${DesignToken$1.shape.corner.extraLargeTop}); } :host(:not([modal])[open]), :host([modal]:popover-open) { transform: translateX(-50%) translateY(0); } :host([modal])::backdrop { transition: ${unsafeCSS(`background-color ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard},
|
|
2159
|
+
M3eBottomSheetElement.styles = css`:host { display: block; position: fixed; left: 50%; top: calc(100vh - var(--_bottom-sheet-height)); margin: 0; padding: 0; outline: none; overflow: hidden; border: none; box-sizing: border-box; width: var(--m3e-bottom-sheet-width, 100%); max-width: var(--m3e-bottom-sheet-max-width, 40rem); height: var(--_bottom-sheet-height); color: var(--m3e-bottom-sheet-color, ${DesignToken$1.color.onSurface}); background-color: var(--m3e-bottom-sheet-container-color, ${DesignToken$1.color.surfaceContainerLow}); } :host(:not(.-no-animate)) { transition: ${unsafeCSS(`transform ${DesignToken$1.motion.duration.medium2} ${DesignToken$1.motion.easing.standardDecelerate},
|
|
2160
|
+
border-radius ${DesignToken$1.motion.duration.medium2} ${DesignToken$1.motion.easing.standard}`)}; } :host(:not([modal]):not(.-full)) .elevation { --m3e-elevation-level: var(--m3e-bottom-sheet-elevation, ${DesignToken$1.elevation.level1}); } :host([modal]:not(.-full)) .elevation { --m3e-elevation-level: var(--m3e-bottom-sheet-modal-elevation, ${DesignToken$1.elevation.level1}); } :host(.-full) .elevation { --m3e-elevation-level: var(--m3e-bottom-sheet-full-elevation, ${DesignToken$1.elevation.level1}); } :host(:not([modal])) { z-index: var(--m3e-bottom-sheet-z-index, 10); } :host(:not([modal]):not([open])), :host([modal]:not(:popover-open)) { border-radius: var(--m3e-bottom-sheet-minimized-container-shape, ${DesignToken$1.shape.corner.none}); transform: translateX(-50%) translateY(100%); } :host(:not([modal])[open]:not(.-full)), :host([modal]:not(.-full):popover-open) { border-radius: var(--m3e-bottom-sheet-container-shape, ${DesignToken$1.shape.corner.extraLargeTop}); } :host(:not([modal])[open].-full), :host([modal].-full:popover-open) { border-radius: var(--m3e-bottom-sheet-full-container-shape, ${DesignToken$1.shape.corner.extraLargeTop}); } :host(:not([modal])[open]), :host([modal]:popover-open) { transform: translateX(-50%) translateY(0); } :host([modal]:not(.-no-animate))::backdrop { transition: ${unsafeCSS(`background-color ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard},
|
|
2155
2161
|
overlay ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard} allow-discrete,
|
|
2156
|
-
visibility ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard} allow-discrete`)}; } :host([modal]:popover-open)::backdrop { background-color: color-mix( in srgb, var(--m3e-bottom-sheet-scrim-color, ${DesignToken$1.color.scrim}) var(--m3e-bottom-sheet-scrim-opacity, 32%), transparent ); transition: ${unsafeCSS(`background-color ${DesignToken$1.motion.duration.long2} ${DesignToken$1.motion.easing.standard},
|
|
2162
|
+
visibility ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard} allow-discrete`)}; } :host([modal]:popover-open)::backdrop { background-color: color-mix( in srgb, var(--m3e-bottom-sheet-scrim-color, ${DesignToken$1.color.scrim}) var(--m3e-bottom-sheet-scrim-opacity, 32%), transparent ); } :host([modal]:popover-open:not(.-no-animate))::backdrop { transition: ${unsafeCSS(`background-color ${DesignToken$1.motion.duration.long2} ${DesignToken$1.motion.easing.standard},
|
|
2157
2163
|
overlay ${DesignToken$1.motion.duration.long2} ${DesignToken$1.motion.easing.standard} allow-discrete,
|
|
2158
|
-
visibility ${DesignToken$1.motion.duration.long2} ${DesignToken$1.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$1.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$1.scrollbar.thinWidth}; scrollbar-color: ${DesignToken$1.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$1.typescale.standard.body.medium.fontSize}); font-weight: var( --m3e-bottom-sheet-content-font-weight, ${DesignToken$1.typescale.standard.body.medium.fontWeight} ); line-height: var( --m3e-bottom-sheet-content-line-height, ${DesignToken$1.typescale.standard.body.medium.lineHeight} ); letter-spacing: var(--m3e-bottom-sheet-content-tracking, ${DesignToken$1.typescale.standard.body.medium.tracking}); } .content { height: fit-content; } :host(:not([handle]):not(.-has-header)) .header { display: none; } :host(:not([handle]):not(.-has-header)) .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$1.typescale.standard.title.large.fontSize}); font-weight: var(--m3e-bottom-sheet-header-font-weight, ${DesignToken$1.typescale.standard.title.large.fontWeight}); line-height: var(--m3e-bottom-sheet-header-line-height, ${DesignToken$1.typescale.standard.title.large.lineHeight}); letter-spacing: var(--m3e-bottom-sheet-header-tracking, ${DesignToken$1.typescale.standard.title.large.tracking}); } .header { cursor: grab; 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$1.color.surfaceContainerLow}); } .handle-row { position: relative; flex: none; display: flex; align-items: center; justify-content: center; opacity: 1; visibility: visible; transition: ${unsafeCSS(`opacity ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard},
|
|
2164
|
+
visibility ${DesignToken$1.motion.duration.long2} ${DesignToken$1.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$1.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$1.scrollbar.thinWidth}; scrollbar-color: ${DesignToken$1.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$1.typescale.standard.body.medium.fontSize}); font-weight: var( --m3e-bottom-sheet-content-font-weight, ${DesignToken$1.typescale.standard.body.medium.fontWeight} ); line-height: var( --m3e-bottom-sheet-content-line-height, ${DesignToken$1.typescale.standard.body.medium.lineHeight} ); letter-spacing: var(--m3e-bottom-sheet-content-tracking, ${DesignToken$1.typescale.standard.body.medium.tracking}); } .content { height: fit-content; } :host(:not([handle]):not(.-has-header)) .header { display: none; } :host(:not([handle]):not(.-has-header)) .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$1.typescale.standard.title.large.fontSize}); font-weight: var(--m3e-bottom-sheet-header-font-weight, ${DesignToken$1.typescale.standard.title.large.fontWeight}); line-height: var(--m3e-bottom-sheet-header-line-height, ${DesignToken$1.typescale.standard.title.large.lineHeight}); letter-spacing: var(--m3e-bottom-sheet-header-tracking, ${DesignToken$1.typescale.standard.title.large.tracking}); } .header { cursor: grab; 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$1.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(.-no-animate)) .handle-row { transition: ${unsafeCSS(`opacity ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard},
|
|
2159
2165
|
padding ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard},
|
|
2160
2166
|
height ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard},
|
|
2161
|
-
visibility ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard} allow-discrete`)};
|
|
2167
|
+
visibility ${DesignToken$1.motion.duration.short3} ${DesignToken$1.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$1.shape.corner.full}); background-color: var(--m3e-bottom-sheet-handle-color, ${DesignToken$1.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(.-no-animate)), :host([modal]:not(.-no-animate))::backdrop, :host([modal]:popover-open:not(.-no-animate))::backdrop, :host(:not(.-no-animate)) .handle-row { transition: none; } } @media (forced-colors: active) { :host([modal]:not(.-no-animate))::backdrop, :host([modal]:popover-open:not(.-no-animate))::backdrop { transition: none; } .base { border-style: solid; border-width: 1px; border-color: CanvasText; } .handle { background-color: ButtonText; } }`;
|
|
2162
2168
|
__decorate([n$1({
|
|
2163
2169
|
type: Boolean,
|
|
2164
2170
|
reflect: true
|