@material/web 0.1.0-alpha.2 → 1.0.0-pre.1
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/autocomplete/lib/_filled-autocomplete.scss +3 -4
- package/autocomplete/lib/_outlined-autocomplete.scss +3 -3
- package/autocomplete/lib/_shared.scss +2 -7
- package/autocomplete/lib/filled-styles.css.js +1 -1
- package/autocomplete/lib/filled-styles.css.js.map +1 -1
- package/autocomplete/lib/outlined-styles.css.js +1 -1
- package/autocomplete/lib/outlined-styles.css.js.map +1 -1
- package/button/lib/_elevated-button.scss +6 -0
- package/button/lib/_elevation.scss +30 -28
- package/button/lib/_filled-button.scss +6 -0
- package/button/lib/_icon.scss +5 -12
- package/button/lib/_outlined-button.scss +10 -1
- package/button/lib/_shared.scss +16 -6
- package/button/lib/_text-button.scss +6 -0
- package/button/lib/_tonal-button.scss +6 -0
- package/button/lib/button.d.ts +1 -11
- package/button/lib/button.js +5 -30
- package/button/lib/button.js.map +1 -1
- package/button/lib/elevated-styles.css.js +1 -1
- package/button/lib/elevated-styles.css.js.map +1 -1
- package/button/lib/filled-styles.css.js +1 -1
- package/button/lib/filled-styles.css.js.map +1 -1
- package/button/lib/outlined-styles.css.js +1 -1
- package/button/lib/outlined-styles.css.js.map +1 -1
- package/button/lib/shared-elevation-styles.css.js +1 -1
- package/button/lib/shared-elevation-styles.css.js.map +1 -1
- package/button/lib/shared-styles.css.js +1 -1
- package/button/lib/shared-styles.css.js.map +1 -1
- package/button/lib/text-styles.css.js +1 -1
- package/button/lib/text-styles.css.js.map +1 -1
- package/button/lib/tonal-styles.css.js +1 -1
- package/button/lib/tonal-styles.css.js.map +1 -1
- package/checkbox/lib/_checkbox.scss +4 -0
- package/checkbox/lib/checkbox-styles.css.js +1 -1
- package/checkbox/lib/checkbox-styles.css.js.map +1 -1
- package/chips/chip/lib/_chip-theme.scss +19 -23
- package/chips/chip/lib/_chip.scss +0 -2
- package/chips/chip/lib/_input-chip-theme.scss +16 -26
- package/chips/chip/lib/chip.d.ts +1 -0
- package/chips/chip/lib/chip.js +2 -1
- package/chips/chip/lib/chip.js.map +1 -1
- package/fab/fab-extended.js +1 -2
- package/fab/fab-extended.js.map +1 -1
- package/fab/fab.js +1 -2
- package/fab/fab.js.map +1 -1
- package/fab/lib/_shared.scss +11 -9
- package/fab/lib/fab-shared-styles.css.js +1 -1
- package/fab/lib/fab-shared-styles.css.js.map +1 -1
- package/field/lib/filled-styles.css.js +1 -1
- package/field/lib/filled-styles.css.js.map +1 -1
- package/icon/lib/_icon.scss +8 -5
- package/icon/lib/icon-styles.css.js +1 -1
- package/icon/lib/icon-styles.css.js.map +1 -1
- package/iconbutton/lib/_filled-icon-button.scss +14 -0
- package/iconbutton/lib/_filled-tonal-icon-button.scss +14 -0
- package/iconbutton/lib/_outlined-icon-button.scss +16 -17
- package/iconbutton/lib/_shared.scss +29 -16
- package/iconbutton/lib/_standard-icon-button.scss +16 -0
- package/iconbutton/lib/filled-styles.css.js +1 -1
- package/iconbutton/lib/filled-styles.css.js.map +1 -1
- package/iconbutton/lib/filled-tonal-styles.css.js +1 -1
- package/iconbutton/lib/filled-tonal-styles.css.js.map +1 -1
- package/iconbutton/lib/icon-button-toggle.js +1 -1
- package/iconbutton/lib/icon-button-toggle.js.map +1 -1
- package/iconbutton/lib/icon-button.js +1 -1
- package/iconbutton/lib/icon-button.js.map +1 -1
- package/iconbutton/lib/outlined-styles.css.js +1 -1
- package/iconbutton/lib/outlined-styles.css.js.map +1 -1
- package/iconbutton/lib/shared-styles.css.js +1 -1
- package/iconbutton/lib/shared-styles.css.js.map +1 -1
- package/iconbutton/lib/standard-styles.css.js +1 -1
- package/iconbutton/lib/standard-styles.css.js.map +1 -1
- package/list/lib/_list.scss +20 -14
- package/list/lib/divider/list-divider.js +2 -0
- package/list/lib/divider/list-divider.js.map +1 -1
- package/list/lib/list-styles.css.js +1 -1
- package/list/lib/list-styles.css.js.map +1 -1
- package/list/lib/list.d.ts +1 -0
- package/list/lib/list.js +4 -1
- package/list/lib/list.js.map +1 -1
- package/list/lib/listitem/list-item.js +2 -0
- package/list/lib/listitem/list-item.js.map +1 -1
- package/menu/lib/_menu.scss +7 -10
- package/menu/lib/menu-styles.css.js +1 -1
- package/menu/lib/menu-styles.css.js.map +1 -1
- package/menusurface/lib/_md-comp-menu-surface.scss +6 -14
- package/menusurface/lib/_menu-surface.scss +8 -4
- package/menusurface/lib/menu-surface-styles.css.js +1 -1
- package/menusurface/lib/menu-surface-styles.css.js.map +1 -1
- package/menusurface/lib/menu-surface.d.ts +1 -0
- package/menusurface/lib/menu-surface.js +2 -0
- package/menusurface/lib/menu-surface.js.map +1 -1
- package/navigationdrawer/lib/_navigation-drawer-modal.scss +7 -22
- package/navigationdrawer/lib/_navigation-drawer.scss +15 -18
- package/navigationdrawer/lib/_shared.scss +2 -7
- package/navigationdrawer/lib/navigation-drawer-modal-styles.css.js +1 -1
- package/navigationdrawer/lib/navigation-drawer-modal-styles.css.js.map +1 -1
- package/navigationdrawer/lib/navigation-drawer-styles.css.js +1 -1
- package/navigationdrawer/lib/navigation-drawer-styles.css.js.map +1 -1
- package/navigationdrawer/lib/navigation-drawer.d.ts +1 -0
- package/navigationdrawer/lib/navigation-drawer.js +3 -2
- package/navigationdrawer/lib/navigation-drawer.js.map +1 -1
- package/package.json +8 -1
- package/radio/_radio.scss +6 -1
- package/radio/lib/_radio.scss +127 -91
- package/{elevationold/lib/elevation-overlay-styles.css.d.ts → radio/lib/forced-colors-styles.css.d.ts} +0 -0
- package/radio/lib/forced-colors-styles.css.js +9 -0
- package/radio/lib/forced-colors-styles.css.js.map +1 -0
- package/radio/lib/forced-colors-styles.scss +27 -0
- package/radio/lib/radio-styles.css.js +1 -1
- package/radio/lib/radio-styles.css.js.map +1 -1
- package/radio/lib/radio-styles.scss +1 -7
- package/radio/lib/radio.d.ts +6 -44
- package/radio/lib/radio.js +42 -144
- package/radio/lib/radio.js.map +1 -1
- package/radio/lib/single-selection-controller.d.ts +51 -138
- package/radio/lib/single-selection-controller.js +153 -249
- package/radio/lib/single-selection-controller.js.map +1 -1
- package/radio/radio.js +2 -1
- package/radio/radio.js.map +1 -1
- package/textfield/lib/_shared.scss +1 -0
- package/textfield/lib/filled-styles.css.js +1 -1
- package/textfield/lib/filled-styles.css.js.map +1 -1
- package/textfield/lib/shared-styles.css.js +1 -1
- package/textfield/lib/shared-styles.css.js.map +1 -1
- package/textfield/lib/text-field.js +3 -0
- package/textfield/lib/text-field.js.map +1 -1
- package/tokens/_index.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_index.scss +0 -0
- package/tokens/{v0_144 → v0_150}/_md-comp-assist-chip.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-badge.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-banner.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-bottom-app-bar.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-carousel-item.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-checkbox.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-circular-progress-indicator.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-data-table.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-date-input-modal.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-date-picker-docked.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-date-picker-modal.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-dialog.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-divider.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-elevated-button.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-elevated-card.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-extended-fab-branded.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-extended-fab-primary.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-extended-fab-secondary.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-extended-fab-surface.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-extended-fab-tertiary.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-fab-branded-large.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-fab-branded.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-fab-primary-large.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-fab-primary-small.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-fab-primary.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-fab-secondary-large.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-fab-secondary-small.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-fab-secondary.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-fab-surface-large.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-fab-surface-small.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-fab-surface.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-fab-tertiary-large.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-fab-tertiary-small.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-fab-tertiary.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-filled-autocomplete.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-filled-button.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-filled-card.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-filled-icon-button.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-filled-menu-button.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-filled-select.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-filled-text-field.scss +2 -2
- package/tokens/{v0_144 → v0_150}/_md-comp-filled-tonal-button.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-filled-tonal-icon-button.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-filter-chip.scss +2 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-full-screen-dialog.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-icon-button.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-input-chip.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-linear-progress-indicator.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-list.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-menu.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-navigation-bar.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-navigation-drawer.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-navigation-rail.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-outlined-autocomplete.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-outlined-button.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-outlined-card.scss +5 -5
- package/tokens/{v0_144 → v0_150}/_md-comp-outlined-icon-button.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-outlined-menu-button.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-outlined-segmented-button.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-outlined-select.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-outlined-text-field.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-plain-tooltip.scss +2 -2
- package/tokens/{v0_144 → v0_150}/_md-comp-primary-navigation-tab.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-radio-button.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-rich-tooltip.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-scrim.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-search-bar.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-search-view.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-secondary-navigation-tab.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-sheet-bottom.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-sheet-floating.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-sheet-side.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-slider.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-snackbar.scss +25 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-standard-menu-button.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-suggestion-chip.scss +6 -6
- package/tokens/{v0_144 → v0_150}/_md-comp-switch.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-text-button.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-time-input.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-time-picker.scss +2 -2
- package/tokens/{v0_144 → v0_150}/_md-comp-top-app-bar-large.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-top-app-bar-medium.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-top-app-bar-small-centered.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-comp-top-app-bar-small.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-ref-palette.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-ref-typeface.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-sys-color.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-sys-elevation.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-sys-motion.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-sys-shape.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-sys-state.scss +1 -1
- package/tokens/{v0_144 → v0_150}/_md-sys-typescale.scss +1 -1
- package/tokens/v0_150/index.test.css.d.ts +1 -0
- package/tokens/v0_150/index.test.css.js +9 -0
- package/tokens/v0_150/index.test.css.js.map +1 -0
- package/tokens/v0_150/index.test.scss +584 -0
- package/tokens/v0_150/lib.test.css.d.ts +1 -0
- package/tokens/v0_150/lib.test.css.js +9 -0
- package/tokens/v0_150/lib.test.css.js.map +1 -0
- package/tokens/v0_150/lib.test.scss +663 -0
- package/elevationold/lib/_elevation-overlay-theme.scss +0 -31
- package/elevationold/lib/_elevation-overlay.scss +0 -18
- package/elevationold/lib/_elevation-theme.scss +0 -74
- package/elevationold/lib/_surface.scss +0 -15
- package/elevationold/lib/elevation-overlay-styles.css.js +0 -9
- package/elevationold/lib/elevation-overlay-styles.css.js.map +0 -1
- package/elevationold/lib/elevation-overlay-styles.scss +0 -9
- package/radio/lib/_radio-theme.scss +0 -377
|
@@ -4,6 +4,6 @@
|
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
6
|
import { css } from 'lit';
|
|
7
|
-
export const styles = css `:host{--_cascading-menu-indicator-icon-color: var(--md-menu-cascading-menu-indicator-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_cascading-menu-indicator-icon-size: var(--md-menu-cascading-menu-indicator-icon-size, 24px);--_container-color: var(--md-menu-container-color, var(--md-sys-color-surface, #fffbfe));--_container-shape: var(--md-menu-container-shape, 4px);--_container-surface-tint-layer-color: var(--md-menu-container-surface-tint-layer-color, var(--md-sys-color-primary, #6750a4));--_divider-color: var(--md-menu-divider-color, var(--md-sys-color-surface-variant, #e7e0ec));--_divider-height: var(--md-menu-divider-height, 1px);--_list-item-container-height: var(--md-menu-list-item-container-height, 48px);--_list-item-disabled-label-text-color: var(--md-menu-list-item-disabled-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-disabled-label-text-opacity: var(--md-menu-list-item-disabled-label-text-opacity, 0.38);--_list-item-focus-label-text-color: var(--md-menu-list-item-focus-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-focus-state-layer-color: var(--md-menu-list-item-focus-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-focus-state-layer-opacity: var(--md-menu-list-item-focus-state-layer-opacity, 0.12);--_list-item-hover-label-text-color: var(--md-menu-list-item-hover-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-hover-state-layer-color: var(--md-menu-list-item-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-hover-state-layer-opacity: var(--md-menu-list-item-hover-state-layer-opacity, 0.08);--_list-item-label-text-color: var(--md-menu-list-item-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-label-text-font: var(--md-menu-list-item-label-text-font, Roboto);--_list-item-label-text-line-height: var(--md-menu-list-item-label-text-line-height, 1.25rem);--_list-item-label-text-size: var(--md-menu-list-item-label-text-size, 0.875rem);--_list-item-label-text-tracking: var(--md-menu-list-item-label-text-tracking, 0.006rem);--_list-item-label-text-type: var(--md-menu-list-item-label-text-type, 500 0.875rem / 1.25rem Roboto);--_list-item-label-text-weight: var(--md-menu-list-item-label-text-weight, 500);--_list-item-pressed-label-text-color: var(--md-menu-list-item-pressed-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-pressed-state-layer-color: var(--md-menu-list-item-pressed-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-pressed-state-layer-opacity: var(--md-menu-list-item-pressed-state-layer-opacity, 0.12);--_list-item-selected-container-color: var(--md-menu-list-item-selected-container-color, var(--md-sys-color-surface-variant, #e7e0ec));--_list-item-with-leading-icon-disabled-leading-icon-color: var(--md-menu-list-item-with-leading-icon-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-with-leading-icon-disabled-leading-icon-opacity: var(--md-menu-list-item-with-leading-icon-disabled-leading-icon-opacity, 0.38);--_list-item-with-leading-icon-focus-icon-color: var(--md-menu-list-item-with-leading-icon-focus-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-with-leading-icon-hover-icon-color: var(--md-menu-list-item-with-leading-icon-hover-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-with-leading-icon-leading-icon-color: var(--md-menu-list-item-with-leading-icon-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-with-leading-icon-leading-icon-size: var(--md-menu-list-item-with-leading-icon-leading-icon-size, 24px);--_list-item-with-leading-icon-pressed-icon-color: var(--md-menu-list-item-with-leading-icon-pressed-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-with-trailing-icon-disabled-trailing-icon-color: var(--md-menu-list-item-with-trailing-icon-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-with-trailing-icon-disabled-trailing-icon-opacity: var(--md-menu-list-item-with-trailing-icon-disabled-trailing-icon-opacity, 0.38);--_list-item-with-trailing-icon-focus-icon-color: var(--md-menu-list-item-with-trailing-icon-focus-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-with-trailing-icon-hover-icon-color: var(--md-menu-list-item-with-trailing-icon-hover-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-with-trailing-icon-pressed-icon-color: var(--md-menu-list-item-with-trailing-icon-pressed-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-with-trailing-icon-trailing-icon-color: var(--md-menu-list-item-with-trailing-icon-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-with-trailing-icon-trailing-icon-size: var(--md-menu-list-item-with-trailing-icon-trailing-icon-size, 24px)
|
|
7
|
+
export const styles = css `:host{--_cascading-menu-indicator-icon-color: var(--md-menu-cascading-menu-indicator-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_cascading-menu-indicator-icon-size: var(--md-menu-cascading-menu-indicator-icon-size, 24px);--_container-color: var(--md-menu-container-color, var(--md-sys-color-surface, #fffbfe));--_container-elevation: var(--md-menu-container-elevation, 2);--_container-shadow-color: var(--md-menu-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-shape: var(--md-menu-container-shape, 4px);--_container-surface-tint-layer-color: var(--md-menu-container-surface-tint-layer-color, var(--md-sys-color-primary, #6750a4));--_divider-color: var(--md-menu-divider-color, var(--md-sys-color-surface-variant, #e7e0ec));--_divider-height: var(--md-menu-divider-height, 1px);--_list-item-container-height: var(--md-menu-list-item-container-height, 48px);--_list-item-disabled-label-text-color: var(--md-menu-list-item-disabled-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-disabled-label-text-opacity: var(--md-menu-list-item-disabled-label-text-opacity, 0.38);--_list-item-focus-label-text-color: var(--md-menu-list-item-focus-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-focus-state-layer-color: var(--md-menu-list-item-focus-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-focus-state-layer-opacity: var(--md-menu-list-item-focus-state-layer-opacity, 0.12);--_list-item-hover-label-text-color: var(--md-menu-list-item-hover-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-hover-state-layer-color: var(--md-menu-list-item-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-hover-state-layer-opacity: var(--md-menu-list-item-hover-state-layer-opacity, 0.08);--_list-item-label-text-color: var(--md-menu-list-item-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-label-text-font: var(--md-menu-list-item-label-text-font, Roboto);--_list-item-label-text-line-height: var(--md-menu-list-item-label-text-line-height, 1.25rem);--_list-item-label-text-size: var(--md-menu-list-item-label-text-size, 0.875rem);--_list-item-label-text-tracking: var(--md-menu-list-item-label-text-tracking, 0.006rem);--_list-item-label-text-type: var(--md-menu-list-item-label-text-type, 500 0.875rem / 1.25rem Roboto);--_list-item-label-text-weight: var(--md-menu-list-item-label-text-weight, 500);--_list-item-pressed-label-text-color: var(--md-menu-list-item-pressed-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-pressed-state-layer-color: var(--md-menu-list-item-pressed-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-pressed-state-layer-opacity: var(--md-menu-list-item-pressed-state-layer-opacity, 0.12);--_list-item-selected-container-color: var(--md-menu-list-item-selected-container-color, var(--md-sys-color-surface-variant, #e7e0ec));--_list-item-with-leading-icon-disabled-leading-icon-color: var(--md-menu-list-item-with-leading-icon-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-with-leading-icon-disabled-leading-icon-opacity: var(--md-menu-list-item-with-leading-icon-disabled-leading-icon-opacity, 0.38);--_list-item-with-leading-icon-focus-icon-color: var(--md-menu-list-item-with-leading-icon-focus-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-with-leading-icon-hover-icon-color: var(--md-menu-list-item-with-leading-icon-hover-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-with-leading-icon-leading-icon-color: var(--md-menu-list-item-with-leading-icon-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-with-leading-icon-leading-icon-size: var(--md-menu-list-item-with-leading-icon-leading-icon-size, 24px);--_list-item-with-leading-icon-pressed-icon-color: var(--md-menu-list-item-with-leading-icon-pressed-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-with-trailing-icon-disabled-trailing-icon-color: var(--md-menu-list-item-with-trailing-icon-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-with-trailing-icon-disabled-trailing-icon-opacity: var(--md-menu-list-item-with-trailing-icon-disabled-trailing-icon-opacity, 0.38);--_list-item-with-trailing-icon-focus-icon-color: var(--md-menu-list-item-with-trailing-icon-focus-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-with-trailing-icon-hover-icon-color: var(--md-menu-list-item-with-trailing-icon-hover-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-with-trailing-icon-pressed-icon-color: var(--md-menu-list-item-with-trailing-icon-pressed-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-with-trailing-icon-trailing-icon-color: var(--md-menu-list-item-with-trailing-icon-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-with-trailing-icon-trailing-icon-size: var(--md-menu-list-item-with-trailing-icon-trailing-icon-size, 24px)}.md3-menu{--md-menu-surface-container-elevation:var(--_container-elevation);--md-menu-surface-container-shape:var(--_container-shape);--md-menu-surface-container-shadow-color:var(--_container-shadow-color);--md-menu-surface-container-surface-tint-layer-color:var(--_container-surface-tint-layer-color);--md-list-container-color:var(--_container-color);--md-list-container-surface-tint-layer-color:var(--_container-surface-tint-layer-color);--md-list-container-elevation:var(--_container-elevation);--md-list-list-item-container-color:var(--_container-color);--md-list-list-item-one-line-container-height:var(--_list-item-container-height);--md-list-list-item-disabled-label-text-color:var(--_list-item-disabled-label-text-color);--md-list-list-item-disabled-label-text-opacity:var(--_list-item-disabled-label-text-opacity);--md-list-list-item-hover-label-text-color:var(--_list-item-hover-label-text-color);--md-list-list-item-hover-state-layer-color:var(--_list-item-hover-state-layer-color);--md-list-list-item-hover-state-layer-opacity:var(--_list-item-hover-state-layer-opacity);--md-list-list-item-label-text-color:var(--_list-item-label-text-color);--md-list-list-item-label-text-font:var(--_list-item-label-text-font);--md-list-list-item-label-text-line-height:var(--_list-item-label-text-line-height);--md-list-list-item-label-text-size:var(--_list-item-label-text-size);--md-list-list-item-label-text-tracking:var(--_list-item-label-text-tracking);--md-list-list-item-label-text-weight:var(--_list-item-label-text-tracking);--md-list-list-item-disabled-leading-icon-color:var(--_list-item-with-leading-icon-disabled-leading-icon-color);--md-list-list-item-disabled-leading-icon-opacity:var(--_list-item-with-leading-icon-disabled-leading-icon-opacity);--md-list-list-item-hover-leading-icon-color:var(--_list-item-with-leading-icon-hover-icon-color);--md-list-list-item-leading-icon-color:var(--_list-item-with-leading-icon-leading-icon-color);--md-list-list-item-leading-icon-size:var(--_list-item-with-leading-icon-leading-icon-size);--md-list-list-item-disabled-trailing-icon-color:var(--_list-item-with-trailing-icon-disabled-trailing-icon-color);--md-list-list-item-disabled-trailing-icon-opacity:var(--_list-item-with-trailing-icon-disabled-trailing-icon-opacity);--md-list-list-item-hover-trailing-icon-color:var(--_list-item-with-trailing-icon-hover-icon-color);--md-list-list-item-trailing-icon-color:var(--_list-item-with-trailing-icon-trailing-icon-color);--md-list-list-item-trailing-icon-size:var(--_list-item-with-leading-icon-trailing-icon-size)}/*# sourceMappingURL=menu-styles.css.map */
|
|
8
8
|
`;
|
|
9
9
|
//# sourceMappingURL=menu-styles.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu-styles.css.js","sourceRoot":"","sources":["menu-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`:host{--_cascading-menu-indicator-icon-color: var(--md-menu-cascading-menu-indicator-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_cascading-menu-indicator-icon-size: var(--md-menu-cascading-menu-indicator-icon-size, 24px);--_container-color: var(--md-menu-container-color, var(--md-sys-color-surface, #fffbfe));--_container-shape: var(--md-menu-container-shape, 4px);--_container-surface-tint-layer-color: var(--md-menu-container-surface-tint-layer-color, var(--md-sys-color-primary, #6750a4));--_divider-color: var(--md-menu-divider-color, var(--md-sys-color-surface-variant, #e7e0ec));--_divider-height: var(--md-menu-divider-height, 1px);--_list-item-container-height: var(--md-menu-list-item-container-height, 48px);--_list-item-disabled-label-text-color: var(--md-menu-list-item-disabled-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-disabled-label-text-opacity: var(--md-menu-list-item-disabled-label-text-opacity, 0.38);--_list-item-focus-label-text-color: var(--md-menu-list-item-focus-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-focus-state-layer-color: var(--md-menu-list-item-focus-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-focus-state-layer-opacity: var(--md-menu-list-item-focus-state-layer-opacity, 0.12);--_list-item-hover-label-text-color: var(--md-menu-list-item-hover-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-hover-state-layer-color: var(--md-menu-list-item-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-hover-state-layer-opacity: var(--md-menu-list-item-hover-state-layer-opacity, 0.08);--_list-item-label-text-color: var(--md-menu-list-item-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-label-text-font: var(--md-menu-list-item-label-text-font, Roboto);--_list-item-label-text-line-height: var(--md-menu-list-item-label-text-line-height, 1.25rem);--_list-item-label-text-size: var(--md-menu-list-item-label-text-size, 0.875rem);--_list-item-label-text-tracking: var(--md-menu-list-item-label-text-tracking, 0.006rem);--_list-item-label-text-type: var(--md-menu-list-item-label-text-type, 500 0.875rem / 1.25rem Roboto);--_list-item-label-text-weight: var(--md-menu-list-item-label-text-weight, 500);--_list-item-pressed-label-text-color: var(--md-menu-list-item-pressed-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-pressed-state-layer-color: var(--md-menu-list-item-pressed-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-pressed-state-layer-opacity: var(--md-menu-list-item-pressed-state-layer-opacity, 0.12);--_list-item-selected-container-color: var(--md-menu-list-item-selected-container-color, var(--md-sys-color-surface-variant, #e7e0ec));--_list-item-with-leading-icon-disabled-leading-icon-color: var(--md-menu-list-item-with-leading-icon-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-with-leading-icon-disabled-leading-icon-opacity: var(--md-menu-list-item-with-leading-icon-disabled-leading-icon-opacity, 0.38);--_list-item-with-leading-icon-focus-icon-color: var(--md-menu-list-item-with-leading-icon-focus-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-with-leading-icon-hover-icon-color: var(--md-menu-list-item-with-leading-icon-hover-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-with-leading-icon-leading-icon-color: var(--md-menu-list-item-with-leading-icon-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-with-leading-icon-leading-icon-size: var(--md-menu-list-item-with-leading-icon-leading-icon-size, 24px);--_list-item-with-leading-icon-pressed-icon-color: var(--md-menu-list-item-with-leading-icon-pressed-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-with-trailing-icon-disabled-trailing-icon-color: var(--md-menu-list-item-with-trailing-icon-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-with-trailing-icon-disabled-trailing-icon-opacity: var(--md-menu-list-item-with-trailing-icon-disabled-trailing-icon-opacity, 0.38);--_list-item-with-trailing-icon-focus-icon-color: var(--md-menu-list-item-with-trailing-icon-focus-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-with-trailing-icon-hover-icon-color: var(--md-menu-list-item-with-trailing-icon-hover-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-with-trailing-icon-pressed-icon-color: var(--md-menu-list-item-with-trailing-icon-pressed-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-with-trailing-icon-trailing-icon-color: var(--md-menu-list-item-with-trailing-icon-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-with-trailing-icon-trailing-icon-size: var(--md-menu-list-item-with-trailing-icon-trailing-icon-size, 24px)
|
|
1
|
+
{"version":3,"file":"menu-styles.css.js","sourceRoot":"","sources":["menu-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`:host{--_cascading-menu-indicator-icon-color: var(--md-menu-cascading-menu-indicator-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_cascading-menu-indicator-icon-size: var(--md-menu-cascading-menu-indicator-icon-size, 24px);--_container-color: var(--md-menu-container-color, var(--md-sys-color-surface, #fffbfe));--_container-elevation: var(--md-menu-container-elevation, 2);--_container-shadow-color: var(--md-menu-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-shape: var(--md-menu-container-shape, 4px);--_container-surface-tint-layer-color: var(--md-menu-container-surface-tint-layer-color, var(--md-sys-color-primary, #6750a4));--_divider-color: var(--md-menu-divider-color, var(--md-sys-color-surface-variant, #e7e0ec));--_divider-height: var(--md-menu-divider-height, 1px);--_list-item-container-height: var(--md-menu-list-item-container-height, 48px);--_list-item-disabled-label-text-color: var(--md-menu-list-item-disabled-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-disabled-label-text-opacity: var(--md-menu-list-item-disabled-label-text-opacity, 0.38);--_list-item-focus-label-text-color: var(--md-menu-list-item-focus-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-focus-state-layer-color: var(--md-menu-list-item-focus-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-focus-state-layer-opacity: var(--md-menu-list-item-focus-state-layer-opacity, 0.12);--_list-item-hover-label-text-color: var(--md-menu-list-item-hover-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-hover-state-layer-color: var(--md-menu-list-item-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-hover-state-layer-opacity: var(--md-menu-list-item-hover-state-layer-opacity, 0.08);--_list-item-label-text-color: var(--md-menu-list-item-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-label-text-font: var(--md-menu-list-item-label-text-font, Roboto);--_list-item-label-text-line-height: var(--md-menu-list-item-label-text-line-height, 1.25rem);--_list-item-label-text-size: var(--md-menu-list-item-label-text-size, 0.875rem);--_list-item-label-text-tracking: var(--md-menu-list-item-label-text-tracking, 0.006rem);--_list-item-label-text-type: var(--md-menu-list-item-label-text-type, 500 0.875rem / 1.25rem Roboto);--_list-item-label-text-weight: var(--md-menu-list-item-label-text-weight, 500);--_list-item-pressed-label-text-color: var(--md-menu-list-item-pressed-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-pressed-state-layer-color: var(--md-menu-list-item-pressed-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-pressed-state-layer-opacity: var(--md-menu-list-item-pressed-state-layer-opacity, 0.12);--_list-item-selected-container-color: var(--md-menu-list-item-selected-container-color, var(--md-sys-color-surface-variant, #e7e0ec));--_list-item-with-leading-icon-disabled-leading-icon-color: var(--md-menu-list-item-with-leading-icon-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-with-leading-icon-disabled-leading-icon-opacity: var(--md-menu-list-item-with-leading-icon-disabled-leading-icon-opacity, 0.38);--_list-item-with-leading-icon-focus-icon-color: var(--md-menu-list-item-with-leading-icon-focus-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-with-leading-icon-hover-icon-color: var(--md-menu-list-item-with-leading-icon-hover-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-with-leading-icon-leading-icon-color: var(--md-menu-list-item-with-leading-icon-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-with-leading-icon-leading-icon-size: var(--md-menu-list-item-with-leading-icon-leading-icon-size, 24px);--_list-item-with-leading-icon-pressed-icon-color: var(--md-menu-list-item-with-leading-icon-pressed-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-with-trailing-icon-disabled-trailing-icon-color: var(--md-menu-list-item-with-trailing-icon-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-with-trailing-icon-disabled-trailing-icon-opacity: var(--md-menu-list-item-with-trailing-icon-disabled-trailing-icon-opacity, 0.38);--_list-item-with-trailing-icon-focus-icon-color: var(--md-menu-list-item-with-trailing-icon-focus-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-with-trailing-icon-hover-icon-color: var(--md-menu-list-item-with-trailing-icon-hover-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-with-trailing-icon-pressed-icon-color: var(--md-menu-list-item-with-trailing-icon-pressed-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-with-trailing-icon-trailing-icon-color: var(--md-menu-list-item-with-trailing-icon-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-with-trailing-icon-trailing-icon-size: var(--md-menu-list-item-with-trailing-icon-trailing-icon-size, 24px)}.md3-menu{--md-menu-surface-container-elevation:var(--_container-elevation);--md-menu-surface-container-shape:var(--_container-shape);--md-menu-surface-container-shadow-color:var(--_container-shadow-color);--md-menu-surface-container-surface-tint-layer-color:var(--_container-surface-tint-layer-color);--md-list-container-color:var(--_container-color);--md-list-container-surface-tint-layer-color:var(--_container-surface-tint-layer-color);--md-list-container-elevation:var(--_container-elevation);--md-list-list-item-container-color:var(--_container-color);--md-list-list-item-one-line-container-height:var(--_list-item-container-height);--md-list-list-item-disabled-label-text-color:var(--_list-item-disabled-label-text-color);--md-list-list-item-disabled-label-text-opacity:var(--_list-item-disabled-label-text-opacity);--md-list-list-item-hover-label-text-color:var(--_list-item-hover-label-text-color);--md-list-list-item-hover-state-layer-color:var(--_list-item-hover-state-layer-color);--md-list-list-item-hover-state-layer-opacity:var(--_list-item-hover-state-layer-opacity);--md-list-list-item-label-text-color:var(--_list-item-label-text-color);--md-list-list-item-label-text-font:var(--_list-item-label-text-font);--md-list-list-item-label-text-line-height:var(--_list-item-label-text-line-height);--md-list-list-item-label-text-size:var(--_list-item-label-text-size);--md-list-list-item-label-text-tracking:var(--_list-item-label-text-tracking);--md-list-list-item-label-text-weight:var(--_list-item-label-text-tracking);--md-list-list-item-disabled-leading-icon-color:var(--_list-item-with-leading-icon-disabled-leading-icon-color);--md-list-list-item-disabled-leading-icon-opacity:var(--_list-item-with-leading-icon-disabled-leading-icon-opacity);--md-list-list-item-hover-leading-icon-color:var(--_list-item-with-leading-icon-hover-icon-color);--md-list-list-item-leading-icon-color:var(--_list-item-with-leading-icon-leading-icon-color);--md-list-list-item-leading-icon-size:var(--_list-item-with-leading-icon-leading-icon-size);--md-list-list-item-disabled-trailing-icon-color:var(--_list-item-with-trailing-icon-disabled-trailing-icon-color);--md-list-list-item-disabled-trailing-icon-opacity:var(--_list-item-with-trailing-icon-disabled-trailing-icon-opacity);--md-list-list-item-hover-trailing-icon-color:var(--_list-item-with-trailing-icon-hover-icon-color);--md-list-list-item-trailing-icon-color:var(--_list-item-with-trailing-icon-trailing-icon-color);--md-list-list-item-trailing-icon-size:var(--_list-item-with-leading-icon-trailing-icon-size)}/*# sourceMappingURL=menu-styles.css.map */\n`;\n "]}
|
|
@@ -4,8 +4,7 @@
|
|
|
4
4
|
//
|
|
5
5
|
|
|
6
6
|
@use 'sass:map';
|
|
7
|
-
@use '../../
|
|
8
|
-
@use '../../sass/resolvers';
|
|
7
|
+
@use '../../elevation/lib/elevation';
|
|
9
8
|
@use '../../tokens';
|
|
10
9
|
|
|
11
10
|
$_default-deps: (
|
|
@@ -17,19 +16,12 @@ $_default-deps: (
|
|
|
17
16
|
@function values($deps: $_default-deps, $exclude-hardcoded-values: false) {
|
|
18
17
|
// Use menu tokens for default menu surface values.
|
|
19
18
|
$menu-values: tokens.md-comp-menu-values($deps, $exclude-hardcoded-values);
|
|
20
|
-
// Note that we don't use "real" elevation tokens here because menu surface
|
|
21
|
-
// does not have defined tokens. Components that use menu surface are expected
|
|
22
|
-
// to pass through their own resolved tokens.
|
|
23
|
-
$menu-values: elevation-theme.resolve-theme(
|
|
24
|
-
$menu-values,
|
|
25
|
-
map.get(resolvers.$material, 'elevation'),
|
|
26
|
-
$shadow-color-token: 'container-shadow-color',
|
|
27
|
-
$elevation-tokens: (container-elevation)
|
|
28
|
-
);
|
|
29
19
|
|
|
30
20
|
@return (
|
|
31
|
-
container-elevation-
|
|
32
|
-
|
|
33
|
-
container-shape: map.get($menu-values, container-shape)
|
|
21
|
+
container-elevation: map.get($menu-values, container-elevation),
|
|
22
|
+
container-shadow-color: map.get($menu-values, container-shadow-color),
|
|
23
|
+
container-shape: map.get($menu-values, container-shape),
|
|
24
|
+
container-surface-tint-layer-color:
|
|
25
|
+
map.get($menu-values, container-surface-tint-layer-color)
|
|
34
26
|
);
|
|
35
27
|
}
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
// Selector '.md3-*' should only be used in this project.
|
|
8
8
|
|
|
9
9
|
@use 'sass:map';
|
|
10
|
-
@use '../../
|
|
10
|
+
@use '../../elevation/lib/elevation';
|
|
11
11
|
@use '../../sass/theme';
|
|
12
12
|
@use './md-comp-menu-surface';
|
|
13
13
|
|
|
@@ -23,6 +23,7 @@ $_deceleration-curve-timing-function: cubic-bezier(0, 0, 0.2, 1) !default;
|
|
|
23
23
|
|
|
24
24
|
@mixin theme($tokens) {
|
|
25
25
|
$tokens: theme.validate-theme(md-comp-menu-surface.values(), $tokens);
|
|
26
|
+
$tokens: elevation.resolve-tokens($tokens, 'container-elevation');
|
|
26
27
|
$tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
|
|
27
28
|
|
|
28
29
|
@include theme.emit-theme-vars($tokens);
|
|
@@ -30,6 +31,7 @@ $_deceleration-curve-timing-function: cubic-bezier(0, 0, 0.2, 1) !default;
|
|
|
30
31
|
|
|
31
32
|
@mixin styles() {
|
|
32
33
|
$tokens: md-comp-menu-surface.values();
|
|
34
|
+
$tokens: elevation.resolve-tokens($tokens, 'container-elevation');
|
|
33
35
|
$tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
|
|
34
36
|
|
|
35
37
|
:host {
|
|
@@ -57,13 +59,15 @@ $_deceleration-curve-timing-function: cubic-bezier(0, 0, 0.2, 1) !default;
|
|
|
57
59
|
will-change: transform, opacity;
|
|
58
60
|
z-index: $_z-index;
|
|
59
61
|
|
|
60
|
-
@include elevation
|
|
62
|
+
@include elevation.theme(
|
|
61
63
|
(
|
|
62
|
-
|
|
64
|
+
level: var(--_container-elevation),
|
|
65
|
+
shadow-color: var(--_container-shadow-color),
|
|
66
|
+
surface-tint-color: var(--_container-surface-tint-layer-color),
|
|
63
67
|
)
|
|
64
68
|
);
|
|
65
69
|
|
|
66
|
-
|
|
70
|
+
md-elevation {
|
|
67
71
|
z-index: 0;
|
|
68
72
|
}
|
|
69
73
|
|
|
@@ -4,6 +4,6 @@
|
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
6
|
import { css } from 'lit';
|
|
7
|
-
export const styles = css `:host{--_container-elevation
|
|
7
|
+
export const styles = css `:host{--_container-elevation: var(--md-menu-surface-container-elevation, 2);--_container-shadow-color: var(--md-menu-surface-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-shape: var(--md-menu-surface-container-shape, 4px);--_container-surface-tint-layer-color: var(--md-menu-surface-container-surface-tint-layer-color, var(--md-sys-color-primary, #6750a4))}.md3-menu-surface{border-radius:var(--_container-shape);box-sizing:border-box;display:none;opacity:0;overflow:auto;margin:0;max-height:calc(100vh - 32px);max-width:calc(100vw - 32px);padding:0;position:absolute;transform:scale(1);transform-origin:top left;transition:opacity .03s linear,transform .12s cubic-bezier(0, 0, 0.2, 1),height 250ms cubic-bezier(0, 0, 0.2, 1);will-change:transform,opacity;z-index:8;--md-elevation-level:var(--_container-elevation);--md-elevation-shadow-color:var(--_container-shadow-color);--md-elevation-surface-tint-color:var(--_container-surface-tint-layer-color)}.md3-menu-surface md-elevation{z-index:0}.md3-menu-surface:focus{outline:none}.md3-menu-surface--animating-open{display:inline-block;opacity:0;transform:scale(0.8)}.md3-menu-surface--open{display:inline-block;opacity:1;transform:scale(1)}.md3-menu-surface--animating-closed{display:inline-block;opacity:0;transition:opacity .075s linear}.md3-menu-surface--anchor{overflow:visible;position:relative}.md3-menu-surface--fixed{position:fixed}.md3-menu-surface--fullwidth{width:100%}.md3-menu-surface--is-open-below{border-top-left-radius:0px;border-top-right-radius:0px}/*# sourceMappingURL=menu-surface-styles.css.map */
|
|
8
8
|
`;
|
|
9
9
|
//# sourceMappingURL=menu-surface-styles.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu-surface-styles.css.js","sourceRoot":"","sources":["menu-surface-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`:host{--_container-elevation
|
|
1
|
+
{"version":3,"file":"menu-surface-styles.css.js","sourceRoot":"","sources":["menu-surface-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`:host{--_container-elevation: var(--md-menu-surface-container-elevation, 2);--_container-shadow-color: var(--md-menu-surface-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-shape: var(--md-menu-surface-container-shape, 4px);--_container-surface-tint-layer-color: var(--md-menu-surface-container-surface-tint-layer-color, var(--md-sys-color-primary, #6750a4))}.md3-menu-surface{border-radius:var(--_container-shape);box-sizing:border-box;display:none;opacity:0;overflow:auto;margin:0;max-height:calc(100vh - 32px);max-width:calc(100vw - 32px);padding:0;position:absolute;transform:scale(1);transform-origin:top left;transition:opacity .03s linear,transform .12s cubic-bezier(0, 0, 0.2, 1),height 250ms cubic-bezier(0, 0, 0.2, 1);will-change:transform,opacity;z-index:8;--md-elevation-level:var(--_container-elevation);--md-elevation-shadow-color:var(--_container-shadow-color);--md-elevation-surface-tint-color:var(--_container-surface-tint-layer-color)}.md3-menu-surface md-elevation{z-index:0}.md3-menu-surface:focus{outline:none}.md3-menu-surface--animating-open{display:inline-block;opacity:0;transform:scale(0.8)}.md3-menu-surface--open{display:inline-block;opacity:1;transform:scale(1)}.md3-menu-surface--animating-closed{display:inline-block;opacity:0;transition:opacity .075s linear}.md3-menu-surface--anchor{overflow:visible;position:relative}.md3-menu-surface--fixed{position:fixed}.md3-menu-surface--fullwidth{width:100%}.md3-menu-surface--is-open-below{border-top-left-radius:0px;border-top-right-radius:0px}/*# sourceMappingURL=menu-surface-styles.css.map */\n`;\n "]}
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
* Copyright 2022 Google LLC
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
|
+
import '../../elevation/elevation.js';
|
|
6
7
|
import { LitElement, PropertyValues } from 'lit';
|
|
7
8
|
import { ClassInfo } from 'lit/directives/class-map.js';
|
|
8
9
|
import { MDCMenuSurfaceAdapter } from './adapter.js';
|
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
import { __decorate, __metadata } from "tslib";
|
|
7
7
|
// Style preference for leading underscores.
|
|
8
8
|
// tslint:disable:strip-private-property-underscore
|
|
9
|
+
import '../../elevation/elevation.js';
|
|
9
10
|
import { html, LitElement } from 'lit';
|
|
10
11
|
import { property, query, state } from 'lit/decorators.js';
|
|
11
12
|
import { classMap } from 'lit/directives/class-map.js';
|
|
@@ -76,6 +77,7 @@ export class MenuSurface extends LitElement {
|
|
|
76
77
|
@keydown=${this.onKeydown}
|
|
77
78
|
@opened=${this.registerBodyClick}
|
|
78
79
|
@closed=${this.deregisterBodyClick}>
|
|
80
|
+
<md-elevation shadow></md-elevation>
|
|
79
81
|
<slot></slot>
|
|
80
82
|
</div>`;
|
|
81
83
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu-surface.js","sourceRoot":"","sources":["menu-surface.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// Style preference for leading underscores.\n// tslint:disable:strip-private-property-underscore\n\nimport {html, LitElement, PropertyValues} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\nimport {styleMap} from 'lit/directives/style-map.js';\n\nimport {isRtl} from '../../controller/is-rtl.js';\n\nimport {MDCMenuSurfaceAdapter} from './adapter.js';\nimport {Corner as CornerEnum} from './constants.js';\nimport {MDCMenuSurfaceFoundation} from './foundation.js';\n\nexport type Corner = keyof typeof CornerEnum;\nexport type AnchorableElement = HTMLElement&{anchor: Element | null};\n\n// tslint:disable:no-bitwise\n\n// required for closure compiler\nconst stringToCorner = {\n 'TOP_LEFT': CornerEnum.TOP_LEFT,\n 'TOP_RIGHT': CornerEnum.TOP_RIGHT,\n 'BOTTOM_LEFT': CornerEnum.BOTTOM_LEFT,\n 'BOTTOM_RIGHT': CornerEnum.BOTTOM_RIGHT,\n 'TOP_START': CornerEnum.TOP_START,\n 'TOP_END': CornerEnum.TOP_END,\n 'BOTTOM_START': CornerEnum.BOTTOM_START,\n 'BOTTOM_END': CornerEnum.BOTTOM_END,\n};\n\n/**\n * @fires opened\n * @fires closed\n */\nexport abstract class MenuSurface extends LitElement {\n protected mdcFoundation!: MDCMenuSurfaceFoundation;\n\n @query('.md3-menu-surface') mdcRoot!: HTMLDivElement;\n\n @query('slot') slotElement!: HTMLSlotElement|null;\n\n @property({type: Boolean}) absolute = false;\n\n @property({type: Boolean}) fullwidth = false;\n\n @property({type: Boolean}) fixed = false;\n\n @property({type: Number}) x: number|null = null;\n\n @property({type: Number}) y: number|null = null;\n\n // must be defined before open or else race condition in foundation occurs.\n @property({type: Boolean}) quick = false;\n\n @property({type: Boolean, reflect: true}) open = false;\n\n @property({type: Boolean}) stayOpenOnBodyClick = false;\n\n @property({type: Boolean}) skipRestoreFocus = false;\n\n protected previousFlipMenuHorizontally = false;\n\n /**\n * Whether to align the menu surface to the opposite side of the default\n * alignment.\n */\n @property({type: Boolean}) flipMenuHorizontally = false;\n\n @property({type: String}) corner: Corner = 'BOTTOM_START';\n\n @state() protected styleTop = '';\n @state() protected styleLeft = '';\n @state() protected styleRight = '';\n @state() protected styleBottom = '';\n @state() protected styleMaxHeight = '';\n @state() protected styleTransformOrigin = '';\n\n anchor: HTMLElement|null = null;\n\n protected previouslyFocused: HTMLElement|Element|null = null;\n protected previousAnchor: HTMLElement|null = null;\n protected onBodyClickBound: (evt: MouseEvent) => void = () => undefined;\n\n override render() {\n const styles = {\n 'top': this.styleTop,\n 'left': this.styleLeft,\n 'right': this.styleRight,\n 'bottom': this.styleBottom,\n 'max-height': this.styleMaxHeight,\n 'transform-origin': this.styleTransformOrigin,\n };\n\n return html`\n <div\n class=\"md3-menu-surface ${classMap(this.getRenderClasses())}\"\n style=\"${styleMap(styles)}\"\n @keydown=${this.onKeydown}\n @opened=${this.registerBodyClick}\n @closed=${this.deregisterBodyClick}>\n <slot></slot>\n </div>`;\n }\n\n /** @soyTemplate */\n protected getRenderClasses(): ClassInfo {\n return {\n 'md3-menu-surface--fixed': this.fixed,\n 'md3-menu-surface--fullwidth': this.fullwidth,\n };\n }\n\n protected override updated(changedProperties: PropertyValues<MenuSurface>) {\n if (changedProperties.has('absolute') && !this.fixed) {\n this.mdcFoundation.setIsHoisted(this.absolute);\n }\n\n if (changedProperties.has('fixed') && !this.absolute) {\n this.mdcFoundation.setFixedPosition(this.fixed);\n }\n\n if ((changedProperties.has('x') || changedProperties.has('y')) &&\n this.x !== null && this.y !== null) {\n this.mdcFoundation.setAbsolutePosition(this.x, this.y);\n this.mdcFoundation.setAnchorMargin(\n {left: this.x, top: this.y, right: -this.y, bottom: this.y});\n }\n\n if (changedProperties.has('quick')) {\n this.mdcFoundation.setQuickOpen(this.quick);\n }\n\n if (changedProperties.has('open')) {\n const wasOpen = changedProperties.get('open');\n if (this.open) {\n this.mdcFoundation.open();\n // wasOpen helps with first render (when it is `undefined`) perf\n } else if (wasOpen !== undefined) {\n this.mdcFoundation.close(this.skipRestoreFocus);\n }\n }\n\n if (changedProperties.has('flipMenuHorizontally')) {\n if (this.previousFlipMenuHorizontally !== this.flipMenuHorizontally) {\n this.mdcFoundation.flipCornerHorizontally();\n }\n this.previousFlipMenuHorizontally = this.flipMenuHorizontally;\n }\n\n if (changedProperties.has('corner') && this.corner) {\n const bitwiseCorner = stringToCorner[this.corner];\n this.mdcFoundation.setAnchorCorner(bitwiseCorner);\n }\n }\n\n protected override firstUpdated() {\n if (this.mdcFoundation !== undefined) {\n this.mdcFoundation.destroy();\n }\n\n this.mdcFoundation = new MDCMenuSurfaceFoundation(this.createAdapter());\n this.mdcFoundation.init();\n }\n\n createAdapter(): MDCMenuSurfaceAdapter {\n return {\n addClass: (className: string) => {\n this.mdcRoot.classList.add(className);\n },\n removeClass: (className: string) => {\n this.mdcRoot.classList.remove(className);\n },\n hasClass: (className: string) =>\n this.mdcRoot.classList.contains(className),\n hasAnchor: () => {\n return !!this.anchor;\n },\n notifyClose: () => {\n const init: CustomEventInit = {bubbles: true, composed: true};\n const ev = new CustomEvent('closed', init);\n this.open = false;\n this.mdcRoot.dispatchEvent(ev);\n },\n notifyClosing: () => {\n const init: CustomEventInit = {bubbles: true, composed: true};\n const ev = new CustomEvent('closing', init);\n this.mdcRoot.dispatchEvent(ev);\n },\n notifyOpen: () => {\n const init: CustomEventInit = {bubbles: true, composed: true};\n const ev = new CustomEvent('opened', init);\n this.open = true;\n this.mdcRoot.dispatchEvent(ev);\n },\n notifyOpening: () => {\n const init: CustomEventInit = {bubbles: true, composed: true};\n const ev = new CustomEvent('opening', init);\n this.mdcRoot.dispatchEvent(ev);\n },\n isElementInContainer: () => false,\n isRtl: () => this.mdcRoot ? isRtl(this.mdcRoot) : false,\n setTransformOrigin: (origin) => {\n const root = this.mdcRoot;\n if (!root) {\n return;\n }\n\n this.styleTransformOrigin = origin;\n },\n isFocused: () => {\n return this.matches(':focus-within');\n },\n saveFocus: () => {\n this.previouslyFocused = document.activeElement;\n },\n restoreFocus: () => {\n if (!this.previouslyFocused) {\n return;\n }\n\n if ('focus' in this.previouslyFocused) {\n this.previouslyFocused.focus();\n }\n },\n getInnerDimensions: () => {\n const mdcRoot = this.mdcRoot;\n\n if (!mdcRoot) {\n return {width: 0, height: 0};\n }\n\n return {width: mdcRoot.offsetWidth, height: mdcRoot.offsetHeight};\n },\n getAnchorDimensions: () => {\n const anchorElement = this.anchor;\n\n return anchorElement ? anchorElement.getBoundingClientRect() : null;\n },\n getBodyDimensions: () => {\n return {\n width: document.body.clientWidth,\n height: document.body.clientHeight,\n };\n },\n getWindowDimensions: () => {\n return {\n width: window.innerWidth,\n height: window.innerHeight,\n };\n },\n getWindowScroll: () => {\n return {\n x: window.pageXOffset,\n y: window.pageYOffset,\n };\n },\n setPosition: (position) => {\n const mdcRoot = this.mdcRoot;\n\n if (!mdcRoot) {\n return;\n }\n\n this.styleLeft = 'left' in position ? `${position.left}px` : '';\n this.styleRight = 'right' in position ? `${position.right}px` : '';\n this.styleTop = 'top' in position ? `${position.top}px` : '';\n this.styleBottom = 'bottom' in position ? `${position.bottom}px` : '';\n },\n setMaxHeight: async (height) => {\n const mdcRoot = this.mdcRoot;\n\n if (!mdcRoot) {\n return;\n }\n\n // must set both for IE support as IE will not set a var\n this.styleMaxHeight = height;\n await this.updateComplete;\n this.styleMaxHeight = `var(--md3-menu-max-height, ${height})`;\n },\n };\n }\n\n protected onKeydown(evt: KeyboardEvent) {\n if (this.mdcFoundation) {\n this.mdcFoundation.handleKeydown(evt);\n }\n }\n\n protected onBodyClick(evt: MouseEvent) {\n if (this.stayOpenOnBodyClick) {\n return;\n }\n const path = evt.composedPath();\n if (path.indexOf(this) === -1) {\n this.close();\n }\n }\n\n protected registerBodyClick() {\n this.onBodyClickBound = this.onBodyClick.bind(this);\n // capture otherwise listener closes menu after quick menu opens\n document.body.addEventListener(\n 'click', this.onBodyClickBound, {passive: true, capture: true});\n }\n\n protected deregisterBodyClick() {\n document.body.removeEventListener(\n 'click', this.onBodyClickBound, {capture: true});\n }\n\n close() {\n this.open = false;\n }\n\n show() {\n this.open = true;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"menu-surface.js","sourceRoot":"","sources":["menu-surface.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// Style preference for leading underscores.\n// tslint:disable:strip-private-property-underscore\n\nimport '../../elevation/elevation.js';\n\nimport {html, LitElement, PropertyValues} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\nimport {styleMap} from 'lit/directives/style-map.js';\n\nimport {isRtl} from '../../controller/is-rtl.js';\n\nimport {MDCMenuSurfaceAdapter} from './adapter.js';\nimport {Corner as CornerEnum} from './constants.js';\nimport {MDCMenuSurfaceFoundation} from './foundation.js';\n\nexport type Corner = keyof typeof CornerEnum;\nexport type AnchorableElement = HTMLElement&{anchor: Element | null};\n\n// tslint:disable:no-bitwise\n\n// required for closure compiler\nconst stringToCorner = {\n 'TOP_LEFT': CornerEnum.TOP_LEFT,\n 'TOP_RIGHT': CornerEnum.TOP_RIGHT,\n 'BOTTOM_LEFT': CornerEnum.BOTTOM_LEFT,\n 'BOTTOM_RIGHT': CornerEnum.BOTTOM_RIGHT,\n 'TOP_START': CornerEnum.TOP_START,\n 'TOP_END': CornerEnum.TOP_END,\n 'BOTTOM_START': CornerEnum.BOTTOM_START,\n 'BOTTOM_END': CornerEnum.BOTTOM_END,\n};\n\n/**\n * @fires opened\n * @fires closed\n */\nexport abstract class MenuSurface extends LitElement {\n protected mdcFoundation!: MDCMenuSurfaceFoundation;\n\n @query('.md3-menu-surface') mdcRoot!: HTMLDivElement;\n\n @query('slot') slotElement!: HTMLSlotElement|null;\n\n @property({type: Boolean}) absolute = false;\n\n @property({type: Boolean}) fullwidth = false;\n\n @property({type: Boolean}) fixed = false;\n\n @property({type: Number}) x: number|null = null;\n\n @property({type: Number}) y: number|null = null;\n\n // must be defined before open or else race condition in foundation occurs.\n @property({type: Boolean}) quick = false;\n\n @property({type: Boolean, reflect: true}) open = false;\n\n @property({type: Boolean}) stayOpenOnBodyClick = false;\n\n @property({type: Boolean}) skipRestoreFocus = false;\n\n protected previousFlipMenuHorizontally = false;\n\n /**\n * Whether to align the menu surface to the opposite side of the default\n * alignment.\n */\n @property({type: Boolean}) flipMenuHorizontally = false;\n\n @property({type: String}) corner: Corner = 'BOTTOM_START';\n\n @state() protected styleTop = '';\n @state() protected styleLeft = '';\n @state() protected styleRight = '';\n @state() protected styleBottom = '';\n @state() protected styleMaxHeight = '';\n @state() protected styleTransformOrigin = '';\n\n anchor: HTMLElement|null = null;\n\n protected previouslyFocused: HTMLElement|Element|null = null;\n protected previousAnchor: HTMLElement|null = null;\n protected onBodyClickBound: (evt: MouseEvent) => void = () => undefined;\n\n override render() {\n const styles = {\n 'top': this.styleTop,\n 'left': this.styleLeft,\n 'right': this.styleRight,\n 'bottom': this.styleBottom,\n 'max-height': this.styleMaxHeight,\n 'transform-origin': this.styleTransformOrigin,\n };\n\n return html`\n <div\n class=\"md3-menu-surface ${classMap(this.getRenderClasses())}\"\n style=\"${styleMap(styles)}\"\n @keydown=${this.onKeydown}\n @opened=${this.registerBodyClick}\n @closed=${this.deregisterBodyClick}>\n <md-elevation shadow></md-elevation>\n <slot></slot>\n </div>`;\n }\n\n /** @soyTemplate */\n protected getRenderClasses(): ClassInfo {\n return {\n 'md3-menu-surface--fixed': this.fixed,\n 'md3-menu-surface--fullwidth': this.fullwidth,\n };\n }\n\n protected override updated(changedProperties: PropertyValues<MenuSurface>) {\n if (changedProperties.has('absolute') && !this.fixed) {\n this.mdcFoundation.setIsHoisted(this.absolute);\n }\n\n if (changedProperties.has('fixed') && !this.absolute) {\n this.mdcFoundation.setFixedPosition(this.fixed);\n }\n\n if ((changedProperties.has('x') || changedProperties.has('y')) &&\n this.x !== null && this.y !== null) {\n this.mdcFoundation.setAbsolutePosition(this.x, this.y);\n this.mdcFoundation.setAnchorMargin(\n {left: this.x, top: this.y, right: -this.y, bottom: this.y});\n }\n\n if (changedProperties.has('quick')) {\n this.mdcFoundation.setQuickOpen(this.quick);\n }\n\n if (changedProperties.has('open')) {\n const wasOpen = changedProperties.get('open');\n if (this.open) {\n this.mdcFoundation.open();\n // wasOpen helps with first render (when it is `undefined`) perf\n } else if (wasOpen !== undefined) {\n this.mdcFoundation.close(this.skipRestoreFocus);\n }\n }\n\n if (changedProperties.has('flipMenuHorizontally')) {\n if (this.previousFlipMenuHorizontally !== this.flipMenuHorizontally) {\n this.mdcFoundation.flipCornerHorizontally();\n }\n this.previousFlipMenuHorizontally = this.flipMenuHorizontally;\n }\n\n if (changedProperties.has('corner') && this.corner) {\n const bitwiseCorner = stringToCorner[this.corner];\n this.mdcFoundation.setAnchorCorner(bitwiseCorner);\n }\n }\n\n protected override firstUpdated() {\n if (this.mdcFoundation !== undefined) {\n this.mdcFoundation.destroy();\n }\n\n this.mdcFoundation = new MDCMenuSurfaceFoundation(this.createAdapter());\n this.mdcFoundation.init();\n }\n\n createAdapter(): MDCMenuSurfaceAdapter {\n return {\n addClass: (className: string) => {\n this.mdcRoot.classList.add(className);\n },\n removeClass: (className: string) => {\n this.mdcRoot.classList.remove(className);\n },\n hasClass: (className: string) =>\n this.mdcRoot.classList.contains(className),\n hasAnchor: () => {\n return !!this.anchor;\n },\n notifyClose: () => {\n const init: CustomEventInit = {bubbles: true, composed: true};\n const ev = new CustomEvent('closed', init);\n this.open = false;\n this.mdcRoot.dispatchEvent(ev);\n },\n notifyClosing: () => {\n const init: CustomEventInit = {bubbles: true, composed: true};\n const ev = new CustomEvent('closing', init);\n this.mdcRoot.dispatchEvent(ev);\n },\n notifyOpen: () => {\n const init: CustomEventInit = {bubbles: true, composed: true};\n const ev = new CustomEvent('opened', init);\n this.open = true;\n this.mdcRoot.dispatchEvent(ev);\n },\n notifyOpening: () => {\n const init: CustomEventInit = {bubbles: true, composed: true};\n const ev = new CustomEvent('opening', init);\n this.mdcRoot.dispatchEvent(ev);\n },\n isElementInContainer: () => false,\n isRtl: () => this.mdcRoot ? isRtl(this.mdcRoot) : false,\n setTransformOrigin: (origin) => {\n const root = this.mdcRoot;\n if (!root) {\n return;\n }\n\n this.styleTransformOrigin = origin;\n },\n isFocused: () => {\n return this.matches(':focus-within');\n },\n saveFocus: () => {\n this.previouslyFocused = document.activeElement;\n },\n restoreFocus: () => {\n if (!this.previouslyFocused) {\n return;\n }\n\n if ('focus' in this.previouslyFocused) {\n this.previouslyFocused.focus();\n }\n },\n getInnerDimensions: () => {\n const mdcRoot = this.mdcRoot;\n\n if (!mdcRoot) {\n return {width: 0, height: 0};\n }\n\n return {width: mdcRoot.offsetWidth, height: mdcRoot.offsetHeight};\n },\n getAnchorDimensions: () => {\n const anchorElement = this.anchor;\n\n return anchorElement ? anchorElement.getBoundingClientRect() : null;\n },\n getBodyDimensions: () => {\n return {\n width: document.body.clientWidth,\n height: document.body.clientHeight,\n };\n },\n getWindowDimensions: () => {\n return {\n width: window.innerWidth,\n height: window.innerHeight,\n };\n },\n getWindowScroll: () => {\n return {\n x: window.pageXOffset,\n y: window.pageYOffset,\n };\n },\n setPosition: (position) => {\n const mdcRoot = this.mdcRoot;\n\n if (!mdcRoot) {\n return;\n }\n\n this.styleLeft = 'left' in position ? `${position.left}px` : '';\n this.styleRight = 'right' in position ? `${position.right}px` : '';\n this.styleTop = 'top' in position ? `${position.top}px` : '';\n this.styleBottom = 'bottom' in position ? `${position.bottom}px` : '';\n },\n setMaxHeight: async (height) => {\n const mdcRoot = this.mdcRoot;\n\n if (!mdcRoot) {\n return;\n }\n\n // must set both for IE support as IE will not set a var\n this.styleMaxHeight = height;\n await this.updateComplete;\n this.styleMaxHeight = `var(--md3-menu-max-height, ${height})`;\n },\n };\n }\n\n protected onKeydown(evt: KeyboardEvent) {\n if (this.mdcFoundation) {\n this.mdcFoundation.handleKeydown(evt);\n }\n }\n\n protected onBodyClick(evt: MouseEvent) {\n if (this.stayOpenOnBodyClick) {\n return;\n }\n const path = evt.composedPath();\n if (path.indexOf(this) === -1) {\n this.close();\n }\n }\n\n protected registerBodyClick() {\n this.onBodyClickBound = this.onBodyClick.bind(this);\n // capture otherwise listener closes menu after quick menu opens\n document.body.addEventListener(\n 'click', this.onBodyClickBound, {passive: true, capture: true});\n }\n\n protected deregisterBodyClick() {\n document.body.removeEventListener(\n 'click', this.onBodyClickBound, {capture: true});\n }\n\n close() {\n this.open = false;\n }\n\n show() {\n this.open = true;\n }\n}\n"]}
|
|
@@ -7,9 +7,8 @@
|
|
|
7
7
|
// Selector '.md3-*' should only be used in this project.
|
|
8
8
|
|
|
9
9
|
@use 'sass:map';
|
|
10
|
+
@use '../../elevation/elevation';
|
|
10
11
|
@use '../../motion/animation';
|
|
11
|
-
@use '../../elevationold/lib/elevation-overlay';
|
|
12
|
-
@use '../../elevationold/lib/elevation-theme';
|
|
13
12
|
@use '../../sass/theme';
|
|
14
13
|
@use './shared';
|
|
15
14
|
|
|
@@ -48,9 +47,13 @@ $_reference: (
|
|
|
48
47
|
@each $token, $value in $tokens {
|
|
49
48
|
--_#{$token}: #{$value};
|
|
50
49
|
}
|
|
51
|
-
}
|
|
52
50
|
|
|
53
|
-
|
|
51
|
+
@include elevation.theme(
|
|
52
|
+
(
|
|
53
|
+
level: var(--_modal-container-elevation),
|
|
54
|
+
)
|
|
55
|
+
);
|
|
56
|
+
}
|
|
54
57
|
|
|
55
58
|
.md3-navigation-drawer-modal {
|
|
56
59
|
bottom: 0;
|
|
@@ -64,29 +67,11 @@ $_reference: (
|
|
|
64
67
|
|
|
65
68
|
transition: inline-size $_transition-duration $_curve $_delay,
|
|
66
69
|
visibility $_delay $_curve $_transition-duration;
|
|
67
|
-
|
|
68
|
-
@include elevation-theme.theme-styles(
|
|
69
|
-
(
|
|
70
|
-
overlay-opacity: var(--_modal-container-elevation-overlay-opacity),
|
|
71
|
-
surface-tint-layer-color: var(--_container-surface-tint-layer-color),
|
|
72
|
-
)
|
|
73
|
-
);
|
|
74
|
-
|
|
75
|
-
.md3-elevation-overlay {
|
|
76
|
-
width: inherit;
|
|
77
|
-
z-index: 0;
|
|
78
|
-
}
|
|
79
70
|
}
|
|
80
71
|
|
|
81
72
|
.md3-navigation-drawer-modal--opened {
|
|
82
73
|
transition: inline-size $_transition-duration $_curve $_delay,
|
|
83
74
|
visibility $_delay $_curve $_delay;
|
|
84
|
-
|
|
85
|
-
@include elevation-theme.theme-styles(
|
|
86
|
-
(
|
|
87
|
-
shadow: var(--_modal-container-elevation-shadow),
|
|
88
|
-
)
|
|
89
|
-
);
|
|
90
75
|
}
|
|
91
76
|
|
|
92
77
|
.md3-navigation-drawer-modal--pivot-at-start {
|
|
@@ -6,11 +6,8 @@
|
|
|
6
6
|
// stylelint-disable selector-class-pattern --
|
|
7
7
|
// Selector '.md3-*' should only be used in this project.
|
|
8
8
|
|
|
9
|
-
@use 'sass:map';
|
|
10
|
-
|
|
11
9
|
@use '../../motion/animation';
|
|
12
|
-
@use '../../
|
|
13
|
-
@use '../../elevationold/lib/elevation-theme';
|
|
10
|
+
@use '../../elevation/elevation';
|
|
14
11
|
@use '../../sass/theme';
|
|
15
12
|
@use './shared';
|
|
16
13
|
|
|
@@ -50,9 +47,15 @@ $_reference: (
|
|
|
50
47
|
@each $token, $value in $tokens {
|
|
51
48
|
--_#{$token}: #{$value};
|
|
52
49
|
}
|
|
53
|
-
}
|
|
54
50
|
|
|
55
|
-
|
|
51
|
+
@include elevation.theme(
|
|
52
|
+
(
|
|
53
|
+
level: var(--_standard-container-elevation),
|
|
54
|
+
shadow-color: var(--_divider-color),
|
|
55
|
+
surface-tint-color: var(--_container-surface-tint-layer-color),
|
|
56
|
+
)
|
|
57
|
+
);
|
|
58
|
+
}
|
|
56
59
|
|
|
57
60
|
:host {
|
|
58
61
|
display: flex;
|
|
@@ -69,19 +72,13 @@ $_reference: (
|
|
|
69
72
|
|
|
70
73
|
transition: inline-size $transition-duration $curve $delay,
|
|
71
74
|
visibility $default $curve $transition-duration;
|
|
75
|
+
}
|
|
72
76
|
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
)
|
|
79
|
-
);
|
|
80
|
-
|
|
81
|
-
.md3-elevation-overlay {
|
|
82
|
-
width: inherit;
|
|
83
|
-
z-index: 0;
|
|
84
|
-
}
|
|
77
|
+
md-elevation {
|
|
78
|
+
inset: 0;
|
|
79
|
+
position: absolute;
|
|
80
|
+
width: inherit;
|
|
81
|
+
z-index: 0;
|
|
85
82
|
}
|
|
86
83
|
|
|
87
84
|
.md3-navigation-drawer--opened {
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
|
|
9
9
|
@use 'sass:map';
|
|
10
10
|
|
|
11
|
-
@use '../../
|
|
11
|
+
@use '../../elevation/lib/elevation';
|
|
12
12
|
@use '../../sass/resolvers';
|
|
13
13
|
@use '../../sass/shape';
|
|
14
14
|
|
|
@@ -33,12 +33,7 @@
|
|
|
33
33
|
}
|
|
34
34
|
|
|
35
35
|
@function resolve-tokens($tokens) {
|
|
36
|
-
$tokens: elevation
|
|
37
|
-
$tokens,
|
|
38
|
-
map.get(resolvers.$material, elevation),
|
|
39
|
-
$shadow-color-token: divider-color,
|
|
40
|
-
$elevation-tokens: (modal-container-elevation)
|
|
41
|
-
);
|
|
36
|
+
$tokens: elevation.resolve-tokens($tokens, 'modal-container-elevation');
|
|
42
37
|
$tokens: shape.resolve-theme(
|
|
43
38
|
$tokens,
|
|
44
39
|
map.get(resolvers.$material, shape),
|
|
@@ -4,6 +4,6 @@
|
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
6
|
import { css } from 'lit';
|
|
7
|
-
export const styles = css `:host{--_container-shape-start-start: var(--md-navigation-drawer-modal-container-shape-start-start, 0);--_container-shape-start-end: var(--md-navigation-drawer-modal-container-shape-start-end, 16px);--_container-shape-end-end: var(--md-navigation-drawer-modal-container-shape-end-end, 16px);--_container-shape-end-start: var(--md-navigation-drawer-modal-container-shape-end-start, 0);--_container-color: var(--md-navigation-drawer-modal-container-color, #fff);--_container-height: var(--md-navigation-drawer-modal-container-height, 100%);--_container-surface-tint-layer-color: ;--_container-width: var(--md-navigation-drawer-modal-container-width, 360px);--
|
|
7
|
+
export const styles = css `:host{--_container-shape-start-start: var(--md-navigation-drawer-modal-container-shape-start-start, 0);--_container-shape-start-end: var(--md-navigation-drawer-modal-container-shape-start-end, 16px);--_container-shape-end-end: var(--md-navigation-drawer-modal-container-shape-end-end, 16px);--_container-shape-end-start: var(--md-navigation-drawer-modal-container-shape-end-start, 0);--_container-color: var(--md-navigation-drawer-modal-container-color, #fff);--_container-height: var(--md-navigation-drawer-modal-container-height, 100%);--_container-surface-tint-layer-color: ;--_container-width: var(--md-navigation-drawer-modal-container-width, 360px);--_divider-color: var(--md-navigation-drawer-modal-divider-color, #000);--_modal-container-elevation: var(--md-navigation-drawer-modal-modal-container-elevation, 1);--_scrim-color: ;--_scrim-opacity: var(--md-navigation-drawer-modal-scrim-opacity, 0.04);--_standard-container-elevation: var(--md-navigation-drawer-modal-standard-container-elevation, 0);--md-elevation-level:var(--_modal-container-elevation)}.md3-navigation-drawer-modal{bottom:0;box-sizing:border-box;display:flex;justify-content:flex-end;overflow:hidden;position:absolute;top:0;inline-size:0;transition:inline-size .25s cubic-bezier(0.4, 0, 0.2, 1) 0s,visibility 0s cubic-bezier(0.4, 0, 0.2, 1) .25s}.md3-navigation-drawer-modal--opened{transition:inline-size .25s cubic-bezier(0.4, 0, 0.2, 1) 0s,visibility 0s cubic-bezier(0.4, 0, 0.2, 1) 0s}.md3-navigation-drawer-modal--pivot-at-start{justify-content:flex-start}.md3-navigation-drawer-modal__slot-content{display:flex;flex-direction:column;position:relative}.md3-navigation-drawer-modal__scrim{inset:0;opacity:0;position:absolute;visibility:hidden;background-color:var(--_scrim-color);transition:opacity .25s cubic-bezier(0.4, 0, 0.2, 1) 0s,visibility 0s cubic-bezier(0.4, 0, 0.2, 1) .25s}.md3-navigation-drawer-modal--scrim-visible{visibility:visible;opacity:var(--_scrim-opacity);transition:opacity .25s cubic-bezier(0.4, 0, 0.2, 1) 0s,visibility 0s cubic-bezier(0.4, 0, 0.2, 1) 0s}/*# sourceMappingURL=navigation-drawer-modal-styles.css.map */
|
|
8
8
|
`;
|
|
9
9
|
//# sourceMappingURL=navigation-drawer-modal-styles.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"navigation-drawer-modal-styles.css.js","sourceRoot":"","sources":["navigation-drawer-modal-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`:host{--_container-shape-start-start: var(--md-navigation-drawer-modal-container-shape-start-start, 0);--_container-shape-start-end: var(--md-navigation-drawer-modal-container-shape-start-end, 16px);--_container-shape-end-end: var(--md-navigation-drawer-modal-container-shape-end-end, 16px);--_container-shape-end-start: var(--md-navigation-drawer-modal-container-shape-end-start, 0);--_container-color: var(--md-navigation-drawer-modal-container-color, #fff);--_container-height: var(--md-navigation-drawer-modal-container-height, 100%);--_container-surface-tint-layer-color: ;--_container-width: var(--md-navigation-drawer-modal-container-width, 360px);--
|
|
1
|
+
{"version":3,"file":"navigation-drawer-modal-styles.css.js","sourceRoot":"","sources":["navigation-drawer-modal-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`:host{--_container-shape-start-start: var(--md-navigation-drawer-modal-container-shape-start-start, 0);--_container-shape-start-end: var(--md-navigation-drawer-modal-container-shape-start-end, 16px);--_container-shape-end-end: var(--md-navigation-drawer-modal-container-shape-end-end, 16px);--_container-shape-end-start: var(--md-navigation-drawer-modal-container-shape-end-start, 0);--_container-color: var(--md-navigation-drawer-modal-container-color, #fff);--_container-height: var(--md-navigation-drawer-modal-container-height, 100%);--_container-surface-tint-layer-color: ;--_container-width: var(--md-navigation-drawer-modal-container-width, 360px);--_divider-color: var(--md-navigation-drawer-modal-divider-color, #000);--_modal-container-elevation: var(--md-navigation-drawer-modal-modal-container-elevation, 1);--_scrim-color: ;--_scrim-opacity: var(--md-navigation-drawer-modal-scrim-opacity, 0.04);--_standard-container-elevation: var(--md-navigation-drawer-modal-standard-container-elevation, 0);--md-elevation-level:var(--_modal-container-elevation)}.md3-navigation-drawer-modal{bottom:0;box-sizing:border-box;display:flex;justify-content:flex-end;overflow:hidden;position:absolute;top:0;inline-size:0;transition:inline-size .25s cubic-bezier(0.4, 0, 0.2, 1) 0s,visibility 0s cubic-bezier(0.4, 0, 0.2, 1) .25s}.md3-navigation-drawer-modal--opened{transition:inline-size .25s cubic-bezier(0.4, 0, 0.2, 1) 0s,visibility 0s cubic-bezier(0.4, 0, 0.2, 1) 0s}.md3-navigation-drawer-modal--pivot-at-start{justify-content:flex-start}.md3-navigation-drawer-modal__slot-content{display:flex;flex-direction:column;position:relative}.md3-navigation-drawer-modal__scrim{inset:0;opacity:0;position:absolute;visibility:hidden;background-color:var(--_scrim-color);transition:opacity .25s cubic-bezier(0.4, 0, 0.2, 1) 0s,visibility 0s cubic-bezier(0.4, 0, 0.2, 1) .25s}.md3-navigation-drawer-modal--scrim-visible{visibility:visible;opacity:var(--_scrim-opacity);transition:opacity .25s cubic-bezier(0.4, 0, 0.2, 1) 0s,visibility 0s cubic-bezier(0.4, 0, 0.2, 1) 0s}/*# sourceMappingURL=navigation-drawer-modal-styles.css.map */\n`;\n "]}
|
|
@@ -4,6 +4,6 @@
|
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
6
|
import { css } from 'lit';
|
|
7
|
-
export const styles = css `:host{--_container-shape-start-start: var(--md-navigation-drawer-container-shape-start-start, 0);--_container-shape-start-end: var(--md-navigation-drawer-container-shape-start-end, 16px);--_container-shape-end-end: var(--md-navigation-drawer-container-shape-end-end, 16px);--_container-shape-end-start: var(--md-navigation-drawer-container-shape-end-start, 0);--_container-color: var(--md-navigation-drawer-container-color, #fff);--_container-height: var(--md-navigation-drawer-container-height, 100%);--_container-surface-tint-layer-color: ;--_container-width: var(--md-navigation-drawer-container-width, 360px);--
|
|
7
|
+
export const styles = css `:host{--_container-shape-start-start: var(--md-navigation-drawer-container-shape-start-start, 0);--_container-shape-start-end: var(--md-navigation-drawer-container-shape-start-end, 16px);--_container-shape-end-end: var(--md-navigation-drawer-container-shape-end-end, 16px);--_container-shape-end-start: var(--md-navigation-drawer-container-shape-end-start, 0);--_container-color: var(--md-navigation-drawer-container-color, #fff);--_container-height: var(--md-navigation-drawer-container-height, 100%);--_container-surface-tint-layer-color: ;--_container-width: var(--md-navigation-drawer-container-width, 360px);--_divider-color: var(--md-navigation-drawer-divider-color, #000);--_modal-container-elevation: var(--md-navigation-drawer-modal-container-elevation, 1);--_standard-container-elevation: var(--md-navigation-drawer-standard-container-elevation, 0);--md-elevation-level:var(--_standard-container-elevation);--md-elevation-shadow-color:var(--_divider-color);--md-elevation-surface-tint-color:var(--_container-surface-tint-layer-color)}:host{display:flex}.md3-navigation-drawer{inline-size:0;box-sizing:border-box;display:flex;justify-content:flex-end;overflow:hidden;overflow-y:auto;visibility:hidden;transition:inline-size .25s cubic-bezier(0.4, 0, 0.2, 1) 0s,visibility 0s cubic-bezier(0.4, 0, 0.2, 1) .25s}md-elevation{inset:0;position:absolute;width:inherit;z-index:0}.md3-navigation-drawer--opened{visibility:visible;transition:inline-size .25s cubic-bezier(0.4, 0, 0.2, 1) 0s,visibility 0s cubic-bezier(0.4, 0, 0.2, 1) 0s}.md3-navigation-drawer--pivot-at-start{justify-content:flex-start}.md3-navigation-drawer__slot-content{display:flex;flex-direction:column;position:relative}/*# sourceMappingURL=navigation-drawer-styles.css.map */
|
|
8
8
|
`;
|
|
9
9
|
//# sourceMappingURL=navigation-drawer-styles.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"navigation-drawer-styles.css.js","sourceRoot":"","sources":["navigation-drawer-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`:host{--_container-shape-start-start: var(--md-navigation-drawer-container-shape-start-start, 0);--_container-shape-start-end: var(--md-navigation-drawer-container-shape-start-end, 16px);--_container-shape-end-end: var(--md-navigation-drawer-container-shape-end-end, 16px);--_container-shape-end-start: var(--md-navigation-drawer-container-shape-end-start, 0);--_container-color: var(--md-navigation-drawer-container-color, #fff);--_container-height: var(--md-navigation-drawer-container-height, 100%);--_container-surface-tint-layer-color: ;--_container-width: var(--md-navigation-drawer-container-width, 360px);--
|
|
1
|
+
{"version":3,"file":"navigation-drawer-styles.css.js","sourceRoot":"","sources":["navigation-drawer-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n import {css} from 'lit';\n export const styles = css`:host{--_container-shape-start-start: var(--md-navigation-drawer-container-shape-start-start, 0);--_container-shape-start-end: var(--md-navigation-drawer-container-shape-start-end, 16px);--_container-shape-end-end: var(--md-navigation-drawer-container-shape-end-end, 16px);--_container-shape-end-start: var(--md-navigation-drawer-container-shape-end-start, 0);--_container-color: var(--md-navigation-drawer-container-color, #fff);--_container-height: var(--md-navigation-drawer-container-height, 100%);--_container-surface-tint-layer-color: ;--_container-width: var(--md-navigation-drawer-container-width, 360px);--_divider-color: var(--md-navigation-drawer-divider-color, #000);--_modal-container-elevation: var(--md-navigation-drawer-modal-container-elevation, 1);--_standard-container-elevation: var(--md-navigation-drawer-standard-container-elevation, 0);--md-elevation-level:var(--_standard-container-elevation);--md-elevation-shadow-color:var(--_divider-color);--md-elevation-surface-tint-color:var(--_container-surface-tint-layer-color)}:host{display:flex}.md3-navigation-drawer{inline-size:0;box-sizing:border-box;display:flex;justify-content:flex-end;overflow:hidden;overflow-y:auto;visibility:hidden;transition:inline-size .25s cubic-bezier(0.4, 0, 0.2, 1) 0s,visibility 0s cubic-bezier(0.4, 0, 0.2, 1) .25s}md-elevation{inset:0;position:absolute;width:inherit;z-index:0}.md3-navigation-drawer--opened{visibility:visible;transition:inline-size .25s cubic-bezier(0.4, 0, 0.2, 1) 0s,visibility 0s cubic-bezier(0.4, 0, 0.2, 1) 0s}.md3-navigation-drawer--pivot-at-start{justify-content:flex-start}.md3-navigation-drawer__slot-content{display:flex;flex-direction:column;position:relative}/*# sourceMappingURL=navigation-drawer-styles.css.map */\n`;\n "]}
|
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
6
|
import { __decorate, __metadata } from "tslib";
|
|
7
|
+
import '../../elevation/elevation.js';
|
|
7
8
|
import { html, LitElement } from 'lit';
|
|
8
9
|
import { property } from 'lit/decorators.js';
|
|
9
10
|
import { classMap } from 'lit/directives/class-map.js';
|
|
@@ -31,8 +32,8 @@ export class NavigationDrawer extends LitElement {
|
|
|
31
32
|
aria-labelledby="${ifDefined(this.ariaLabelledBy)}"
|
|
32
33
|
aria-modal="${this.ariaModal}"
|
|
33
34
|
class="md3-navigation-drawer ${this.getRenderClasses()}"
|
|
34
|
-
role="dialog"
|
|
35
|
-
></
|
|
35
|
+
role="dialog">
|
|
36
|
+
<md-elevation shadow surface></md-elevation>
|
|
36
37
|
<div class="md3-navigation-drawer__slot-content">
|
|
37
38
|
<slot></slot>
|
|
38
39
|
</div>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"navigation-drawer.js","sourceRoot":"","sources":["navigation-drawer.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,IAAI,EAAE,UAAU,EAAiC,MAAM,KAAK,CAAC;AACrE,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AACrD,OAAO,EAAC,SAAS,EAAC,MAAM,8BAA8B,CAAC;AAEvD,OAAO,EAAC,YAAY,EAAC,MAAM,mCAAmC,CAAC;AAE/D,qBAAqB;AACrB,MAAM,OAAO,gBAAiB,SAAQ,UAAU;IAAhD;;QAaE,6CAA6C;QAGpC,cAAS,GAAmB,OAAO,CAAC;QAQ7C,WAAM,GAAG,KAAK,CAAC;QACW,UAAK,GAAkB,KAAK,CAAC;IA2CzD,CAAC;IAzCC,mBAAmB;IACV,MAAM;QACb,MAAM,YAAY,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;QACpD,MAAM,UAAU,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;QAEnD,OAAO,IAAI,CAAA;;4BAEa,SAAS,CAAC,IAAI,CAAC,eAAe,CAAC;yBAClC,YAAY;uBACd,UAAU;sBACX,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC;2BACpB,SAAS,CAAC,IAAI,CAAC,cAAc,CAAC;sBACnC,IAAI,CAAC,SAAS;uCACG,IAAI,CAAC,gBAAgB,EAAE;;;;;;;KAOzD,CAAC;IACJ,CAAC;IAED,4BAA4B;IAClB,gBAAgB;QACxB,OAAO,QAAQ,CAAC;YACd,+BAA+B,EAAE,IAAI,CAAC,MAAM;YAC5C,uCAAuC,EAAE,IAAI,CAAC,KAAK,KAAK,OAAO;SAChE,CAAC,CAAC;IACL,CAAC;IAEkB,OAAO,CAAC,iBACoC;QAC7D,IAAI,iBAAiB,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;YACnC,UAAU,CAAC,GAAG,EAAE;gBACd,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAC9B,2BAA2B,EAC3B,EAAC,MAAM,EAAE,EAAC,MAAM,EAAE,IAAI,CAAC,MAAM,EAAC,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,CAAC,CAAC,CAAC;YACvE,CAAC,EAAE,GAAG,CAAC,CAAC;SACT;IACH,CAAC;CACF;AA9DC;IAHC,YAAY;IACZ,QAAQ,CACL,EAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,uBAAuB,EAAE,UAAU,EAAE,IAAI,EAAC,CAAC;;yDACvC;AAKlC;IAFC,YAAY;IACZ,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAE,UAAU,EAAE,IAAI,EAAC,CAAC;;mDAC7C;AAK5B;IAFC,YAAY;IACZ,QAAQ,CAAC,EAAC,SAAS,EAAE,iBAAiB,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,IAAI,EAAC,CAAC;;mDAC5B;AAK7C;IAFC,YAAY;IACZ,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,sBAAsB,EAAE,UAAU,EAAE,IAAI,EAAC,CAAC;;wDAC7C;AAGjC;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC,CAAE,6CAA6C;;;gDAC1D;AACW;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;;+CAA8B","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, LitElement, PropertyValues, TemplateResult} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\n\nimport {ariaProperty} from '../../decorators/aria-property.js';\n\n/** @soyCompatible */\nexport class NavigationDrawer extends LitElement {\n /* aria properties */\n // tslint:disable-next-line:no-new-decorators\n @ariaProperty\n @property(\n {type: String, attribute: 'data-aria-describedby', noAccessor: true})\n ariaDescribedBy: string|undefined;\n\n // tslint:disable-next-line:no-new-decorators\n @ariaProperty\n @property({type: String, attribute: 'data-aria-label', noAccessor: true})\n override ariaLabel!: string;\n\n // tslint:disable-next-line:no-new-decorators\n @ariaProperty\n @property({attribute: 'data-aria-modal', type: String, noAccessor: true})\n override ariaModal: 'true'|'false' = 'false';\n\n // tslint:disable-next-line:no-new-decorators\n @ariaProperty\n @property({type: String, attribute: 'data-aria-labelledby', noAccessor: true})\n ariaLabelledBy: string|undefined;\n\n @property({type: Boolean}) // tslint:disable-next-line:no-new-decorators\n opened = false;\n @property({type: String}) pivot: 'start'|'end' = 'end';\n\n /** @soyTemplate */\n override render(): TemplateResult {\n const ariaExpanded = this.opened ? 'true' : 'false';\n const ariaHidden = !this.opened ? 'true' : 'false';\n\n return html`\n <div\n aria-describedby=\"${ifDefined(this.ariaDescribedBy)}\"\n aria-expanded=\"${ariaExpanded}\"\n aria-hidden=\"${ariaHidden}\"\n aria-label=\"${ifDefined(this.ariaLabel)}\"\n aria-labelledby=\"${ifDefined(this.ariaLabelledBy)}\"\n aria-modal=\"${this.ariaModal}\"\n class=\"md3-navigation-drawer ${this.getRenderClasses()}\"\n role=\"dialog\"
|
|
1
|
+
{"version":3,"file":"navigation-drawer.js","sourceRoot":"","sources":["navigation-drawer.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,8BAA8B,CAAC;AAEtC,OAAO,EAAC,IAAI,EAAE,UAAU,EAAiC,MAAM,KAAK,CAAC;AACrE,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AACrD,OAAO,EAAC,SAAS,EAAC,MAAM,8BAA8B,CAAC;AAEvD,OAAO,EAAC,YAAY,EAAC,MAAM,mCAAmC,CAAC;AAE/D,qBAAqB;AACrB,MAAM,OAAO,gBAAiB,SAAQ,UAAU;IAAhD;;QAaE,6CAA6C;QAGpC,cAAS,GAAmB,OAAO,CAAC;QAQ7C,WAAM,GAAG,KAAK,CAAC;QACW,UAAK,GAAkB,KAAK,CAAC;IA2CzD,CAAC;IAzCC,mBAAmB;IACV,MAAM;QACb,MAAM,YAAY,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;QACpD,MAAM,UAAU,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;QAEnD,OAAO,IAAI,CAAA;;4BAEa,SAAS,CAAC,IAAI,CAAC,eAAe,CAAC;yBAClC,YAAY;uBACd,UAAU;sBACX,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC;2BACpB,SAAS,CAAC,IAAI,CAAC,cAAc,CAAC;sBACnC,IAAI,CAAC,SAAS;uCACG,IAAI,CAAC,gBAAgB,EAAE;;;;;;;KAOzD,CAAC;IACJ,CAAC;IAED,4BAA4B;IAClB,gBAAgB;QACxB,OAAO,QAAQ,CAAC;YACd,+BAA+B,EAAE,IAAI,CAAC,MAAM;YAC5C,uCAAuC,EAAE,IAAI,CAAC,KAAK,KAAK,OAAO;SAChE,CAAC,CAAC;IACL,CAAC;IAEkB,OAAO,CAAC,iBACoC;QAC7D,IAAI,iBAAiB,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;YACnC,UAAU,CAAC,GAAG,EAAE;gBACd,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAC9B,2BAA2B,EAC3B,EAAC,MAAM,EAAE,EAAC,MAAM,EAAE,IAAI,CAAC,MAAM,EAAC,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,CAAC,CAAC,CAAC;YACvE,CAAC,EAAE,GAAG,CAAC,CAAC;SACT;IACH,CAAC;CACF;AA9DC;IAHC,YAAY;IACZ,QAAQ,CACL,EAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,uBAAuB,EAAE,UAAU,EAAE,IAAI,EAAC,CAAC;;yDACvC;AAKlC;IAFC,YAAY;IACZ,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAE,UAAU,EAAE,IAAI,EAAC,CAAC;;mDAC7C;AAK5B;IAFC,YAAY;IACZ,QAAQ,CAAC,EAAC,SAAS,EAAE,iBAAiB,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,IAAI,EAAC,CAAC;;mDAC5B;AAK7C;IAFC,YAAY;IACZ,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,sBAAsB,EAAE,UAAU,EAAE,IAAI,EAAC,CAAC;;wDAC7C;AAGjC;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC,CAAE,6CAA6C;;;gDAC1D;AACW;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;;+CAA8B","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../elevation/elevation.js';\n\nimport {html, LitElement, PropertyValues, TemplateResult} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\n\nimport {ariaProperty} from '../../decorators/aria-property.js';\n\n/** @soyCompatible */\nexport class NavigationDrawer extends LitElement {\n /* aria properties */\n // tslint:disable-next-line:no-new-decorators\n @ariaProperty\n @property(\n {type: String, attribute: 'data-aria-describedby', noAccessor: true})\n ariaDescribedBy: string|undefined;\n\n // tslint:disable-next-line:no-new-decorators\n @ariaProperty\n @property({type: String, attribute: 'data-aria-label', noAccessor: true})\n override ariaLabel!: string;\n\n // tslint:disable-next-line:no-new-decorators\n @ariaProperty\n @property({attribute: 'data-aria-modal', type: String, noAccessor: true})\n override ariaModal: 'true'|'false' = 'false';\n\n // tslint:disable-next-line:no-new-decorators\n @ariaProperty\n @property({type: String, attribute: 'data-aria-labelledby', noAccessor: true})\n ariaLabelledBy: string|undefined;\n\n @property({type: Boolean}) // tslint:disable-next-line:no-new-decorators\n opened = false;\n @property({type: String}) pivot: 'start'|'end' = 'end';\n\n /** @soyTemplate */\n override render(): TemplateResult {\n const ariaExpanded = this.opened ? 'true' : 'false';\n const ariaHidden = !this.opened ? 'true' : 'false';\n\n return html`\n <div\n aria-describedby=\"${ifDefined(this.ariaDescribedBy)}\"\n aria-expanded=\"${ariaExpanded}\"\n aria-hidden=\"${ariaHidden}\"\n aria-label=\"${ifDefined(this.ariaLabel)}\"\n aria-labelledby=\"${ifDefined(this.ariaLabelledBy)}\"\n aria-modal=\"${this.ariaModal}\"\n class=\"md3-navigation-drawer ${this.getRenderClasses()}\"\n role=\"dialog\">\n <md-elevation shadow surface></md-elevation>\n <div class=\"md3-navigation-drawer__slot-content\">\n <slot></slot>\n </div>\n </div>\n `;\n }\n\n /** @soyTemplate classMap */\n protected getRenderClasses() {\n return classMap({\n 'md3-navigation-drawer--opened': this.opened,\n 'md3-navigation-drawer--pivot-at-start': this.pivot === 'start',\n });\n }\n\n protected override updated(changedProperties:\n PropertyValues<NavigationDrawer>) {\n if (changedProperties.has('opened')) {\n setTimeout(() => {\n this.dispatchEvent(new CustomEvent(\n 'navigation-drawer-changed',\n {detail: {opened: this.opened}, bubbles: true, composed: true}));\n }, 250);\n }\n }\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@material/web",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "1.0.0-pre.1",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -39,9 +39,11 @@
|
|
|
39
39
|
"tslib": "^2.4.0"
|
|
40
40
|
},
|
|
41
41
|
"devDependencies": {
|
|
42
|
+
"@commitlint/config-conventional": "^17.3.0",
|
|
42
43
|
"@types/jasmine": "^4.0.3",
|
|
43
44
|
"@web/test-runner": "^0.15.0",
|
|
44
45
|
"@web/test-runner-playwright": "^0.9.0",
|
|
46
|
+
"commitlint": "^17.3.0",
|
|
45
47
|
"jasmine": "^4.5.0",
|
|
46
48
|
"sass": "^1.52.3",
|
|
47
49
|
"sass-true": "^6.1.0",
|
|
@@ -49,6 +51,11 @@
|
|
|
49
51
|
"web-test-runner-jasmine": "^0.0.2",
|
|
50
52
|
"wireit": "^0.9.0"
|
|
51
53
|
},
|
|
54
|
+
"commitlint": {
|
|
55
|
+
"extends": [
|
|
56
|
+
"@commitlint/config-conventional"
|
|
57
|
+
]
|
|
58
|
+
},
|
|
52
59
|
"wireit": {
|
|
53
60
|
"build": {
|
|
54
61
|
"dependencies": [
|