@m3e/web 2.0.0 → 2.0.1

package/dist/bottom-sheet.js

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