├── .editorconfig ├── .eslintignore ├── .eslintrc.yaml ├── .gitattributes ├── .github ├── ISSUE_TEMPLATE │ ├── --bug-report.md │ └── --feature-request.md ├── semantic.yml └── workflows │ ├── release-canary.yml │ ├── release-nightly.yml │ ├── release-pull-request.yml │ ├── release.yml │ └── test.yml ├── .gitignore ├── .mdc-docsite.yml ├── .nvmrc ├── .sassrc.js ├── .stylelintignore ├── .stylelintrc.yaml ├── CHANGELOG.md ├── CHANGELOG_ARCHIVE.md ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── app.yaml ├── docs ├── README.md ├── authoring-components.md ├── button.png ├── button_with_ripple.png ├── code │ ├── README.md │ ├── architecture.md │ ├── best_practices.md │ ├── readme_standards.md │ └── readme_template.md ├── codelabs │ └── codelabs-index.md ├── contribute │ ├── README.md │ ├── bug_fix.jpg │ ├── bug_fix.md │ ├── code_review.md │ ├── feat.jpg │ └── feat.md ├── docsite-components.md ├── docsite-index.md ├── docsite-input-controls.md ├── docsite-tabs.md ├── examples.md ├── framework-wrappers.md ├── getting-started.md ├── hello_world.png ├── importing-js.md ├── integrating-into-frameworks.md ├── local-development.md ├── migrating-from-mdl.md ├── open_source │ ├── README.md │ ├── feedback.jpg │ └── releases-and-branches.md ├── supported-browsers.md └── theming.md ├── jasmine-node.json ├── karma.conf.js ├── lerna.json ├── package-lock.json ├── package.json ├── packages ├── README.md ├── material-components-web │ ├── .npmignore │ ├── README.md │ ├── index.scss │ ├── index.ts │ ├── material-components-web.scss │ └── package.json ├── mdc-animation │ ├── .npmignore │ ├── README.md │ ├── _animation.scss │ ├── _functions.import.scss │ ├── _functions.scss │ ├── _index.scss │ ├── _variables.import.scss │ ├── _variables.scss │ ├── animationframe.ts │ ├── index.ts │ ├── package.json │ ├── test │ │ ├── animationframe.test.ts │ │ └── component.test.ts │ ├── types.ts │ └── util.ts ├── mdc-auto-init │ ├── .npmignore │ ├── README.md │ ├── constants.ts │ ├── index.ts │ ├── package.json │ └── test │ │ └── mdc-auto-init.test.ts ├── mdc-banner │ ├── .npmignore │ ├── README.md │ ├── _banner-theme.scss │ ├── _banner.scss │ ├── _index.scss │ ├── adapter.ts │ ├── component.ts │ ├── constants.ts │ ├── foundation.ts │ ├── images │ │ └── banner.png │ ├── index.ts │ ├── package.json │ ├── styles.scss │ └── test │ │ ├── component.test.ts │ │ └── foundation.test.ts ├── mdc-base │ ├── .npmignore │ ├── README.md │ ├── _index.scss │ ├── _mixins.import.scss │ ├── _mixins.scss │ ├── component.ts │ ├── externs.d.ts │ ├── foundation.ts │ ├── index.ts │ ├── observer-foundation.ts │ ├── observer-proxy.ts │ ├── observer.ts │ ├── package.json │ ├── test │ │ ├── component.test.ts │ │ ├── foundation.test.ts │ │ ├── observer-foundation.test.ts │ │ ├── observer-proxy.test.ts │ │ ├── observer-tests.ts │ │ └── observer.test.ts │ └── types.ts ├── mdc-button │ ├── README.md │ ├── _button-base.scss │ ├── _button-filled-theme.scss │ ├── _button-filled.scss │ ├── _button-outlined-theme.scss │ ├── _button-outlined.scss │ ├── _button-protected-theme.scss │ ├── _button-protected.scss │ ├── _button-ripple.scss │ ├── _button-shared-theme.scss │ ├── _button-text-theme.scss │ ├── _button-text.scss │ ├── _button-theme.scss │ ├── _button.scss │ ├── _index.scss │ ├── _mixins.import.scss │ ├── _mixins.scss │ ├── _variables.import.scss │ ├── _variables.scss │ ├── images │ │ ├── button-theming.png │ │ ├── buttons_types.png │ │ ├── contained-button.png │ │ ├── contained-icon-button.png │ │ ├── outlined-button.png │ │ ├── outlined-icon-button.png │ │ ├── text-button.png │ │ ├── text-icon-button.png │ │ └── toggle-bar.png │ ├── mdc-button.import.scss │ ├── mdc-button.scss │ ├── package.json │ ├── styles.scss │ └── test │ │ ├── feature-targeting-any.test.scss │ │ └── mdc-button.scss.test.ts ├── mdc-card │ ├── README.md │ ├── _card-shared-theme.scss │ ├── _elevated-card-theme.scss │ ├── _filled-card-theme.scss │ ├── _index.scss │ ├── _mixins.import.scss │ ├── _mixins.scss │ ├── _outlined-card-theme.scss │ ├── _variables.import.scss │ ├── _variables.scss │ ├── images │ │ ├── card-elevated.png │ │ └── card-outlined.png │ ├── mdc-card.import.scss │ ├── mdc-card.scss │ ├── package.json │ └── test │ │ ├── feature-targeting-any.test.scss │ │ └── mdc-card.scss.test.ts ├── mdc-checkbox │ ├── .npmignore │ ├── README.md │ ├── _checkbox-custom-properties.scss │ ├── _checkbox-theme.scss │ ├── _checkbox.scss │ ├── _functions.import.scss │ ├── _functions.scss │ ├── _index.scss │ ├── _keyframes.import.scss │ ├── _keyframes.scss │ ├── _mixins.import.scss │ ├── _mixins.scss │ ├── _variables.import.scss │ ├── _variables.scss │ ├── adapter.ts │ ├── component.ts │ ├── constants.ts │ ├── foundation.ts │ ├── images │ │ ├── checkbox-hero.png │ │ └── checkbox-states.png │ ├── index.ts │ ├── mdc-checkbox.import.scss │ ├── mdc-checkbox.scss │ ├── package.json │ └── test │ │ ├── component.test.ts │ │ ├── feature-targeting-any.test.scss │ │ ├── foundation.test.ts │ │ └── mdc-checkbox.scss.test.ts ├── mdc-chips │ ├── .npmignore │ ├── README.md │ ├── _assist-chip-theme.scss │ ├── _chip-set-theme.scss │ ├── _chip-set.scss │ ├── _chip-theme.scss │ ├── _chip.scss │ ├── _filter-chip-theme.scss │ ├── _index.scss │ ├── _input-chip-theme.scss │ ├── _suggestion-chip-theme.scss │ ├── action │ │ ├── README.md │ │ ├── adapter.ts │ │ ├── component-ripple.ts │ │ ├── component.ts │ │ ├── constants.ts │ │ ├── foundation.ts │ │ ├── index.ts │ │ ├── primary-foundation.ts │ │ ├── test │ │ │ ├── component-ripple.test.ts │ │ │ ├── component.test.ts │ │ │ ├── foundation.test.ts │ │ │ ├── primary-foundation.test.ts │ │ │ └── trailing-foundation.test.ts │ │ ├── trailing-foundation.ts │ │ └── types.ts │ ├── chip-set │ │ ├── README.md │ │ ├── adapter.ts │ │ ├── component.ts │ │ ├── constants.ts │ │ ├── foundation.ts │ │ ├── index.ts │ │ ├── test │ │ │ ├── component.test.ts │ │ │ └── foundation.test.ts │ │ └── types.ts │ ├── chip │ │ ├── README.md │ │ ├── adapter.ts │ │ ├── component.ts │ │ ├── constants.ts │ │ ├── foundation.ts │ │ ├── index.ts │ │ ├── test │ │ │ ├── component.test.ts │ │ │ └── foundation.test.ts │ │ └── types.ts │ ├── deprecated │ │ ├── README.md │ │ ├── _index.scss │ │ ├── _mixins.import.scss │ │ ├── _mixins.scss │ │ ├── _variables.import.scss │ │ ├── _variables.scss │ │ ├── chip-set │ │ │ ├── adapter.ts │ │ │ ├── component.ts │ │ │ ├── constants.ts │ │ │ ├── foundation.ts │ │ │ ├── index.ts │ │ │ ├── mdc-chip-set.scss │ │ │ └── test │ │ │ │ ├── component.test.ts │ │ │ │ └── foundation.test.ts │ │ ├── chip │ │ │ ├── adapter.ts │ │ │ ├── component.ts │ │ │ ├── constants.ts │ │ │ ├── foundation.ts │ │ │ ├── index.ts │ │ │ ├── mdc-chip.scss │ │ │ ├── test │ │ │ │ ├── component.test.ts │ │ │ │ └── foundation.test.ts │ │ │ └── types.ts │ │ ├── index.ts │ │ ├── mdc-chips.import.scss │ │ ├── mdc-chips.scss │ │ ├── test │ │ │ ├── feature-targeting-any.test.scss │ │ │ └── mdc-chips.scss.test.ts │ │ └── trailingaction │ │ │ ├── README.md │ │ │ ├── _index.scss │ │ │ ├── _mixins.scss │ │ │ ├── _variables.scss │ │ │ ├── adapter.ts │ │ │ ├── component.ts │ │ │ ├── constants.ts │ │ │ ├── foundation.ts │ │ │ ├── index.ts │ │ │ ├── mdc-chip-trailing-action.scss │ │ │ ├── test │ │ │ ├── component.test.ts │ │ │ ├── feature-targeting-any.test.scss │ │ │ ├── foundation.test.ts │ │ │ └── mdc-chip-trailing-action.scss.test.ts │ │ │ └── types.ts │ ├── index.ts │ ├── package.json │ └── styles.scss ├── mdc-circular-progress │ ├── .npmignore │ ├── README.md │ ├── _circular-progress-theme.scss │ ├── _circular-progress.scss │ ├── _index.scss │ ├── _keyframes.import.scss │ ├── _keyframes.scss │ ├── _mixins.import.scss │ ├── _mixins.scss │ ├── _variables.import.scss │ ├── _variables.scss │ ├── adapter.ts │ ├── component.ts │ ├── constants.ts │ ├── foundation.ts │ ├── index.ts │ ├── mdc-circular-progress.import.scss │ ├── mdc-circular-progress.scss │ ├── package.json │ ├── styles.scss │ └── test │ │ ├── component.test.ts │ │ ├── feature-targeting-any.test.scss │ │ ├── foundation.test.ts │ │ └── mdc-circular-progress.scss.test.ts ├── mdc-data-table │ ├── .npmignore │ ├── README.md │ ├── _data-table-cell-checkbox.scss │ ├── _data-table-cell.scss │ ├── _data-table-header-cell-checkbox-sorting.scss │ ├── _data-table-header-cell.scss │ ├── _data-table-pagination.scss │ ├── _data-table-progress-indicator.scss │ ├── _data-table-theme.scss │ ├── _data-table.scss │ ├── _index.scss │ ├── _mixins.import.scss │ ├── _mixins.scss │ ├── _variables.import.scss │ ├── _variables.scss │ ├── adapter.ts │ ├── component.ts │ ├── constants.ts │ ├── foundation.ts │ ├── images │ │ └── data-table-hero.png │ ├── index.ts │ ├── mdc-data-table.import.scss │ ├── mdc-data-table.scss │ ├── package.json │ ├── styles.scss │ ├── test │ │ ├── component.test.ts │ │ ├── feature-targeting-any.test.scss │ │ ├── foundation.test.ts │ │ ├── sass.test.scss │ │ └── styles.scss.test.ts │ └── types.ts ├── mdc-density │ ├── README.md │ ├── _density.scss │ ├── _functions.import.scss │ ├── _functions.scss │ ├── _index.scss │ ├── _variables.import.scss │ ├── _variables.scss │ └── package.json ├── mdc-dialog │ ├── .npmignore │ ├── README.md │ ├── _dialog-custom-properties.scss │ ├── _dialog-theme.scss │ ├── _index.scss │ ├── _mixins.import.scss │ ├── _mixins.scss │ ├── _variables.import.scss │ ├── _variables.scss │ ├── adapter.ts │ ├── component.ts │ ├── constants.ts │ ├── foundation.ts │ ├── images │ │ ├── alert-dialog.png │ │ ├── confirmation-dialog.png │ │ ├── full-screen-dialog.png │ │ └── simple-dialog.png │ ├── index.ts │ ├── mdc-dialog.import.scss │ ├── mdc-dialog.scss │ ├── package.json │ ├── test │ │ ├── component.test.ts │ │ ├── feature-targeting-any.test.scss │ │ ├── foundation.test.ts │ │ ├── mdc-dialog.scss.test.ts │ │ └── util.test.ts │ ├── types.ts │ └── util.ts ├── mdc-dom │ ├── .npmignore │ ├── README.md │ ├── _dom.scss │ ├── _index.scss │ ├── _mixins.scss │ ├── announce.ts │ ├── events.ts │ ├── focus-trap.ts │ ├── index.ts │ ├── keyboard.ts │ ├── package.json │ ├── ponyfill.ts │ └── test │ │ ├── announce.test.ts │ │ ├── events.test.ts │ │ ├── feature-targeting-any.test.scss │ │ ├── focus-trap.test.ts │ │ ├── keyboard.test.ts │ │ ├── mdc-dom.scss.test.ts │ │ └── ponyfill.test.ts ├── mdc-drawer │ ├── .npmignore │ ├── README.md │ ├── _index.scss │ ├── _mixins.import.scss │ ├── _mixins.scss │ ├── _variables.import.scss │ ├── _variables.scss │ ├── adapter.ts │ ├── common.import.scss │ ├── common.scss │ ├── component.ts │ ├── constants.ts │ ├── dismissible │ │ ├── foundation.ts │ │ ├── mdc-drawer-dismissible.import.scss │ │ ├── mdc-drawer-dismissible.scss │ │ └── test │ │ │ └── foundation.test.ts │ ├── images │ │ ├── drawer-composite.png │ │ └── drawer-hero.png │ ├── index.ts │ ├── mdc-drawer.import.scss │ ├── mdc-drawer.scss │ ├── modal │ │ ├── foundation.ts │ │ ├── mdc-drawer-modal.import.scss │ │ ├── mdc-drawer-modal.scss │ │ └── test │ │ │ └── foundation.test.ts │ ├── package.json │ ├── test │ │ ├── component.test.ts │ │ ├── feature-targeting-any.test.scss │ │ ├── mdc-drawer.scss.test.ts │ │ └── util.test.ts │ └── util.ts ├── mdc-elevation │ ├── README.md │ ├── _elevation-theme.scss │ ├── _elevation.scss │ ├── _functions.import.scss │ ├── _functions.scss │ ├── _index.scss │ ├── _mixins.import.scss │ ├── _mixins.scss │ ├── _variables.import.scss │ ├── _variables.scss │ ├── mdc-elevation.scss │ ├── overlay-styles.scss │ ├── package.json │ ├── styles.scss │ └── test │ │ ├── feature-targeting-any.test.scss │ │ └── mdc-elevation.scss.test.ts ├── mdc-fab │ ├── README.md │ ├── _extended-fab-theme.scss │ ├── _fab-custom-properties.scss │ ├── _fab-small-theme.scss │ ├── _fab-theme.scss │ ├── _fab.scss │ ├── _index.scss │ ├── _mixins.import.scss │ ├── _mixins.scss │ ├── _variables.import.scss │ ├── _variables.scss │ ├── images │ │ └── FAB_types.png │ ├── mdc-fab.import.scss │ ├── mdc-fab.scss │ ├── package.json │ └── test │ │ ├── feature-targeting-any.test.scss │ │ └── mdc-fab.scss.test.ts ├── mdc-feature-targeting │ ├── README.md │ ├── _feature-targeting.scss │ ├── _functions.import.scss │ ├── _functions.scss │ ├── _index.scss │ └── package.json ├── mdc-floating-label │ ├── .npmignore │ ├── README.md │ ├── _floating-label-theme.scss │ ├── _floating-label.scss │ ├── _index.scss │ ├── _mixins.import.scss │ ├── _mixins.scss │ ├── _variables.import.scss │ ├── _variables.scss │ ├── adapter.ts │ ├── component.ts │ ├── constants.ts │ ├── foundation.ts │ ├── index.ts │ ├── mdc-floating-label.import.scss │ ├── mdc-floating-label.scss │ ├── package.json │ └── test │ │ ├── component.test.ts │ │ ├── feature-targeting-any.test.scss │ │ ├── foundation.test.ts │ │ └── mdc-floating-label.scss.test.ts ├── mdc-focus-ring │ ├── _focus-ring.scss │ └── package.json ├── mdc-focus │ ├── README.md │ ├── _focus-ring-inward-theme.scss │ ├── _focus-ring-outward-theme.scss │ ├── _focus-ring-shared-theme.scss │ ├── _focus-ring-test-helper.scss │ ├── _focus-ring.scss │ ├── package.json │ └── test │ │ ├── focus-ring-inward-theme.test.scss │ │ └── focus-ring-outward-theme.test.scss ├── mdc-form-field │ ├── .npmignore │ ├── README.md │ ├── _form-field-theme.scss │ ├── _form-field.scss │ ├── _index.scss │ ├── _mixins.import.scss │ ├── _mixins.scss │ ├── _variables.import.scss │ ├── _variables.scss │ ├── adapter.ts │ ├── component.ts │ ├── constants.ts │ ├── foundation.ts │ ├── index.ts │ ├── mdc-form-field.import.scss │ ├── mdc-form-field.scss │ ├── package.json │ └── test │ │ ├── component.test.ts │ │ ├── feature-targeting-any.test.scss │ │ ├── foundation.test.ts │ │ └── mdc-form-field.scss.test.ts ├── mdc-icon-button │ ├── .npmignore │ ├── README.md │ ├── _icon-button-all-deprecated.scss │ ├── _icon-button-theme.scss │ ├── _icon-button.scss │ ├── _index.scss │ ├── _mixins.import.scss │ ├── _mixins.scss │ ├── _variables.import.scss │ ├── _variables.scss │ ├── adapter.ts │ ├── component.ts │ ├── constants.ts │ ├── foundation.ts │ ├── index.ts │ ├── mdc-icon-button.import.scss │ ├── mdc-icon-button.scss │ ├── package.json │ ├── styles.scss │ ├── test │ │ ├── component.test.ts │ │ ├── feature-targeting-any.test.scss │ │ ├── foundation.test.ts │ │ └── mdc-icon-button.scss.test.ts │ └── types.ts ├── mdc-image-list │ ├── README.md │ ├── _index.scss │ ├── _mixins.import.scss │ ├── _mixins.scss │ ├── _variables.import.scss │ ├── _variables.scss │ ├── mdc-image-list.scss │ ├── package.json │ └── test │ │ ├── feature-targeting-all.test.scss │ │ ├── feature-targeting-any.test.scss │ │ └── mdc-image-list.scss.test.ts ├── mdc-layout-grid │ ├── README.md │ ├── _index.scss │ ├── _mixins.import.scss │ ├── _mixins.scss │ ├── _variables.import.scss │ ├── _variables.scss │ ├── mdc-layout-grid.import.scss │ ├── mdc-layout-grid.scss │ └── package.json ├── mdc-line-ripple │ ├── .npmignore │ ├── README.md │ ├── _functions.import.scss │ ├── _functions.scss │ ├── _index.scss │ ├── _line-ripple-theme.scss │ ├── _line-ripple.scss │ ├── _mixins.import.scss │ ├── _mixins.scss │ ├── adapter.ts │ ├── component.ts │ ├── constants.ts │ ├── foundation.ts │ ├── index.ts │ ├── mdc-line-ripple.import.scss │ ├── mdc-line-ripple.scss │ ├── package.json │ └── test │ │ ├── component.test.ts │ │ ├── feature-targeting-any.test.scss │ │ ├── foundation.test.ts │ │ └── mdc-line-ripple.scss.test.ts ├── mdc-linear-progress │ ├── .npmignore │ ├── README.md │ ├── _index.scss │ ├── _keyframes.import.scss │ ├── _keyframes.scss │ ├── _linear-progress-theme.scss │ ├── _linear-progress.scss │ ├── _mixins.import.scss │ ├── _mixins.scss │ ├── _variables.import.scss │ ├── _variables.scss │ ├── adapter.ts │ ├── component.ts │ ├── constants.ts │ ├── foundation.ts │ ├── index.ts │ ├── mdc-linear-progress.import.scss │ ├── mdc-linear-progress.scss │ ├── package.json │ ├── styles.scss │ ├── test │ │ ├── component.test.ts │ │ ├── feature-targeting-any.test.scss │ │ ├── foundation.test.ts │ │ └── mdc-linear-progress.scss.test.ts │ └── types.ts ├── mdc-list │ ├── .npmignore │ ├── README.md │ ├── _evolution-mixins.scss │ ├── _evolution-variables.scss │ ├── _index.scss │ ├── _list-theme.scss │ ├── _list.scss │ ├── _mixins.import.scss │ ├── _mixins.scss │ ├── _variables.import.scss │ ├── _variables.scss │ ├── adapter.ts │ ├── component.ts │ ├── constants.ts │ ├── events.ts │ ├── foundation.ts │ ├── images │ │ └── lists-types.png │ ├── index.ts │ ├── mdc-list.import.scss │ ├── mdc-list.scss │ ├── package.json │ ├── test │ │ ├── component.test.ts │ │ ├── feature-targeting-any.test.scss │ │ ├── foundation.test.ts │ │ └── mdc-list.scss.test.ts │ ├── typeahead.ts │ └── types.ts ├── mdc-menu-surface │ ├── .npmignore │ ├── README.md │ ├── _index.scss │ ├── _menusurface-theme.scss │ ├── _menusurface.scss │ ├── _mixins.import.scss │ ├── _mixins.scss │ ├── _variables.import.scss │ ├── _variables.scss │ ├── adapter.ts │ ├── component.ts │ ├── constants.ts │ ├── foundation.ts │ ├── index.ts │ ├── mdc-menu-surface.import.scss │ ├── mdc-menu-surface.scss │ ├── package.json │ ├── test │ │ ├── component.test.ts │ │ ├── feature-targeting-any.test.scss │ │ ├── foundation.test.ts │ │ └── mdc-menu-surface.scss.test.ts │ └── types.ts ├── mdc-menu │ ├── .npmignore │ ├── README.md │ ├── _index.scss │ ├── _menu-custom-properties.scss │ ├── _menu-theme.scss │ ├── _menu.scss │ ├── _mixins.import.scss │ ├── _mixins.scss │ ├── _variables.import.scss │ ├── _variables.scss │ ├── adapter.ts │ ├── component.ts │ ├── constants.ts │ ├── foundation.ts │ ├── index.ts │ ├── mdc-menu.import.scss │ ├── mdc-menu.scss │ ├── package.json │ ├── test │ │ ├── component.test.ts │ │ ├── feature-targeting-any.test.scss │ │ ├── foundation.test.ts │ │ └── mdc-menu.scss.test.ts │ └── types.ts ├── mdc-notched-outline │ ├── .npmignore │ ├── README.md │ ├── _index.scss │ ├── _mixins.import.scss │ ├── _mixins.scss │ ├── _notched-outline-theme.scss │ ├── _notched-outline.scss │ ├── _variables.import.scss │ ├── _variables.scss │ ├── adapter.ts │ ├── component.ts │ ├── constants.ts │ ├── foundation.ts │ ├── index.ts │ ├── mdc-notched-outline.import.scss │ ├── mdc-notched-outline.scss │ ├── package.json │ └── test │ │ ├── component.test.ts │ │ ├── feature-targeting-any.test.scss │ │ ├── foundation.test.ts │ │ └── mdc-notched-outline.scss.test.ts ├── mdc-progress-indicator │ ├── README.md │ ├── component.ts │ ├── foundation.ts │ └── package.json ├── mdc-radio │ ├── .npmignore │ ├── README.md │ ├── _functions.import.scss │ ├── _functions.scss │ ├── _index.scss │ ├── _mixins.import.scss │ ├── _mixins.scss │ ├── _radio-all-deprecated.scss │ ├── _radio-theme.scss │ ├── _radio.scss │ ├── _variables.import.scss │ ├── _variables.scss │ ├── adapter.ts │ ├── component.ts │ ├── constants.ts │ ├── foundation.ts │ ├── images │ │ ├── radio-button-hero.png │ │ └── radio-button-states.png │ ├── index.ts │ ├── mdc-radio.import.scss │ ├── mdc-radio.scss │ ├── package.json │ ├── styles.scss │ └── test │ │ ├── component.test.ts │ │ ├── feature-targeting-any.test.scss │ │ ├── foundation.test.ts │ │ └── mdc-radio.scss.test.ts ├── mdc-ripple │ ├── .npmignore │ ├── README.md │ ├── _functions.import.scss │ ├── _functions.scss │ ├── _index.scss │ ├── _keyframes.import.scss │ ├── _keyframes.scss │ ├── _mixins.import.scss │ ├── _mixins.scss │ ├── _ripple-theme.scss │ ├── _ripple.scss │ ├── _variables.import.scss │ ├── _variables.scss │ ├── adapter.ts │ ├── common.scss │ ├── component.ts │ ├── constants.ts │ ├── foundation.ts │ ├── index.ts │ ├── mdc-ripple.import.scss │ ├── mdc-ripple.scss │ ├── package.json │ ├── styles.scss │ ├── test │ │ ├── component.test.ts │ │ ├── feature-targeting-any.test.scss │ │ ├── foundation-activation.test.ts │ │ ├── foundation-deactivation.test.ts │ │ ├── foundation-general-events.test.ts │ │ ├── foundation.test.ts │ │ ├── helpers.ts │ │ ├── mdc-ripple.scss.test.ts │ │ └── util.test.ts │ ├── types.ts │ └── util.ts ├── mdc-rtl │ ├── README.md │ ├── _index.scss │ ├── _mixins.import.scss │ ├── _mixins.scss │ ├── _rtl.scss │ ├── _variables.import.scss │ ├── _variables.scss │ ├── package.json │ └── test │ │ ├── disable-include-rtl.scss.test.ts │ │ ├── disable-include-rtl.test.scss │ │ ├── rtl.scss.test.ts │ │ ├── rtl.test.scss │ │ ├── theme.scss.test.ts │ │ └── theme.test.scss ├── mdc-segmented-button │ ├── .npmignore │ ├── README.md │ ├── _index.scss │ ├── index.ts │ ├── package.json │ ├── segment │ │ ├── _segment-ripple.scss │ │ ├── _segment-theme.scss │ │ ├── _segment.scss │ │ ├── adapter.ts │ │ ├── component.ts │ │ ├── constants.ts │ │ ├── foundation.ts │ │ ├── index.ts │ │ └── test │ │ │ ├── component.test.ts │ │ │ ├── constants.ts │ │ │ └── foundation.test.ts │ ├── segmented-button │ │ ├── _segmented-button-theme.scss │ │ ├── _segmented-button.scss │ │ ├── adapter.ts │ │ ├── component.ts │ │ ├── constants.ts │ │ ├── foundation.ts │ │ ├── index.ts │ │ └── test │ │ │ ├── component.test.ts │ │ │ ├── constants.ts │ │ │ └── foundation.test.ts │ ├── styles.scss │ └── types.ts ├── mdc-select │ ├── .npmignore │ ├── README.md │ ├── _index.scss │ ├── _mixins.import.scss │ ├── _mixins.scss │ ├── _select-filled-theme.scss │ ├── _select-filled.scss │ ├── _select-helper-text-theme.scss │ ├── _select-helper-text.scss │ ├── _select-icon-theme.scss │ ├── _select-icon.scss │ ├── _select-outlined-theme.scss │ ├── _select-outlined.scss │ ├── _select-ripple.scss │ ├── _select-shared-theme.scss │ ├── _select-theme.scss │ ├── _select.scss │ ├── adapter.ts │ ├── component.ts │ ├── constants.ts │ ├── foundation.ts │ ├── helper-text │ │ ├── README.md │ │ ├── _index.scss │ │ ├── _mixins.import.scss │ │ ├── _mixins.scss │ │ ├── adapter.ts │ │ ├── component.ts │ │ ├── constants.ts │ │ ├── foundation.ts │ │ ├── index.ts │ │ ├── mdc-select-helper-text.scss │ │ └── test │ │ │ ├── component.test.ts │ │ │ └── foundation.test.ts │ ├── icon │ │ ├── README.md │ │ ├── _index.scss │ │ ├── _mixins.import.scss │ │ ├── _mixins.scss │ │ ├── _variables.import.scss │ │ ├── _variables.scss │ │ ├── adapter.ts │ │ ├── component.ts │ │ ├── constants.ts │ │ ├── foundation.ts │ │ ├── index.ts │ │ ├── mdc-select-icon.scss │ │ └── test │ │ │ ├── component.test.ts │ │ │ └── foundation.test.ts │ ├── index.ts │ ├── mdc-select.import.scss │ ├── mdc-select.scss │ ├── package.json │ ├── styles.scss │ ├── test │ │ ├── component.test.ts │ │ ├── feature-targeting-any.test.scss │ │ ├── foundation.test.ts │ │ └── mdc-select.scss.test.ts │ └── types.ts ├── mdc-shape │ ├── README.md │ ├── _functions.import.scss │ ├── _functions.scss │ ├── _index.scss │ ├── _mixins.import.scss │ ├── _mixins.scss │ ├── _shape.scss │ ├── _variables.import.scss │ ├── _variables.scss │ ├── package.json │ └── test │ │ ├── feature-targeting-any.test.scss │ │ ├── mdc-shape.scss.test.ts │ │ └── shape.test.scss ├── mdc-slider │ ├── .npmignore │ ├── README.md │ ├── _index.scss │ ├── _slider-theme.scss │ ├── _slider.scss │ ├── adapter.ts │ ├── component.ts │ ├── constants.ts │ ├── foundation.ts │ ├── images │ │ ├── continuous-range-slider.png │ │ ├── continuous-slider.png │ │ ├── discrete-slider-tick-marks.png │ │ └── discrete-slider.png │ ├── index.ts │ ├── package.json │ ├── styles.scss │ ├── test │ │ ├── component.test.ts │ │ ├── feature-targeting-any.test.scss │ │ ├── foundation.test.ts │ │ ├── mdc-slider.scss.test.ts │ │ └── slider-theme.test.scss │ └── types.ts ├── mdc-snackbar │ ├── .npmignore │ ├── README.md │ ├── _index.scss │ ├── _mixins.import.scss │ ├── _mixins.scss │ ├── _snackbar-theme.scss │ ├── _snackbar.scss │ ├── _variables.import.scss │ ├── _variables.scss │ ├── adapter.ts │ ├── component.ts │ ├── constants.ts │ ├── foundation.ts │ ├── index.ts │ ├── mdc-snackbar.import.scss │ ├── mdc-snackbar.scss │ ├── package.json │ ├── styles.scss │ ├── test │ │ ├── component.test.ts │ │ ├── feature-targeting-any.test.scss │ │ ├── foundation.test.ts │ │ ├── mdc-snackbar.scss.test.ts │ │ └── util.test.ts │ ├── types.ts │ └── util.ts ├── mdc-switch │ ├── .npmignore │ ├── README.md │ ├── _index.scss │ ├── _switch-theme.scss │ ├── _switch.scss │ ├── adapter.ts │ ├── component.ts │ ├── constants.ts │ ├── deprecated │ │ ├── _functions.import.scss │ │ ├── _functions.scss │ │ ├── _index.scss │ │ ├── _mixins.import.scss │ │ ├── _mixins.scss │ │ ├── _variables.import.scss │ │ ├── _variables.scss │ │ ├── adapter.ts │ │ ├── component.ts │ │ ├── constants.ts │ │ ├── foundation.ts │ │ ├── index.ts │ │ ├── mdc-switch-deprecated.scss │ │ ├── mdc-switch.import.scss │ │ ├── mdc-switch.scss │ │ └── test │ │ │ ├── component.test.ts │ │ │ ├── feature-targeting-any.test.scss │ │ │ ├── foundation.test.ts │ │ │ └── mdc-switch.scss.test.ts │ ├── foundation.ts │ ├── images │ │ ├── switch-hero.png │ │ └── switch-states.png │ ├── index.ts │ ├── package.json │ ├── styles.scss │ └── test │ │ ├── component.test.ts │ │ └── foundation.test.ts ├── mdc-tab-bar │ ├── .npmignore │ ├── README.md │ ├── _index.scss │ ├── _mixins.import.scss │ ├── _mixins.scss │ ├── _tab-bar-theme.scss │ ├── _variables.import.scss │ ├── _variables.scss │ ├── adapter.ts │ ├── component.ts │ ├── constants.ts │ ├── foundation.ts │ ├── index.ts │ ├── mdc-tab-bar.import.scss │ ├── mdc-tab-bar.scss │ ├── package.json │ ├── test │ │ ├── component.test.ts │ │ ├── feature-targeting-any.test.scss │ │ ├── foundation.test.ts │ │ └── mdc-tab-bar.scss.test.ts │ └── types.ts ├── mdc-tab-indicator │ ├── .npmignore │ ├── README.md │ ├── _index.scss │ ├── _mixins.import.scss │ ├── _mixins.scss │ ├── _tab-indicator-theme.scss │ ├── adapter.ts │ ├── component.ts │ ├── constants.ts │ ├── fading-foundation.ts │ ├── foundation.ts │ ├── index.ts │ ├── mdc-tab-indicator.import.scss │ ├── mdc-tab-indicator.scss │ ├── package.json │ ├── sliding-foundation.ts │ └── test │ │ ├── component.test.ts │ │ ├── fading-foundation.test.ts │ │ ├── feature-targeting-any.test.scss │ │ ├── mdc-tab-indicator.scss.test.ts │ │ └── sliding-foundation.test.ts ├── mdc-tab-scroller │ ├── .npmignore │ ├── README.md │ ├── _index.scss │ ├── _mixins.import.scss │ ├── _mixins.scss │ ├── _variables.import.scss │ ├── _variables.scss │ ├── adapter.ts │ ├── component.ts │ ├── constants.ts │ ├── foundation.ts │ ├── index.ts │ ├── mdc-tab-scroller.import.scss │ ├── mdc-tab-scroller.scss │ ├── package.json │ ├── rtl-default-scroller.ts │ ├── rtl-negative-scroller.ts │ ├── rtl-reverse-scroller.ts │ ├── rtl-scroller.ts │ ├── test │ │ ├── component.test.ts │ │ ├── feature-targeting-any.test.scss │ │ ├── foundation.test.ts │ │ ├── mdc-tab-scroller.scss.test.ts │ │ ├── rtl-default-scroller.test.ts │ │ ├── rtl-negative-scroller.test.ts │ │ ├── rtl-reverse-scroller.test.ts │ │ └── util.test.ts │ ├── types.ts │ └── util.ts ├── mdc-tab │ ├── .npmignore │ ├── README.md │ ├── _index.scss │ ├── _mixins.import.scss │ ├── _mixins.scss │ ├── _tab-theme.scss │ ├── _variables.import.scss │ ├── _variables.scss │ ├── adapter.ts │ ├── component.ts │ ├── constants.ts │ ├── foundation.ts │ ├── index.ts │ ├── mdc-tab.import.scss │ ├── mdc-tab.scss │ ├── package.json │ ├── test │ │ ├── component.test.ts │ │ ├── feature-targeting-any.test.scss │ │ ├── foundation.test.ts │ │ └── mdc-tab.scss.test.ts │ └── types.ts ├── mdc-textfield │ ├── .npmignore │ ├── README.md │ ├── _filled-text-field-theme.scss │ ├── _index.scss │ ├── _mixins.import.scss │ ├── _mixins.scss │ ├── _outlined-text-field-theme.scss │ ├── _text-field-theme.scss │ ├── _text-field.scss │ ├── _variables.import.scss │ ├── _variables.scss │ ├── adapter.ts │ ├── character-counter │ │ ├── README.md │ │ ├── _index.scss │ │ ├── _mixins.import.scss │ │ ├── _mixins.scss │ │ ├── adapter.ts │ │ ├── component.ts │ │ ├── constants.ts │ │ ├── foundation.ts │ │ ├── index.ts │ │ └── test │ │ │ ├── component.test.ts │ │ │ └── foundation.test.ts │ ├── component.ts │ ├── constants.ts │ ├── foundation.ts │ ├── helper-text │ │ ├── README.md │ │ ├── _index.scss │ │ ├── _mixins.import.scss │ │ ├── _mixins.scss │ │ ├── adapter.ts │ │ ├── component.ts │ │ ├── constants.ts │ │ ├── foundation.ts │ │ ├── index.ts │ │ └── test │ │ │ ├── component.test.ts │ │ │ └── foundation.test.ts │ ├── icon │ │ ├── README.md │ │ ├── _index.scss │ │ ├── _mixins.import.scss │ │ ├── _mixins.scss │ │ ├── _variables.import.scss │ │ ├── _variables.scss │ │ ├── adapter.ts │ │ ├── component.ts │ │ ├── constants.ts │ │ ├── foundation.ts │ │ ├── index.ts │ │ └── test │ │ │ ├── component.test.ts │ │ │ └── foundation.test.ts │ ├── images │ │ └── text-field-generic.png │ ├── index.ts │ ├── mdc-text-field.import.scss │ ├── mdc-text-field.scss │ ├── package.json │ ├── test │ │ ├── component.test.ts │ │ ├── feature-targeting-any.test.scss │ │ ├── foundation.test.ts │ │ └── mdc-text-field.scss.test.ts │ └── types.ts ├── mdc-theme │ ├── README.md │ ├── _all-theme-deprecated.scss │ ├── _color-custom-properties.scss │ ├── _color-palette.import.scss │ ├── _color-palette.scss │ ├── _css.scss │ ├── _custom-properties.scss │ ├── _functions.import.scss │ ├── _functions.scss │ ├── _gss.scss │ ├── _index.scss │ ├── _keys.scss │ ├── _map-ext.scss │ ├── _mixins.import.scss │ ├── _mixins.scss │ ├── _replace.scss │ ├── _selector-ext.scss │ ├── _shadow-dom.scss │ ├── _state.scss │ ├── _string-ext.scss │ ├── _theme-color.scss │ ├── _theme.scss │ ├── _tools.scss │ ├── _validate.scss │ ├── _variables.import.scss │ ├── _variables.scss │ ├── mdc-theme.scss │ ├── package.json │ ├── styles.scss │ └── test │ │ ├── custom-properties.test.scss │ │ ├── feature-targeting-any.test.scss │ │ ├── mdc-theme.scss.test.ts │ │ ├── override.test.scss │ │ ├── replace.test.scss │ │ ├── shadow-dom.test.scss │ │ ├── theme-validate-keys.test.scss │ │ ├── theme.scss.test.ts │ │ ├── theme.test.scss │ │ └── validate.test.scss ├── mdc-tokens │ ├── _resolvers.scss │ ├── package.json │ ├── v0_132 │ │ ├── _index.scss │ │ ├── _md-comp-assist-chip.scss │ │ ├── _md-comp-badge.scss │ │ ├── _md-comp-banner.scss │ │ ├── _md-comp-bottom-app-bar.scss │ │ ├── _md-comp-carousel-item.scss │ │ ├── _md-comp-checkbox.scss │ │ ├── _md-comp-circular-progress-indicator.scss │ │ ├── _md-comp-data-table.scss │ │ ├── _md-comp-date-input-modal.scss │ │ ├── _md-comp-date-picker-docked.scss │ │ ├── _md-comp-date-picker-modal.scss │ │ ├── _md-comp-dialog.scss │ │ ├── _md-comp-divider.scss │ │ ├── _md-comp-elevated-button.scss │ │ ├── _md-comp-elevated-card.scss │ │ ├── _md-comp-extended-fab-branded.scss │ │ ├── _md-comp-extended-fab-primary.scss │ │ ├── _md-comp-extended-fab-secondary.scss │ │ ├── _md-comp-extended-fab-surface.scss │ │ ├── _md-comp-extended-fab-tertiary.scss │ │ ├── _md-comp-fab-branded-large.scss │ │ ├── _md-comp-fab-branded.scss │ │ ├── _md-comp-fab-primary-large.scss │ │ ├── _md-comp-fab-primary-small.scss │ │ ├── _md-comp-fab-primary.scss │ │ ├── _md-comp-fab-secondary-large.scss │ │ ├── _md-comp-fab-secondary-small.scss │ │ ├── _md-comp-fab-secondary.scss │ │ ├── _md-comp-fab-surface-large.scss │ │ ├── _md-comp-fab-surface-small.scss │ │ ├── _md-comp-fab-surface.scss │ │ ├── _md-comp-fab-tertiary-large.scss │ │ ├── _md-comp-fab-tertiary-small.scss │ │ ├── _md-comp-fab-tertiary.scss │ │ ├── _md-comp-filled-autocomplete.scss │ │ ├── _md-comp-filled-button.scss │ │ ├── _md-comp-filled-card.scss │ │ ├── _md-comp-filled-icon-button.scss │ │ ├── _md-comp-filled-menu-button.scss │ │ ├── _md-comp-filled-select.scss │ │ ├── _md-comp-filled-text-field.scss │ │ ├── _md-comp-filled-tonal-button.scss │ │ ├── _md-comp-filled-tonal-icon-button.scss │ │ ├── _md-comp-filter-chip.scss │ │ ├── _md-comp-full-screen-dialog.scss │ │ ├── _md-comp-icon-button.scss │ │ ├── _md-comp-input-chip.scss │ │ ├── _md-comp-linear-progress-indicator.scss │ │ ├── _md-comp-list.scss │ │ ├── _md-comp-menu.scss │ │ ├── _md-comp-navigation-bar.scss │ │ ├── _md-comp-navigation-drawer.scss │ │ ├── _md-comp-navigation-rail.scss │ │ ├── _md-comp-outlined-autocomplete.scss │ │ ├── _md-comp-outlined-button.scss │ │ ├── _md-comp-outlined-card.scss │ │ ├── _md-comp-outlined-icon-button.scss │ │ ├── _md-comp-outlined-menu-button.scss │ │ ├── _md-comp-outlined-segmented-button.scss │ │ ├── _md-comp-outlined-select.scss │ │ ├── _md-comp-outlined-text-field.scss │ │ ├── _md-comp-plain-tooltip.scss │ │ ├── _md-comp-primary-navigation-tab.scss │ │ ├── _md-comp-radio-button.scss │ │ ├── _md-comp-rich-tooltip.scss │ │ ├── _md-comp-scrim.scss │ │ ├── _md-comp-search-bar.scss │ │ ├── _md-comp-search-view.scss │ │ ├── _md-comp-secondary-navigation-tab.scss │ │ ├── _md-comp-sheet-bottom.scss │ │ ├── _md-comp-sheet-floating.scss │ │ ├── _md-comp-sheet-side.scss │ │ ├── _md-comp-slider.scss │ │ ├── _md-comp-snackbar.scss │ │ ├── _md-comp-standard-menu-button.scss │ │ ├── _md-comp-suggestion-chip.scss │ │ ├── _md-comp-switch.scss │ │ ├── _md-comp-text-button.scss │ │ ├── _md-comp-time-input.scss │ │ ├── _md-comp-time-picker.scss │ │ ├── _md-comp-top-app-bar-large.scss │ │ ├── _md-comp-top-app-bar-medium.scss │ │ ├── _md-comp-top-app-bar-small-centered.scss │ │ ├── _md-comp-top-app-bar-small.scss │ │ ├── _md-ref-palette.scss │ │ ├── _md-ref-typeface.scss │ │ ├── _md-sys-color.scss │ │ ├── _md-sys-elevation.scss │ │ ├── _md-sys-motion.scss │ │ ├── _md-sys-shape.scss │ │ ├── _md-sys-state.scss │ │ └── _md-sys-typescale.scss │ └── v0_161 │ │ ├── _index.scss │ │ ├── _md-comp-assist-chip.scss │ │ ├── _md-comp-badge.scss │ │ ├── _md-comp-banner.scss │ │ ├── _md-comp-bottom-app-bar.scss │ │ ├── _md-comp-carousel-item.scss │ │ ├── _md-comp-checkbox.scss │ │ ├── _md-comp-circular-progress-indicator.scss │ │ ├── _md-comp-data-table.scss │ │ ├── _md-comp-date-input-modal.scss │ │ ├── _md-comp-date-picker-docked.scss │ │ ├── _md-comp-date-picker-modal.scss │ │ ├── _md-comp-dialog.scss │ │ ├── _md-comp-divider.scss │ │ ├── _md-comp-elevated-button.scss │ │ ├── _md-comp-elevated-card.scss │ │ ├── _md-comp-extended-fab-branded.scss │ │ ├── _md-comp-extended-fab-primary.scss │ │ ├── _md-comp-extended-fab-secondary.scss │ │ ├── _md-comp-extended-fab-surface.scss │ │ ├── _md-comp-extended-fab-tertiary.scss │ │ ├── _md-comp-fab-branded-large.scss │ │ ├── _md-comp-fab-branded.scss │ │ ├── _md-comp-fab-primary-large.scss │ │ ├── _md-comp-fab-primary-small.scss │ │ ├── _md-comp-fab-primary.scss │ │ ├── _md-comp-fab-secondary-large.scss │ │ ├── _md-comp-fab-secondary-small.scss │ │ ├── _md-comp-fab-secondary.scss │ │ ├── _md-comp-fab-surface-large.scss │ │ ├── _md-comp-fab-surface-small.scss │ │ ├── _md-comp-fab-surface.scss │ │ ├── _md-comp-fab-tertiary-large.scss │ │ ├── _md-comp-fab-tertiary-small.scss │ │ ├── _md-comp-fab-tertiary.scss │ │ ├── _md-comp-filled-autocomplete.scss │ │ ├── _md-comp-filled-button.scss │ │ ├── _md-comp-filled-card.scss │ │ ├── _md-comp-filled-icon-button.scss │ │ ├── _md-comp-filled-menu-button.scss │ │ ├── _md-comp-filled-select.scss │ │ ├── _md-comp-filled-text-field.scss │ │ ├── _md-comp-filled-tonal-button.scss │ │ ├── _md-comp-filled-tonal-icon-button.scss │ │ ├── _md-comp-filter-chip.scss │ │ ├── _md-comp-full-screen-dialog.scss │ │ ├── _md-comp-icon-button.scss │ │ ├── _md-comp-input-chip.scss │ │ ├── _md-comp-linear-progress-indicator.scss │ │ ├── _md-comp-list.scss │ │ ├── _md-comp-menu.scss │ │ ├── _md-comp-navigation-bar.scss │ │ ├── _md-comp-navigation-drawer.scss │ │ ├── _md-comp-navigation-rail.scss │ │ ├── _md-comp-outlined-autocomplete.scss │ │ ├── _md-comp-outlined-button.scss │ │ ├── _md-comp-outlined-card.scss │ │ ├── _md-comp-outlined-icon-button.scss │ │ ├── _md-comp-outlined-menu-button.scss │ │ ├── _md-comp-outlined-segmented-button.scss │ │ ├── _md-comp-outlined-select.scss │ │ ├── _md-comp-outlined-text-field.scss │ │ ├── _md-comp-plain-tooltip.scss │ │ ├── _md-comp-primary-navigation-tab.scss │ │ ├── _md-comp-radio-button.scss │ │ ├── _md-comp-rich-tooltip.scss │ │ ├── _md-comp-scrim.scss │ │ ├── _md-comp-search-bar.scss │ │ ├── _md-comp-search-view.scss │ │ ├── _md-comp-secondary-navigation-tab.scss │ │ ├── _md-comp-sheet-bottom.scss │ │ ├── _md-comp-sheet-floating.scss │ │ ├── _md-comp-sheet-side.scss │ │ ├── _md-comp-slider.scss │ │ ├── _md-comp-snackbar.scss │ │ ├── _md-comp-standard-menu-button.scss │ │ ├── _md-comp-suggestion-chip.scss │ │ ├── _md-comp-switch.scss │ │ ├── _md-comp-text-button.scss │ │ ├── _md-comp-time-input.scss │ │ ├── _md-comp-time-picker.scss │ │ ├── _md-comp-top-app-bar-large.scss │ │ ├── _md-comp-top-app-bar-medium.scss │ │ ├── _md-comp-top-app-bar-small-centered.scss │ │ ├── _md-comp-top-app-bar-small.scss │ │ ├── _md-ref-palette.scss │ │ ├── _md-ref-typeface.scss │ │ ├── _md-sys-color.scss │ │ ├── _md-sys-elevation.scss │ │ ├── _md-sys-motion.scss │ │ ├── _md-sys-shape.scss │ │ ├── _md-sys-state.scss │ │ ├── _md-sys-typescale.scss │ │ ├── index.test.scss │ │ └── lib.test.scss ├── mdc-tooltip │ ├── .npmignore │ ├── README.md │ ├── _index.scss │ ├── _plain-tooltip-theme.scss │ ├── _rich-tooltip-theme.scss │ ├── _tooltip-theme.scss │ ├── _tooltip.scss │ ├── adapter.ts │ ├── component.ts │ ├── constants.ts │ ├── foundation.ts │ ├── images │ │ ├── plain_tooltip_alignment.png │ │ ├── rich_tooltip.png │ │ ├── rich_tooltip_alignment.png │ │ └── tooltip.png │ ├── index.ts │ ├── package.json │ ├── styles.scss │ └── test │ │ ├── component.test.ts │ │ ├── feature-targeting-any.test.scss │ │ ├── foundation.test.ts │ │ └── mdc-tooltip.scss.test.ts ├── mdc-top-app-bar │ ├── .npmignore │ ├── README.md │ ├── _index.scss │ ├── _mixins.import.scss │ ├── _mixins.scss │ ├── _variables.import.scss │ ├── _variables.scss │ ├── adapter.ts │ ├── component.ts │ ├── constants.ts │ ├── fixed │ │ ├── foundation.ts │ │ └── test │ │ │ └── foundation.test.ts │ ├── foundation.ts │ ├── images │ │ ├── contextual-app-bar.png │ │ └── regular-app-bar.png │ ├── index.ts │ ├── mdc-top-app-bar.import.scss │ ├── mdc-top-app-bar.scss │ ├── package.json │ ├── short │ │ ├── foundation.ts │ │ └── test │ │ │ └── foundation.test.ts │ ├── standard │ │ ├── foundation.ts │ │ └── test │ │ │ └── foundation.test.ts │ └── test │ │ ├── component.test.ts │ │ └── foundation.test.ts ├── mdc-touch-target │ ├── README.md │ ├── _index.scss │ ├── _mixins.import.scss │ ├── _mixins.scss │ ├── _touch-target.scss │ ├── _variables.import.scss │ ├── _variables.scss │ ├── package.json │ ├── styles.scss │ └── test │ │ ├── feature-targeting-any.test.scss │ │ └── mdc-touch-target.scss.test.ts └── mdc-typography │ ├── README.md │ ├── _functions.import.scss │ ├── _functions.scss │ ├── _index.scss │ ├── _mixins.import.scss │ ├── _mixins.scss │ ├── _typography.scss │ ├── _variables.import.scss │ ├── _variables.scss │ ├── mdc-typography.import.scss │ ├── mdc-typography.scss │ ├── package.json │ ├── styles.scss │ └── test │ ├── feature-targeting-any.test.scss │ └── mdc-typography.scss.test.ts ├── prettier.config.js ├── scripts ├── build │ ├── clean.js │ ├── environment.js │ └── path-resolver.js ├── canary-release.sh ├── check-pkg-for-release.js ├── cp-pkgs.js ├── dependency-test.sh ├── documentation │ ├── ts-api-table.hbs │ ├── ts-api-tables.hbs │ └── tsdoc.ts ├── pre-release.sh ├── tsconfig.json ├── verify-pkg-main.js └── webpack │ ├── copyright-banner-plugin.js │ ├── css-bundle-factory.js │ ├── css-cleanup-plugin.js │ ├── globber.js │ ├── js-bundle-factory.js │ └── plugin-factory.js ├── testing ├── dom │ ├── events.ts │ └── index.ts ├── featuretargeting │ ├── index.ts │ └── sass-test-compile.helper.ts ├── helpers │ ├── foundation.ts │ ├── jasmine.ts │ └── setup.ts └── ts-node.register.js ├── tsconfig-base.json ├── tsconfig-node.json ├── tsconfig-testing.json ├── tsconfig.json ├── tslint.json └── webpack.config.js /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | tab_width = 2 8 | continuation_indent_size = 4 # IntelliJ family IDEs 9 | end_of_line = lf 10 | charset = utf-8 11 | trim_trailing_whitespace = true 12 | insert_final_newline = true 13 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | **/node_modules 2 | packages/*/dist 3 | **/out 4 | *.pb.js 5 | scripts/documentation/*.js 6 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | linguist-documentation 2 | docs/* linguist-documentation 3 | /package-lock.json linguist-generated 4 | -------------------------------------------------------------------------------- /.github/semantic.yml: -------------------------------------------------------------------------------- 1 | # Config file for Semantic Pull Requests Probot 2 | # See https://github.com/probot/semantic-pull-requests 3 | 4 | # Always validate the PR title, and ignore the commits 5 | titleOnly: true 6 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # macOS filesystem 2 | .DS_Store 3 | 4 | # Editors and IDEs 5 | .idea/ 6 | .vscode/ 7 | 8 | # Generated files 9 | *.log 10 | *.sw* 11 | node_modules/ 12 | 13 | # Build output 14 | /build/ 15 | /dist/ 16 | /coverage/ 17 | packages/*/dist 18 | packages/**/*.js 19 | packages/**/*.d.ts 20 | packages/**/*.map 21 | packages/**/test/**.css 22 | packages/**/package-lock.json 23 | 24 | # Used by internal sync & rewrite scripts 25 | .rewrite-tmp/ 26 | 27 | # Individual CHANGELOG files 28 | packages/**/CHANGELOG.md 29 | 30 | #documentation 31 | docs.json 32 | methodDescriptionTable.md 33 | scripts/documentation/tsdoc.js 34 | -------------------------------------------------------------------------------- /.mdc-docsite.yml: -------------------------------------------------------------------------------- 1 | # Doc site configuration. 2 | # TODO(shyndman): Link to documentation. 3 | basepath: /web 4 | site_platform: web 5 | site_title: Material Components for the Web 6 | site_short_title: Web 7 | site_description: > 8 | Material Components for Web is a set of user interface components that help developers build web apps with material design. 9 | repo_url: https://github.com/material-components/material-components-web/ 10 | repo_stable_branch: master 11 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | 10.16.3 2 | -------------------------------------------------------------------------------- /.sassrc.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Sass configuration file used by Parcel.js for running local demos. 3 | */ 4 | const path = require('path') 5 | const glob = require('glob'); 6 | 7 | const CWD = process.cwd() 8 | const includePaths = glob.sync(path.join(CWD, 'packages/mdc-*/node_modules')); 9 | 10 | module.exports = { 11 | "includePaths": includePaths, 12 | } 13 | -------------------------------------------------------------------------------- /.stylelintignore: -------------------------------------------------------------------------------- 1 | **/node_modules 2 | **/out 3 | build/ 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License 2 | 3 | Copyright (c) 2014-2020 Google, Inc. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /app.yaml: -------------------------------------------------------------------------------- 1 | runtime: python27 2 | api_version: 1 3 | threadsafe: true 4 | 5 | skip_files: 6 | - (?!^(demos|build)) 7 | - ^.*.swp$ 8 | - ^.*.swo$ 9 | - ^.DS_Store$ 10 | 11 | handlers: 12 | - url: / 13 | static_files: demos/redirect.html 14 | upload: demos/redirect.html 15 | 16 | - url: /assets/(.*) 17 | static_files: build/\1 18 | upload: build/(.*) 19 | 20 | - url: /(.*) 21 | static_files: demos/\1 22 | upload: demos/(.*) 23 | -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | 7 | 8 | # Supporting documentation 9 | 10 | This section includes supporting documentation aimed to both improve the onboarding experience for teams that are new to Material Components, as well as cover advanced issues for those interested in the reasoning behind our decisions and contributing to the project. 11 | 12 | To jump right in and begin using the library, check out our [Getting Started Guide](./getting-started.md) 13 | 14 | If you're interested in a general overview of MDC Web, check out [the MDC Repository README](../README.md). 15 | -------------------------------------------------------------------------------- /docs/button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-web/6ceadb81df508ac08ab007c52c4d3dc1d811cc15/docs/button.png -------------------------------------------------------------------------------- /docs/button_with_ripple.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-web/6ceadb81df508ac08ab007c52c4d3dc1d811cc15/docs/button_with_ripple.png -------------------------------------------------------------------------------- /docs/codelabs/codelabs-index.md: -------------------------------------------------------------------------------- 1 | 7 | 8 | # Material Design Components Codelabs 9 | 10 | Google codelabs provide a guided, hands-on coding experience. 11 | 12 | * [MDC-101 Web: Material Components (MDC) Basics (Web)](https://codelabs.developers.google.com/codelabs/mdc-101-web/index.html) 13 | * [MDC-102 Web: Material Structure and Layout (Web)](https://codelabs.developers.google.com/codelabs/mdc-102-web/index.html) 14 | * [MDC-103 Web: Material Theming with Color, Shape, Elevation and Type (Web)](https://codelabs.developers.google.com/codelabs/mdc-103-web/index.html) 15 | * [MDC-111 Web: Incorporating Material Components into your codebase (Web)](https://codelabs.developers.google.com/codelabs/mdc-111-web/index.html) 16 | * [MDC-112 Web: Integrating MDC with Web Frameworks](https://codelabs.developers.google.com/codelabs/mdc-112-web/index.html) 17 | -------------------------------------------------------------------------------- /docs/contribute/README.md: -------------------------------------------------------------------------------- 1 | # How to Contribute 2 | 3 | MDC Web is an open source project, so we encourage contributions! If you are 4 | looking for a bug to fix, check out [Help Wanted Issues](https://github.com/material-components/material-components-web/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22) on GitHub. (Or you can file 5 | new bugs, which will fall into our [Triage Process](../open_source/triage.md).) 6 | 7 | ### Fix a Bug 8 | 9 | If you want to fix a bug, check out the workflow [here](bug_fix.md). 10 | 11 | ### Add a Feature 12 | 13 | We consider any new API to be a new feature. An API is any of the following: 14 | 15 | * Sass Variables, Mixins, Functions 16 | * CSS classes 17 | * DOM structure 18 | * Utility JavaScript Functions 19 | * Foundation 20 | * Adapter 21 | * Component 22 | 23 | > API changes should be done in a backwards compatible way, a.k.a add _new_ APIs, 24 | do not _remove_ old APIs. DOM structure and Adapter methods are the opposite, 25 | you cannot add new _required_ DOM structure or Adapter methods, because this is 26 | backwards incompatible 27 | 28 | If you want to add a feature, check out the workflow [here](feat.md). You can 29 | also check out our [Code Review Process](code_review.md) 30 | 31 | -------------------------------------------------------------------------------- /docs/contribute/bug_fix.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-web/6ceadb81df508ac08ab007c52c4d3dc1d811cc15/docs/contribute/bug_fix.jpg -------------------------------------------------------------------------------- /docs/contribute/bug_fix.md: -------------------------------------------------------------------------------- 1 | # Fix a Bug 2 | 3 | Fixing a bug begins with a GitHub issue, a new branch, and a failing test. 4 | _All bug fixes require test coverage_. This test can be either a JavaScript 5 | test, _or_ it can be a demo page. A lot of our fixes are CSS only fixes, and 6 | this can only be verified with a demo page. 7 | 8 | ![MDC Web Bug Fix](bug_fix.jpg?raw=true) 9 | 10 | > If your fix requires a new API, then you'll have to break your PR into two. 11 | First create a new PR with a new feature, following [this feature workflow](feat.md). 12 | After that PR is merged, then submit the fix PR. 13 | 14 | ### Format Commit Message 15 | 16 | The final commit message for a fix to the mdc-foo package, for GitHub issue 1234, should look like this: 17 | 18 | ``` 19 | fix(foo): Short description of fix 20 | Resolves #1234 21 | ``` 22 | 23 | This commit message is pulled into our CHANGELOG when we [release](../open_source/README.md) and is based on [Angular's Git commit guidelines](https://github.com/angular/angular.js/blob/master/DEVELOPERS.md#commits). 24 | -------------------------------------------------------------------------------- /docs/contribute/feat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-web/6ceadb81df508ac08ab007c52c4d3dc1d811cc15/docs/contribute/feat.jpg -------------------------------------------------------------------------------- /docs/contribute/feat.md: -------------------------------------------------------------------------------- 1 | # Add a Feature 2 | 3 | Adding a feature begins with a new branch and a new API. 4 | _All new APIs require test coverage_. This test can be either a JavaScript 5 | test, _or_ it can be a demo page. CSS only APIs can only be verified with a 6 | demo page. 7 | 8 | ![MDC Web New Feature](feat.jpg?raw=true) 9 | 10 | > If your feature spans multiple packages, then you'll have to break your PR 11 | into multiple PRs. First create a new feature PR for the package which does not 12 | depend on any of the other packages. After that PR is merged, continue working 13 | your way up the dependency tree, submiting new PRs until the last PR is merged. 14 | 15 | ### Format Commit Message 16 | 17 | The final commit message for a feature to the `mdc-foo` package should look like this: 18 | 19 | ``` 20 | feat(foo): Short description of feature 21 | ``` 22 | 23 | This commit message is pulled into our CHANGELOG when we [release](../open_source/README.md) and is based on [Angular's Git commit guidelines](https://github.com/angular/angular.js/blob/master/DEVELOPERS.md#commits). 24 | -------------------------------------------------------------------------------- /docs/docsite-components.md: -------------------------------------------------------------------------------- 1 | --- 2 | # This file is used by the docsite to generate a component index. 3 | title: "Components" 4 | layout: landing-no-drawer 5 | section: components 6 | path: /catalog/ 7 | virtual_source_path: /packages/README.md 8 | --- 9 | 10 | {% include components-list.html %} 11 | -------------------------------------------------------------------------------- /docs/docsite-input-controls.md: -------------------------------------------------------------------------------- 1 | --- 2 | # This file exists describes the directory housing the input components. If the 3 | # URL is visited, it will immediately redirect to the Form Fields component. 4 | title: "Inputs and Controls" 5 | layout: detail 6 | section: components 7 | excerpt: "Form fields, checkboxes, menus, and other input components." 8 | iconId: text_field 9 | path: /catalog/input-controls/ 10 | redirect_path: /catalog/input-controls/form-fields/ 11 | --- 12 | 13 | {% include redirect-page.html %} 14 | -------------------------------------------------------------------------------- /docs/docsite-tabs.md: -------------------------------------------------------------------------------- 1 | --- 2 | # This file exists describes the directory housing the tab components. If the 3 | # URL is visited, it will immediately redirect to the Tab component. 4 | title: "Tabs" 5 | layout: detail 6 | section: components 7 | excerpt: "Components for tabbed navigation." 8 | iconId: tabs 9 | path: /catalog/tabs/ 10 | redirect_path: /catalog/tabs/tab-bar/ 11 | --- 12 | 13 | {% include redirect-page.html %} 14 | -------------------------------------------------------------------------------- /docs/examples.md: -------------------------------------------------------------------------------- 1 | 7 | 8 | # Examples using MDC Web 9 | 10 | - [Shrine](https://glitch.com/~material-example-app-shrine) - An e-commerce app using Text Field, Button, Drawer, List, Image List and Material Theming capabilities. You can build Shrine from scratch by walking through the Google Developers Codelabs [MDC-101 Web](https://codelabs.developers.google.com/codelabs/mdc-101-web), [MDC-102 Web](https://codelabs.developers.google.com/codelabs/mdc-102-web), and [MDC-103 Web](https://codelabs.developers.google.com/codelabs/mdc-103-web). 11 | - [Adopt a Pup](https://glitch.com/~adopt-a-pup) - A pet adoption app using Top App Bar, Tabs, Layout Grid, Card, Text Field, Chips, and Material Theming capabilities -------------------------------------------------------------------------------- /docs/hello_world.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-web/6ceadb81df508ac08ab007c52c4d3dc1d811cc15/docs/hello_world.png -------------------------------------------------------------------------------- /docs/open_source/feedback.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-web/6ceadb81df508ac08ab007c52c4d3dc1d811cc15/docs/open_source/feedback.jpg -------------------------------------------------------------------------------- /docs/supported-browsers.md: -------------------------------------------------------------------------------- 1 | ## MDC Web: Browser support 2 | 3 | We officially support the last two versions of every major browser. Specifically, we test on the following browsers: 4 | 5 | - **Chrome** on Android, Windows, macOS, and Linux 6 | - **Firefox** on Windows, macOS, and Linux 7 | - **Safari** on iOS and macOS 8 | - **Edge** on Windows 9 | - **IE 11** on Windows 10 | -------------------------------------------------------------------------------- /jasmine-node.json: -------------------------------------------------------------------------------- 1 | { 2 | "spec_dir": ".", 3 | "spec_files": [ 4 | "packages/**/test/*.scss.test.ts" 5 | ], 6 | "helpers": [ 7 | "testing/ts-node.register.js", 8 | "testing/featuretargeting/sass-test-compile.helper.ts" 9 | ], 10 | "stopSpecOnExpectationFailure": false 11 | } 12 | -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "14.0.0", 3 | "command": { 4 | "version": { 5 | "conventionalCommits": true 6 | }, 7 | "publish": { 8 | "ignoreChanges": [ 9 | "*.md", 10 | "*.test-increment3" 11 | ] 12 | }, 13 | "bootstrap": { 14 | "hoist": true, 15 | "npmClientArgs": [ 16 | "--no-package-lock" 17 | ] 18 | } 19 | }, 20 | "packages": [ 21 | "packages/*" 22 | ] 23 | } 24 | -------------------------------------------------------------------------------- /packages/README.md: -------------------------------------------------------------------------------- 1 | This folder contains all of our individual components as npm packages, along with the comprehensive 2 | `material-components-web` package. 3 | -------------------------------------------------------------------------------- /packages/material-components-web/.npmignore: -------------------------------------------------------------------------------- 1 | *.ts 2 | !*.d.ts 3 | test/** 4 | -------------------------------------------------------------------------------- /packages/material-components-web/index.scss: -------------------------------------------------------------------------------- 1 | @use './material-components-web'; 2 | -------------------------------------------------------------------------------- /packages/mdc-animation/.npmignore: -------------------------------------------------------------------------------- 1 | *.ts 2 | !*.d.ts 3 | test/** 4 | -------------------------------------------------------------------------------- /packages/mdc-animation/_functions.import.scss: -------------------------------------------------------------------------------- 1 | @forward "./index" as mdc-animation-*; 2 | -------------------------------------------------------------------------------- /packages/mdc-animation/_index.scss: -------------------------------------------------------------------------------- 1 | @forward "./variables"; 2 | @forward "./functions"; 3 | -------------------------------------------------------------------------------- /packages/mdc-animation/_variables.import.scss: -------------------------------------------------------------------------------- 1 | @forward "./index" as mdc-animation-* hide mdc-animation-enter, mdc-animation-exit-permanent, mdc-animation-exit-temporary, mdc-animation-standard; 2 | -------------------------------------------------------------------------------- /packages/mdc-animation/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@material/animation", 3 | "description": "Animation Variables and Mixins used by Material Components for the web", 4 | "version": "14.0.0", 5 | "license": "MIT", 6 | "keywords": [ 7 | "material components", 8 | "material design", 9 | "animation" 10 | ], 11 | "main": "dist/mdc.animation.js", 12 | "module": "index.js", 13 | "sideEffects": false, 14 | "repository": { 15 | "type": "git", 16 | "url": "https://github.com/material-components/material-components-web.git", 17 | "directory": "packages/mdc-animation" 18 | }, 19 | "dependencies": { 20 | "tslib": "^2.1.0" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /packages/mdc-auto-init/.npmignore: -------------------------------------------------------------------------------- 1 | *.ts 2 | !*.d.ts 3 | test/** 4 | -------------------------------------------------------------------------------- /packages/mdc-auto-init/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@material/auto-init", 3 | "description": "Declarative, easy-to-use auto-initialization for Material Components for the web", 4 | "version": "14.0.0", 5 | "main": "dist/mdc.autoInit.js", 6 | "module": "index.js", 7 | "sideEffects": false, 8 | "license": "MIT", 9 | "repository": { 10 | "type": "git", 11 | "url": "https://github.com/material-components/material-components-web.git", 12 | "directory": "packages/mdc-auto-init" 13 | }, 14 | "dependencies": { 15 | "@material/base": "^14.0.0", 16 | "tslib": "^2.1.0" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /packages/mdc-banner/.npmignore: -------------------------------------------------------------------------------- 1 | *.ts 2 | !*.d.ts 3 | test/** 4 | -------------------------------------------------------------------------------- /packages/mdc-banner/_index.scss: -------------------------------------------------------------------------------- 1 | @forward './banner-theme'; 2 | -------------------------------------------------------------------------------- /packages/mdc-banner/images/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-web/6ceadb81df508ac08ab007c52c4d3dc1d811cc15/packages/mdc-banner/images/banner.png -------------------------------------------------------------------------------- /packages/mdc-banner/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@material/banner", 3 | "description": "The Material Components Web banner component.", 4 | "version": "14.0.0", 5 | "license": "MIT", 6 | "keywords": [ 7 | "material components", 8 | "material design", 9 | "banner" 10 | ], 11 | "main": "dist/mdc.banner.js", 12 | "module": "index.js", 13 | "sideEffects": false, 14 | "repository": { 15 | "type": "git", 16 | "url": "https://github.com/material-components/material-components-web.git", 17 | "directory": "packages/mdc-banner" 18 | }, 19 | "dependencies": { 20 | "@material/base": "^14.0.0", 21 | "@material/button": "^14.0.0", 22 | "@material/dom": "^14.0.0", 23 | "@material/elevation": "^14.0.0", 24 | "@material/feature-targeting": "^14.0.0", 25 | "@material/ripple": "^14.0.0", 26 | "@material/rtl": "^14.0.0", 27 | "@material/shape": "^14.0.0", 28 | "@material/theme": "^14.0.0", 29 | "@material/tokens": "^14.0.0", 30 | "@material/typography": "^14.0.0", 31 | "tslib": "^2.1.0" 32 | }, 33 | "publishConfig": { 34 | "access": "public" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /packages/mdc-banner/styles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2020 Google Inc. 3 | // 4 | // Permission is hereby granted, free of charge, to any person obtaining a copy 5 | // of this software and associated documentation files (the "Software"), to deal 6 | // in the Software without restriction, including without limitation the rights 7 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | // copies of the Software, and to permit persons to whom the Software is 9 | // furnished to do so, subject to the following conditions: 10 | // 11 | // The above copyright notice and this permission notice shall be included in 12 | // all copies or substantial portions of the Software. 13 | // 14 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 15 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 16 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 17 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 18 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 19 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 20 | // THE SOFTWARE. 21 | // 22 | 23 | @use './banner'; 24 | 25 | @include banner.core-styles; 26 | -------------------------------------------------------------------------------- /packages/mdc-base/.npmignore: -------------------------------------------------------------------------------- 1 | *.ts 2 | !*.d.ts 3 | test/** 4 | -------------------------------------------------------------------------------- /packages/mdc-base/_index.scss: -------------------------------------------------------------------------------- 1 | @forward "./mixins"; 2 | -------------------------------------------------------------------------------- /packages/mdc-base/_mixins.import.scss: -------------------------------------------------------------------------------- 1 | @forward "./index" as mdc-base-*; 2 | -------------------------------------------------------------------------------- /packages/mdc-base/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@material/base", 3 | "description": "The set of base classes for Material Components for the web", 4 | "version": "14.0.0", 5 | "license": "MIT", 6 | "main": "dist/mdc.base.js", 7 | "module": "index.js", 8 | "sideEffects": false, 9 | "repository": { 10 | "type": "git", 11 | "url": "https://github.com/material-components/material-components-web.git", 12 | "directory": "packages/mdc-base" 13 | }, 14 | "dependencies": { 15 | "tslib": "^2.1.0" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/mdc-button/_index.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2020 Google Inc. 3 | // 4 | // Permission is hereby granted, free of charge, to any person obtaining a copy 5 | // of this software and associated documentation files (the "Software"), to deal 6 | // in the Software without restriction, including without limitation the rights 7 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | // copies of the Software, and to permit persons to whom the Software is 9 | // furnished to do so, subject to the following conditions: 10 | // 11 | // The above copyright notice and this permission notice shall be included in 12 | // all copies or substantial portions of the Software. 13 | // 14 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 15 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 16 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 17 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 18 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 19 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 20 | // THE SOFTWARE. 21 | // 22 | 23 | @forward './button-theme'; 24 | -------------------------------------------------------------------------------- /packages/mdc-button/images/button-theming.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-web/6ceadb81df508ac08ab007c52c4d3dc1d811cc15/packages/mdc-button/images/button-theming.png -------------------------------------------------------------------------------- /packages/mdc-button/images/buttons_types.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-web/6ceadb81df508ac08ab007c52c4d3dc1d811cc15/packages/mdc-button/images/buttons_types.png -------------------------------------------------------------------------------- /packages/mdc-button/images/contained-button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-web/6ceadb81df508ac08ab007c52c4d3dc1d811cc15/packages/mdc-button/images/contained-button.png -------------------------------------------------------------------------------- /packages/mdc-button/images/contained-icon-button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-web/6ceadb81df508ac08ab007c52c4d3dc1d811cc15/packages/mdc-button/images/contained-icon-button.png -------------------------------------------------------------------------------- /packages/mdc-button/images/outlined-button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-web/6ceadb81df508ac08ab007c52c4d3dc1d811cc15/packages/mdc-button/images/outlined-button.png -------------------------------------------------------------------------------- /packages/mdc-button/images/outlined-icon-button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-web/6ceadb81df508ac08ab007c52c4d3dc1d811cc15/packages/mdc-button/images/outlined-icon-button.png -------------------------------------------------------------------------------- /packages/mdc-button/images/text-button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-web/6ceadb81df508ac08ab007c52c4d3dc1d811cc15/packages/mdc-button/images/text-button.png -------------------------------------------------------------------------------- /packages/mdc-button/images/text-icon-button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-web/6ceadb81df508ac08ab007c52c4d3dc1d811cc15/packages/mdc-button/images/text-icon-button.png -------------------------------------------------------------------------------- /packages/mdc-button/images/toggle-bar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-web/6ceadb81df508ac08ab007c52c4d3dc1d811cc15/packages/mdc-button/images/toggle-bar.png -------------------------------------------------------------------------------- /packages/mdc-button/mdc-button.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2016 Google Inc. 3 | // 4 | // Permission is hereby granted, free of charge, to any person obtaining a copy 5 | // of this software and associated documentation files (the "Software"), to deal 6 | // in the Software without restriction, including without limitation the rights 7 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | // copies of the Software, and to permit persons to whom the Software is 9 | // furnished to do so, subject to the following conditions: 10 | // 11 | // The above copyright notice and this permission notice shall be included in 12 | // all copies or substantial portions of the Software. 13 | // 14 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 15 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 16 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 17 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 18 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 19 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 20 | // THE SOFTWARE. 21 | // 22 | 23 | @forward './styles'; 24 | -------------------------------------------------------------------------------- /packages/mdc-button/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@material/button", 3 | "description": "The Material Components for the web button component", 4 | "version": "14.0.0", 5 | "license": "MIT", 6 | "keywords": [ 7 | "material components", 8 | "material design", 9 | "button" 10 | ], 11 | "repository": { 12 | "type": "git", 13 | "url": "https://github.com/material-components/material-components-web.git", 14 | "directory": "packages/mdc-button" 15 | }, 16 | "sideEffects": false, 17 | "dependencies": { 18 | "@material/density": "^14.0.0", 19 | "@material/dom": "^14.0.0", 20 | "@material/elevation": "^14.0.0", 21 | "@material/feature-targeting": "^14.0.0", 22 | "@material/focus-ring": "^14.0.0", 23 | "@material/ripple": "^14.0.0", 24 | "@material/rtl": "^14.0.0", 25 | "@material/shape": "^14.0.0", 26 | "@material/theme": "^14.0.0", 27 | "@material/tokens": "^14.0.0", 28 | "@material/touch-target": "^14.0.0", 29 | "@material/typography": "^14.0.0", 30 | "tslib": "^2.1.0" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /packages/mdc-button/styles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2020 Google Inc. 3 | // 4 | // Permission is hereby granted, free of charge, to any person obtaining a copy 5 | // of this software and associated documentation files (the "Software"), to deal 6 | // in the Software without restriction, including without limitation the rights 7 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | // copies of the Software, and to permit persons to whom the Software is 9 | // furnished to do so, subject to the following conditions: 10 | // 11 | // The above copyright notice and this permission notice shall be included in 12 | // all copies or substantial portions of the Software. 13 | // 14 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 15 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 16 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 17 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 18 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 19 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 20 | // THE SOFTWARE. 21 | // 22 | 23 | @use './button'; 24 | 25 | @include button.core-styles; 26 | -------------------------------------------------------------------------------- /packages/mdc-button/test/feature-targeting-any.test.scss: -------------------------------------------------------------------------------- 1 | @use '../mixins' as button; 2 | @use '@material/feature-targeting/feature-targeting'; 3 | 4 | @mixin test($query) { 5 | .test { 6 | @include button.core-styles($query: $query); 7 | @include button.filled-accessible(red, $query: $query); 8 | @include button.container-fill-color(red, $query: $query); 9 | @include button.outline-color(red, $query: $query); 10 | @include button.icon-color(red, $query: $query); 11 | @include button.ink-color(red, $query: $query); 12 | @include button.shape-radius(0, $query: $query); 13 | @include button.horizontal-padding(0, $query: $query); 14 | @include button.outline-width(0, $query: $query); 15 | @include button.without-ripple($query: $query); 16 | @include button.density(-1, $query: $query); 17 | @include button.height(0, $query: $query); 18 | @include button.label-overflow-ellipsis($query: $query); 19 | } 20 | } 21 | 22 | // This shouldn't output any CSS. 23 | @include test(feature-targeting.any()); 24 | -------------------------------------------------------------------------------- /packages/mdc-card/_index.scss: -------------------------------------------------------------------------------- 1 | @forward "./variables"; 2 | @forward "./mixins"; 3 | -------------------------------------------------------------------------------- /packages/mdc-card/images/card-elevated.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-web/6ceadb81df508ac08ab007c52c4d3dc1d811cc15/packages/mdc-card/images/card-elevated.png -------------------------------------------------------------------------------- /packages/mdc-card/images/card-outlined.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-web/6ceadb81df508ac08ab007c52c4d3dc1d811cc15/packages/mdc-card/images/card-outlined.png -------------------------------------------------------------------------------- /packages/mdc-card/mdc-card.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2016 Google Inc. 3 | // 4 | // Permission is hereby granted, free of charge, to any person obtaining a copy 5 | // of this software and associated documentation files (the "Software"), to deal 6 | // in the Software without restriction, including without limitation the rights 7 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | // copies of the Software, and to permit persons to whom the Software is 9 | // furnished to do so, subject to the following conditions: 10 | // 11 | // The above copyright notice and this permission notice shall be included in 12 | // all copies or substantial portions of the Software. 13 | // 14 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 15 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 16 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 17 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 18 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 19 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 20 | // THE SOFTWARE. 21 | // 22 | 23 | @use './mixins'; 24 | @include mixins.core-styles; 25 | -------------------------------------------------------------------------------- /packages/mdc-card/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@material/card", 3 | "version": "14.0.0", 4 | "description": "The Material Components for the web card component", 5 | "license": "MIT", 6 | "keywords": [ 7 | "material components", 8 | "material design", 9 | "card" 10 | ], 11 | "repository": { 12 | "type": "git", 13 | "url": "https://github.com/material-components/material-components-web.git", 14 | "directory": "packages/mdc-card" 15 | }, 16 | "sideEffects": false, 17 | "dependencies": { 18 | "@material/dom": "^14.0.0", 19 | "@material/elevation": "^14.0.0", 20 | "@material/feature-targeting": "^14.0.0", 21 | "@material/ripple": "^14.0.0", 22 | "@material/rtl": "^14.0.0", 23 | "@material/shape": "^14.0.0", 24 | "@material/theme": "^14.0.0", 25 | "@material/tokens": "^14.0.0", 26 | "tslib": "^2.1.0" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /packages/mdc-card/test/feature-targeting-any.test.scss: -------------------------------------------------------------------------------- 1 | @use '../mixins' as card; 2 | @use '@material/feature-targeting/feature-targeting'; 3 | 4 | @mixin test($query) { 5 | .test { 6 | @include card.core-styles($query: $query); 7 | @include card.fill-color(red, $query: $query); 8 | @include card.outline(red, $query: $query); 9 | @include card.shape-radius(0, $query: $query); 10 | @include card.media-aspect-ratio(1, 1, $query: $query); 11 | @include card.ripple($query: $query); 12 | @include card.without-ripple($query: $query); 13 | } 14 | } 15 | 16 | // This shouldn't output any CSS. 17 | @include test(feature-targeting.any()); 18 | -------------------------------------------------------------------------------- /packages/mdc-checkbox/.npmignore: -------------------------------------------------------------------------------- 1 | *.ts 2 | !*.d.ts 3 | test/** 4 | -------------------------------------------------------------------------------- /packages/mdc-checkbox/_index.scss: -------------------------------------------------------------------------------- 1 | @forward "./variables"; 2 | @forward "./mixins"; 3 | @forward "./keyframes"; 4 | @forward "./functions"; 5 | -------------------------------------------------------------------------------- /packages/mdc-checkbox/images/checkbox-hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-web/6ceadb81df508ac08ab007c52c4d3dc1d811cc15/packages/mdc-checkbox/images/checkbox-hero.png -------------------------------------------------------------------------------- /packages/mdc-checkbox/images/checkbox-states.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-web/6ceadb81df508ac08ab007c52c4d3dc1d811cc15/packages/mdc-checkbox/images/checkbox-states.png -------------------------------------------------------------------------------- /packages/mdc-checkbox/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@material/checkbox", 3 | "description": "The Material Components for the web checkbox component", 4 | "version": "14.0.0", 5 | "license": "MIT", 6 | "keywords": [ 7 | "material components", 8 | "material design", 9 | "checkbox" 10 | ], 11 | "main": "dist/mdc.checkbox.js", 12 | "module": "./index.js", 13 | "sideEffects": false, 14 | "repository": { 15 | "type": "git", 16 | "url": "https://github.com/material-components/material-components-web.git", 17 | "directory": "packages/mdc-checkbox" 18 | }, 19 | "dependencies": { 20 | "@material/animation": "^14.0.0", 21 | "@material/base": "^14.0.0", 22 | "@material/density": "^14.0.0", 23 | "@material/dom": "^14.0.0", 24 | "@material/feature-targeting": "^14.0.0", 25 | "@material/focus-ring": "^14.0.0", 26 | "@material/ripple": "^14.0.0", 27 | "@material/rtl": "^14.0.0", 28 | "@material/theme": "^14.0.0", 29 | "@material/touch-target": "^14.0.0", 30 | "tslib": "^2.1.0" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /packages/mdc-checkbox/test/feature-targeting-any.test.scss: -------------------------------------------------------------------------------- 1 | @use '../mixins' as checkbox; 2 | @use '@material/feature-targeting/feature-targeting'; 3 | 4 | @mixin test($query) { 5 | .test { 6 | @include checkbox.container-colors($query: $query); 7 | @include checkbox.ink-color(red, $query: $query); 8 | @include checkbox.focus-indicator-color(red, $query: $query); 9 | @include checkbox.ripple-styles($query: $query); 10 | @include checkbox.ripple-size(0, $query: $query); 11 | @include checkbox.touch-target(0, 0, $query: $query); 12 | @include checkbox.density(0, $query: $query); 13 | } 14 | } 15 | 16 | // This shouldn't output any CSS. 17 | @include test(feature-targeting.any()); 18 | -------------------------------------------------------------------------------- /packages/mdc-chips/.npmignore: -------------------------------------------------------------------------------- 1 | *.ts 2 | !*.d.ts 3 | test/** 4 | -------------------------------------------------------------------------------- /packages/mdc-chips/_index.scss: -------------------------------------------------------------------------------- 1 | @forward './chip-theme'; 2 | @forward './chip-set-theme'; 3 | -------------------------------------------------------------------------------- /packages/mdc-chips/deprecated/_index.scss: -------------------------------------------------------------------------------- 1 | @forward "./variables"; 2 | @forward "./mixins"; 3 | -------------------------------------------------------------------------------- /packages/mdc-chips/deprecated/trailingaction/_index.scss: -------------------------------------------------------------------------------- 1 | @forward "./variables"; 2 | @forward "./mixins"; 3 | -------------------------------------------------------------------------------- /packages/mdc-chips/deprecated/trailingaction/test/feature-targeting-any.test.scss: -------------------------------------------------------------------------------- 1 | @use '../mixins' as trailingaction; 2 | @use '@material/feature-targeting/functions' as feature-functions; 3 | 4 | @mixin test($query) { 5 | .test { 6 | @include trailingaction.core-styles($query: $query); 7 | @include trailingaction.color(red, $query: $query); 8 | @include trailingaction.size(0, $query: $query); 9 | @include trailingaction.horizontal-spacing(10px, 10px, $query: $query); 10 | @include trailingaction.touch-target-width(10px, $query: $query); 11 | @include trailingaction.ripple($query: $query); 12 | @include trailingaction.without-ripple($query: $query); 13 | } 14 | } 15 | 16 | // This shouldn't output any CSS. 17 | @include test(feature-functions.any()); 18 | -------------------------------------------------------------------------------- /packages/mdc-circular-progress/.npmignore: -------------------------------------------------------------------------------- 1 | *.ts 2 | !*.d.ts 3 | test/** 4 | -------------------------------------------------------------------------------- /packages/mdc-circular-progress/_index.scss: -------------------------------------------------------------------------------- 1 | @forward "./variables"; 2 | @forward "./mixins"; 3 | @forward "./keyframes"; 4 | -------------------------------------------------------------------------------- /packages/mdc-circular-progress/_keyframes.import.scss: -------------------------------------------------------------------------------- 1 | @forward "./index" as mdc-circular-progress-* hide mdc-circular-progress-core-styles, mdc-circular-progress-color, mdc-circular-progress-indeterminate-colors, mdc-circular-progress-size-, mdc-circular-progress-indeterminate-animations-; 2 | -------------------------------------------------------------------------------- /packages/mdc-circular-progress/_variables.import.scss: -------------------------------------------------------------------------------- 1 | @forward "./index" as mdc-circular-progress-* hide mdc-circular-progress-core-styles, mdc-circular-progress-color, mdc-circular-progress-indeterminate-colors, mdc-circular-progress-size-, mdc-circular-progress-indeterminate-animations-, mdc-circular-progress-container-rotate-keyframes-, mdc-circular-progress-spinner-layer-rotate-keyframes-, mdc-circular-progress-color-1-fade-in-out-keyframes-, mdc-circular-progress-color-2-fade-in-out-keyframes-, mdc-circular-progress-color-3-fade-in-out-keyframes-, mdc-circular-progress-color-4-fade-in-out-keyframes-, mdc-circular-progress-left-spin-keyframes-, mdc-circular-progress-right-spin-keyframes-; 2 | -------------------------------------------------------------------------------- /packages/mdc-circular-progress/mdc-circular-progress.import.scss: -------------------------------------------------------------------------------- 1 | @forward "@material/animation/variables" as mdc-animation-*; 2 | @forward "@material/theme/variables" as mdc-theme-*; 3 | @forward "variables" as mdc-circular-progress-*; 4 | @forward "@material/theme/mixins" as mdc-theme-*; 5 | @forward "keyframes" as mdc-circular-progress-*; 6 | @forward "mixins" as mdc-circular-progress-*; 7 | @forward "@material/animation/functions" as mdc-animation-*; 8 | @forward "@material/feature-targeting/functions" as mdc-feature-*; 9 | @forward "@material/theme/functions" as mdc-theme-*; 10 | @forward "mdc-circular-progress"; 11 | -------------------------------------------------------------------------------- /packages/mdc-circular-progress/mdc-circular-progress.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2022 Google Inc. 3 | // 4 | // Permission is hereby granted, free of charge, to any person obtaining a copy 5 | // of this software and associated documentation files (the "Software"), to deal 6 | // in the Software without restriction, including without limitation the rights 7 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | // copies of the Software, and to permit persons to whom the Software is 9 | // furnished to do so, subject to the following conditions: 10 | // 11 | // The above copyright notice and this permission notice shall be included in 12 | // all copies or substantial portions of the Software. 13 | // 14 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 15 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 16 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 17 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 18 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 19 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 20 | // THE SOFTWARE. 21 | // 22 | 23 | @forward './styles'; 24 | -------------------------------------------------------------------------------- /packages/mdc-circular-progress/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@material/circular-progress", 3 | "description": "The Material Components for the web circular progress component", 4 | "version": "14.0.0", 5 | "license": "MIT", 6 | "keywords": [ 7 | "material components", 8 | "material design", 9 | "circular-progress" 10 | ], 11 | "main": "dist/mdc.circularProgress.js", 12 | "module": "./index.js", 13 | "sideEffects": false, 14 | "repository": { 15 | "type": "git", 16 | "url": "https://github.com/material-components/material-components-web.git", 17 | "directory": "packages/mdc-circular-progress" 18 | }, 19 | "dependencies": { 20 | "@material/animation": "^14.0.0", 21 | "@material/base": "^14.0.0", 22 | "@material/dom" : "^14.0.0", 23 | "@material/feature-targeting": "^14.0.0", 24 | "@material/progress-indicator": "^14.0.0", 25 | "@material/rtl": "^14.0.0", 26 | "@material/theme": "^14.0.0", 27 | "tslib": "^2.1.0" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /packages/mdc-circular-progress/test/feature-targeting-any.test.scss: -------------------------------------------------------------------------------- 1 | @use '../mixins' as circular-progress; 2 | @use '@material/feature-targeting/feature-targeting'; 3 | 4 | @mixin test($query) { 5 | .test { 6 | @include circular-progress.core-styles($query: $query); 7 | @include circular-progress.color(red, $query: $query); 8 | @include circular-progress.indeterminate-colors( 9 | (red, blue, green, yellow), 10 | $query: $query 11 | ); 12 | } 13 | } 14 | 15 | // This shouldn't output any CSS. 16 | @include test(feature-targeting.any()); 17 | -------------------------------------------------------------------------------- /packages/mdc-data-table/.npmignore: -------------------------------------------------------------------------------- 1 | *.ts 2 | !*.d.ts 3 | test/** 4 | -------------------------------------------------------------------------------- /packages/mdc-data-table/_index.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2020 Google Inc. 3 | // 4 | // Permission is hereby granted, free of charge, to any person obtaining a copy 5 | // of this software and associated documentation files (the "Software"), to deal 6 | // in the Software without restriction, including without limitation the rights 7 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | // copies of the Software, and to permit persons to whom the Software is 9 | // furnished to do so, subject to the following conditions: 10 | // 11 | // The above copyright notice and this permission notice shall be included in 12 | // all copies or substantial portions of the Software. 13 | // 14 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 15 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 16 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 17 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 18 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 19 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 20 | // THE SOFTWARE. 21 | // 22 | 23 | @forward './data-table-theme'; 24 | -------------------------------------------------------------------------------- /packages/mdc-data-table/images/data-table-hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-web/6ceadb81df508ac08ab007c52c4d3dc1d811cc15/packages/mdc-data-table/images/data-table-hero.png -------------------------------------------------------------------------------- /packages/mdc-data-table/mdc-data-table.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2019 Google Inc. 3 | // 4 | // Permission is hereby granted, free of charge, to any person obtaining a copy 5 | // of this software and associated documentation files (the "Software"), to deal 6 | // in the Software without restriction, including without limitation the rights 7 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | // copies of the Software, and to permit persons to whom the Software is 9 | // furnished to do so, subject to the following conditions: 10 | // 11 | // The above copyright notice and this permission notice shall be included in 12 | // all copies or substantial portions of the Software. 13 | // 14 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 15 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 16 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 17 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 18 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 19 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 20 | // THE SOFTWARE. 21 | // 22 | 23 | @forward './styles'; 24 | -------------------------------------------------------------------------------- /packages/mdc-density/_functions.import.scss: -------------------------------------------------------------------------------- 1 | @forward "./index" as mdc-density-*; 2 | -------------------------------------------------------------------------------- /packages/mdc-density/_index.scss: -------------------------------------------------------------------------------- 1 | @forward './density'; 2 | -------------------------------------------------------------------------------- /packages/mdc-density/_variables.import.scss: -------------------------------------------------------------------------------- 1 | @forward "./index" as mdc-density-* hide mdc-density-prop-value; 2 | -------------------------------------------------------------------------------- /packages/mdc-density/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@material/density", 3 | "description": "Density utilities for Material Components for the web", 4 | "version": "14.0.0", 5 | "license": "MIT", 6 | "keywords": [ 7 | "material components", 8 | "material design", 9 | "density", 10 | "adaptive layout" 11 | ], 12 | "sideEffects": false, 13 | "repository": { 14 | "type": "git", 15 | "url": "https://github.com/material-components/material-components-web.git", 16 | "directory": "packages/mdc-density" 17 | }, 18 | "dependencies": { 19 | "tslib": "^2.1.0" 20 | }, 21 | "publishConfig": { 22 | "access": "public" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /packages/mdc-dialog/.npmignore: -------------------------------------------------------------------------------- 1 | *.ts 2 | !*.d.ts 3 | test/** 4 | -------------------------------------------------------------------------------- /packages/mdc-dialog/_dialog-custom-properties.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2020 Google Inc. 3 | // 4 | // Permission is hereby granted, free of charge, to any person obtaining a copy 5 | // of this software and associated documentation files (the "Software"), to deal 6 | // in the Software without restriction, including without limitation the rights 7 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | // copies of the Software, and to permit persons to whom the Software is 9 | // furnished to do so, subject to the following conditions: 10 | // 11 | // The above copyright notice and this permission notice shall be included in 12 | // all copies or substantial portions of the Software. 13 | // 14 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 15 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 16 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 17 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 18 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 19 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 20 | // THE SOFTWARE. 21 | // 22 | 23 | $z-index: --mdc-dialog-z-index; 24 | -------------------------------------------------------------------------------- /packages/mdc-dialog/_index.scss: -------------------------------------------------------------------------------- 1 | @forward "./variables"; 2 | @forward "./mixins"; 3 | -------------------------------------------------------------------------------- /packages/mdc-dialog/_variables.import.scss: -------------------------------------------------------------------------------- 1 | @forward "./index" as mdc-dialog-* hide mdc-dialog-core-styles, mdc-dialog-container-fill-color, mdc-dialog-scrim-color, mdc-dialog-title-ink-color, mdc-dialog-content-ink-color, mdc-dialog-scroll-divider-color, mdc-dialog-shape-radius, mdc-dialog-min-width, mdc-dialog-max-width, mdc-dialog-max-height, mdc-dialog-with-touch-target; 2 | -------------------------------------------------------------------------------- /packages/mdc-dialog/images/alert-dialog.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-web/6ceadb81df508ac08ab007c52c4d3dc1d811cc15/packages/mdc-dialog/images/alert-dialog.png -------------------------------------------------------------------------------- /packages/mdc-dialog/images/confirmation-dialog.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-web/6ceadb81df508ac08ab007c52c4d3dc1d811cc15/packages/mdc-dialog/images/confirmation-dialog.png -------------------------------------------------------------------------------- /packages/mdc-dialog/images/full-screen-dialog.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-web/6ceadb81df508ac08ab007c52c4d3dc1d811cc15/packages/mdc-dialog/images/full-screen-dialog.png -------------------------------------------------------------------------------- /packages/mdc-dialog/images/simple-dialog.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-web/6ceadb81df508ac08ab007c52c4d3dc1d811cc15/packages/mdc-dialog/images/simple-dialog.png -------------------------------------------------------------------------------- /packages/mdc-dialog/mdc-dialog.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2017 Google Inc. 3 | // 4 | // Permission is hereby granted, free of charge, to any person obtaining a copy 5 | // of this software and associated documentation files (the "Software"), to deal 6 | // in the Software without restriction, including without limitation the rights 7 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | // copies of the Software, and to permit persons to whom the Software is 9 | // furnished to do so, subject to the following conditions: 10 | // 11 | // The above copyright notice and this permission notice shall be included in 12 | // all copies or substantial portions of the Software. 13 | // 14 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 15 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 16 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 17 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 18 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 19 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 20 | // THE SOFTWARE. 21 | // 22 | 23 | @use './mixins'; 24 | @include mixins.core-styles; 25 | -------------------------------------------------------------------------------- /packages/mdc-dialog/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@material/dialog", 3 | "version": "14.0.0", 4 | "description": "The Material Components Web dialog component", 5 | "license": "MIT", 6 | "keywords": [ 7 | "material components", 8 | "material design", 9 | "dialog", 10 | "modal" 11 | ], 12 | "main": "dist/mdc.dialog.js", 13 | "module": "index.js", 14 | "sideEffects": false, 15 | "repository": { 16 | "type": "git", 17 | "url": "https://github.com/material-components/material-components-web.git", 18 | "directory": "packages/mdc-dialog" 19 | }, 20 | "dependencies": { 21 | "@material/animation": "^14.0.0", 22 | "@material/base": "^14.0.0", 23 | "@material/button": "^14.0.0", 24 | "@material/dom": "^14.0.0", 25 | "@material/elevation": "^14.0.0", 26 | "@material/feature-targeting": "^14.0.0", 27 | "@material/icon-button": "^14.0.0", 28 | "@material/ripple": "^14.0.0", 29 | "@material/rtl": "^14.0.0", 30 | "@material/shape": "^14.0.0", 31 | "@material/theme": "^14.0.0", 32 | "@material/tokens": "^14.0.0", 33 | "@material/touch-target": "^14.0.0", 34 | "@material/typography": "^14.0.0", 35 | "tslib": "^2.1.0" 36 | }, 37 | "publishConfig": { 38 | "access": "public" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /packages/mdc-dialog/test/feature-targeting-any.test.scss: -------------------------------------------------------------------------------- 1 | @use '../mixins' as dialog; 2 | @use '@material/feature-targeting/feature-targeting'; 3 | 4 | @mixin test($query) { 5 | .test { 6 | @include dialog.core-styles($query: $query); 7 | @include dialog.container-fill-color(red, $query: $query); 8 | @include dialog.scrim-color(red, $query: $query); 9 | @include dialog.title-ink-color(red, $query: $query); 10 | @include dialog.content-ink-color(red, $query: $query); 11 | @include dialog.scroll-divider-color(red, $query: $query); 12 | @include dialog.shape-radius(0, $query: $query); 13 | @include dialog.min-width(0, $query: $query); 14 | @include dialog.max-width(0, 0, $query: $query); 15 | @include dialog.max-height(0, 0, $query: $query); 16 | @include dialog.with-touch-target($query: $query); 17 | } 18 | } 19 | 20 | // This shouldn't output any CSS. 21 | @include test(feature-targeting.any()); 22 | -------------------------------------------------------------------------------- /packages/mdc-dom/.npmignore: -------------------------------------------------------------------------------- 1 | *.ts 2 | !*.d.ts 3 | test/** 4 | -------------------------------------------------------------------------------- /packages/mdc-dom/_index.scss: -------------------------------------------------------------------------------- 1 | @forward "./mixins"; 2 | -------------------------------------------------------------------------------- /packages/mdc-dom/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@material/dom", 3 | "description": "DOM manipulation utilities for Material Components for the web", 4 | "version": "14.0.0", 5 | "license": "MIT", 6 | "main": "dist/mdc.dom.js", 7 | "module": "index.js", 8 | "sideEffects": false, 9 | "repository": { 10 | "type": "git", 11 | "url": "https://github.com/material-components/material-components-web.git", 12 | "directory": "packages/mdc-dom" 13 | }, 14 | "publishConfig": { 15 | "access": "public" 16 | }, 17 | "dependencies": { 18 | "@material/feature-targeting": "^14.0.0", 19 | "@material/rtl": "^14.0.0", 20 | "tslib": "^2.1.0" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /packages/mdc-dom/test/feature-targeting-any.test.scss: -------------------------------------------------------------------------------- 1 | @use '../mixins' as dom; 2 | @use '@material/feature-targeting/feature-targeting'; 3 | 4 | @mixin test($query) { 5 | .test { 6 | @include dom.transparent-border($query: $query); 7 | @include dom.visually-hidden($query: $query); 8 | } 9 | } 10 | 11 | // This shouldn't output any CSS. 12 | @include test(feature-targeting.any()); 13 | -------------------------------------------------------------------------------- /packages/mdc-drawer/.npmignore: -------------------------------------------------------------------------------- 1 | *.ts 2 | !*.d.ts 3 | test/** 4 | -------------------------------------------------------------------------------- /packages/mdc-drawer/_index.scss: -------------------------------------------------------------------------------- 1 | @forward "./variables"; 2 | @forward "./mixins"; 3 | -------------------------------------------------------------------------------- /packages/mdc-drawer/common.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2018 Google Inc. 3 | // 4 | // Permission is hereby granted, free of charge, to any person obtaining a copy 5 | // of this software and associated documentation files (the "Software"), to deal 6 | // in the Software without restriction, including without limitation the rights 7 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | // copies of the Software, and to permit persons to whom the Software is 9 | // furnished to do so, subject to the following conditions: 10 | // 11 | // The above copyright notice and this permission notice shall be included in 12 | // all copies or substantial portions of the Software. 13 | // 14 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 15 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 16 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 17 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 18 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 19 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 20 | // THE SOFTWARE. 21 | // 22 | 23 | @use './mixins'; 24 | @include mixins.core-styles; 25 | -------------------------------------------------------------------------------- /packages/mdc-drawer/images/drawer-composite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-web/6ceadb81df508ac08ab007c52c4d3dc1d811cc15/packages/mdc-drawer/images/drawer-composite.png -------------------------------------------------------------------------------- /packages/mdc-drawer/images/drawer-hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-web/6ceadb81df508ac08ab007c52c4d3dc1d811cc15/packages/mdc-drawer/images/drawer-hero.png -------------------------------------------------------------------------------- /packages/mdc-drawer/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@material/drawer", 3 | "version": "14.0.0", 4 | "description": "The Material Components Web drawer component", 5 | "license": "MIT", 6 | "keywords": [ 7 | "material components", 8 | "material design", 9 | "navigation", 10 | "drawer" 11 | ], 12 | "main": "dist/mdc.drawer.js", 13 | "module": "index.js", 14 | "sideEffects": false, 15 | "repository": { 16 | "type": "git", 17 | "url": "https://github.com/material-components/material-components-web.git", 18 | "directory": "packages/mdc-drawer" 19 | }, 20 | "dependencies": { 21 | "@material/animation": "^14.0.0", 22 | "@material/base": "^14.0.0", 23 | "@material/dom": "^14.0.0", 24 | "@material/elevation": "^14.0.0", 25 | "@material/feature-targeting": "^14.0.0", 26 | "@material/list": "^14.0.0", 27 | "@material/ripple": "^14.0.0", 28 | "@material/rtl": "^14.0.0", 29 | "@material/shape": "^14.0.0", 30 | "@material/theme": "^14.0.0", 31 | "@material/typography": "^14.0.0", 32 | "tslib": "^2.1.0" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /packages/mdc-elevation/_functions.import.scss: -------------------------------------------------------------------------------- 1 | @forward "@material/animation" as mdc-animation-* hide mdc-animation-enter, mdc-animation-exit-permanent, mdc-animation-exit-temporary, mdc-animation-standard; 2 | @forward "./index" as mdc-elevation-* hide mdc-elevation-core-styles, mdc-elevation-overlay-common, mdc-elevation-shadow, mdc-elevation-overlay-surface-position, mdc-elevation-overlay-dimensions, mdc-elevation-overlay-fill-color, mdc-elevation-overlay-opacity, mdc-elevation-elevation, mdc-elevation-overlay-selector-; 3 | -------------------------------------------------------------------------------- /packages/mdc-elevation/_index.scss: -------------------------------------------------------------------------------- 1 | @forward "./variables"; 2 | @forward "./mixins"; 3 | @forward "./functions"; 4 | -------------------------------------------------------------------------------- /packages/mdc-elevation/_variables.import.scss: -------------------------------------------------------------------------------- 1 | @forward "@material/animation" as mdc-animation-* hide mdc-animation-enter, mdc-animation-exit-permanent, mdc-animation-exit-temporary, mdc-animation-standard; 2 | @forward "./index" as mdc-elevation-* hide mdc-elevation-core-styles, mdc-elevation-overlay-common, mdc-elevation-shadow, mdc-elevation-overlay-surface-position, mdc-elevation-overlay-dimensions, mdc-elevation-overlay-fill-color, mdc-elevation-overlay-opacity, mdc-elevation-elevation, mdc-elevation-overlay-selector-, mdc-elevation-transition-value, mdc-elevation-overlay-transition-value; 3 | -------------------------------------------------------------------------------- /packages/mdc-elevation/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@material/elevation", 3 | "description": "Material Components for the web mixins + CSS Classes for Material Design elevation", 4 | "version": "14.0.0", 5 | "license": "MIT", 6 | "keywords": [ 7 | "material components", 8 | "material design", 9 | "elevation" 10 | ], 11 | "repository": { 12 | "type": "git", 13 | "url": "https://github.com/material-components/material-components-web.git", 14 | "directory": "packages/mdc-elevation" 15 | }, 16 | "sideEffects": false, 17 | "dependencies": { 18 | "@material/animation": "^14.0.0", 19 | "@material/base": "^14.0.0", 20 | "@material/feature-targeting": "^14.0.0", 21 | "@material/rtl": "^14.0.0", 22 | "@material/theme": "^14.0.0", 23 | "tslib": "^2.1.0" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /packages/mdc-elevation/styles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2017 Google Inc. 3 | // 4 | // Permission is hereby granted, free of charge, to any person obtaining a copy 5 | // of this software and associated documentation files (the "Software"), to deal 6 | // in the Software without restriction, including without limitation the rights 7 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | // copies of the Software, and to permit persons to whom the Software is 9 | // furnished to do so, subject to the following conditions: 10 | // 11 | // The above copyright notice and this permission notice shall be included in 12 | // all copies or substantial portions of the Software. 13 | // 14 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 15 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 16 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 17 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 18 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 19 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 20 | // THE SOFTWARE. 21 | // 22 | 23 | @use './elevation'; 24 | @include elevation.core-styles; 25 | -------------------------------------------------------------------------------- /packages/mdc-elevation/test/feature-targeting-any.test.scss: -------------------------------------------------------------------------------- 1 | @use '../mixins' as elevation; 2 | @use '@material/feature-targeting/feature-targeting'; 3 | 4 | @mixin test($query) { 5 | .test { 6 | @include elevation.core-styles($query: $query); 7 | @include elevation.overlay-common($query: $query); 8 | @include elevation.elevation(0, $query: $query); 9 | @include elevation.shadow(none, $query: $query); 10 | @include elevation.overlay-dimensions(100%, $query: $query); 11 | @include elevation.overlay-surface-position($query: $query); 12 | @include elevation.overlay-fill-color(red, $query: $query); 13 | @include elevation.overlay-opacity(99%, $query: $query); 14 | } 15 | } 16 | 17 | // This shouldn't output any CSS. 18 | @include test(feature-targeting.any()); 19 | -------------------------------------------------------------------------------- /packages/mdc-fab/_index.scss: -------------------------------------------------------------------------------- 1 | @forward "./fab" hide theme, theme-styles; 2 | @forward "./extended-fab-theme" hide theme, theme-styles, $custom-property-prefix; 3 | @forward "./fab-theme"; 4 | -------------------------------------------------------------------------------- /packages/mdc-fab/_variables.import.scss: -------------------------------------------------------------------------------- 1 | @forward "./index" as mdc-fab-* hide $mdc-fab-ripple-target, $mdc-fab-icon-enter-delay-, $mdc-fab-icon-enter-duration-, mdc-fab-core-styles, mdc-fab-without-ripple, mdc-fab-ripple, mdc-fab-accessible, mdc-fab-container-color, mdc-fab-icon-size, mdc-fab-ink-color, mdc-fab-extended-fluid, mdc-fab-extended-padding, mdc-fab-extended-label-padding, mdc-fab-shape-radius, mdc-fab-extended-shape-radius, mdc-fab-base-, mdc-fab-mini-, mdc-fab-extended-, mdc-fab-icon-, mdc-fab-label-, mdc-fab-icon-overrides-, mdc-fab-exited-; 2 | -------------------------------------------------------------------------------- /packages/mdc-fab/images/FAB_types.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-web/6ceadb81df508ac08ab007c52c4d3dc1d811cc15/packages/mdc-fab/images/FAB_types.png -------------------------------------------------------------------------------- /packages/mdc-fab/mdc-fab.scss: -------------------------------------------------------------------------------- 1 | // Copyright 2016 Google Inc. 2 | // 3 | // Permission is hereby granted, free of charge, to any person obtaining a copy 4 | // of this software and associated documentation files (the "Software"), to deal 5 | // in the Software without restriction, including without limitation the rights 6 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | // copies of the Software, and to permit persons to whom the Software is 8 | // furnished to do so, subject to the following conditions: 9 | // 10 | // The above copyright notice and this permission notice shall be included in 11 | // all copies or substantial portions of the Software. 12 | // 13 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | // THE SOFTWARE. 20 | 21 | @use './mixins'; 22 | @include mixins.core-styles; 23 | -------------------------------------------------------------------------------- /packages/mdc-fab/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@material/fab", 3 | "description": "The Material Components for the web floating action button component", 4 | "version": "14.0.0", 5 | "license": "MIT", 6 | "keywords": [ 7 | "material components", 8 | "material design", 9 | "floating action button", 10 | "fab" 11 | ], 12 | "repository": { 13 | "type": "git", 14 | "url": "https://github.com/material-components/material-components-web.git", 15 | "directory": "packages/mdc-fab" 16 | }, 17 | "sideEffects": false, 18 | "dependencies": { 19 | "@material/animation": "^14.0.0", 20 | "@material/dom": "^14.0.0", 21 | "@material/elevation": "^14.0.0", 22 | "@material/feature-targeting": "^14.0.0", 23 | "@material/focus-ring": "^14.0.0", 24 | "@material/ripple": "^14.0.0", 25 | "@material/rtl": "^14.0.0", 26 | "@material/shape": "^14.0.0", 27 | "@material/theme": "^14.0.0", 28 | "@material/tokens": "^14.0.0", 29 | "@material/touch-target": "^14.0.0", 30 | "@material/typography": "^14.0.0", 31 | "tslib": "^2.1.0" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /packages/mdc-fab/test/feature-targeting-any.test.scss: -------------------------------------------------------------------------------- 1 | @use '../mixins' as fab; 2 | @use '@material/feature-targeting/feature-targeting'; 3 | 4 | @mixin test($query) { 5 | .test { 6 | @include fab.core-styles($query: $query); 7 | @include fab.without-ripple($query: $query); 8 | @include fab.ripple($query: $query); 9 | @include fab.accessible(red, $query: $query); 10 | @include fab.container-color(red, $query: $query); 11 | @include fab.icon-size(0, $query: $query); 12 | @include fab.ink-color(red, $query: $query); 13 | @include fab.extended-fluid($query: $query); 14 | @include fab.extended-padding(0, 0, $query: $query); 15 | @include fab.extended-label-padding(0, $query: $query); 16 | @include fab.shape-radius(0, $query: $query); 17 | @include fab.extended-shape-radius( 18 | 0, 19 | $rtl-reflexive: false, 20 | $query: $query 21 | ); 22 | } 23 | } 24 | 25 | // This shouldn't output any CSS. 26 | @include test(feature-targeting.any()); 27 | -------------------------------------------------------------------------------- /packages/mdc-feature-targeting/_functions.import.scss: -------------------------------------------------------------------------------- 1 | @forward "./index" as mdc-feature-* hide $mdc-feature-targets-context-, mdc-feature-targets; 2 | -------------------------------------------------------------------------------- /packages/mdc-feature-targeting/_index.scss: -------------------------------------------------------------------------------- 1 | @forward 'feature-targeting'; 2 | -------------------------------------------------------------------------------- /packages/mdc-feature-targeting/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@material/feature-targeting", 3 | "description": "Material Components for the web Feature Targeting Scss helpers", 4 | "version": "14.0.0", 5 | "license": "MIT", 6 | "keywords": [ 7 | "material components", 8 | "material design", 9 | "feature targeting" 10 | ], 11 | "sideEffects": false, 12 | "repository": { 13 | "type": "git", 14 | "url": "https://github.com/material-components/material-components-web.git", 15 | "directory": "packages/mdc-feature-targeting" 16 | }, 17 | "dependencies": { 18 | "tslib": "^2.1.0" 19 | }, 20 | "publishConfig": { 21 | "access": "public" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /packages/mdc-floating-label/.npmignore: -------------------------------------------------------------------------------- 1 | *.ts 2 | !*.d.ts 3 | test/** 4 | -------------------------------------------------------------------------------- /packages/mdc-floating-label/_index.scss: -------------------------------------------------------------------------------- 1 | @forward "./variables"; 2 | @forward "./mixins"; 3 | -------------------------------------------------------------------------------- /packages/mdc-floating-label/_variables.import.scss: -------------------------------------------------------------------------------- 1 | @forward "./index" as mdc-floating-label-* hide mdc-floating-label-core-styles, mdc-floating-label-ink-color, mdc-floating-label-fill-color, mdc-floating-label-shake-keyframes, mdc-floating-label-float-position, mdc-floating-label-shake-animation, mdc-floating-label-max-width; 2 | -------------------------------------------------------------------------------- /packages/mdc-floating-label/mdc-floating-label.import.scss: -------------------------------------------------------------------------------- 1 | @forward "@material/base/mixins" as mdc-base-*; 2 | @forward "@material/rtl/variables" as mdc-rtl-*; 3 | @forward "@material/theme/variables" as mdc-theme-*; 4 | @forward "@material/animation/variables" as mdc-animation-*; 5 | @forward "@material/typography/variables" as mdc-typography-*; 6 | @forward "variables" as mdc-floating-label-*; 7 | @forward "@material/rtl/mixins" as mdc-* hide mdc-property-, mdc-reflexive, mdc-reflexive-box, mdc-reflexive-position, mdc-reflexive-property; 8 | @forward "@material/rtl/mixins" as mdc-rtl-* hide mdc-rtl-rtl; 9 | @forward "@material/theme/mixins" as mdc-theme-*; 10 | @forward "@material/typography/mixins" as mdc-* hide mdc-base, mdc-baseline-bottom, mdc-baseline-strut-, mdc-baseline-top, mdc-core-styles, mdc-overflow-ellipsis; 11 | @forward "@material/typography/mixins" as mdc-typography-* hide mdc-typography-typography; 12 | @forward "mixins" as mdc-floating-label-*; 13 | @forward "@material/theme/functions" as mdc-theme-*; 14 | @forward "@material/typography/functions" as mdc-typography-*; 15 | @forward "mdc-floating-label"; 16 | -------------------------------------------------------------------------------- /packages/mdc-floating-label/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@material/floating-label", 3 | "description": "The Material Components for the web floating-label component", 4 | "version": "14.0.0", 5 | "license": "MIT", 6 | "keywords": [ 7 | "material components", 8 | "material design", 9 | "floatinglabel", 10 | "floating label" 11 | ], 12 | "main": "dist/mdc.floatingLabel.js", 13 | "module": "index.js", 14 | "sideEffects": false, 15 | "repository": { 16 | "type": "git", 17 | "url": "git+https://github.com/material-components/material-components-web.git", 18 | "directory": "packages/mdc-floating-label" 19 | }, 20 | "publishConfig": { 21 | "access": "public" 22 | }, 23 | "dependencies": { 24 | "@material/animation": "^14.0.0", 25 | "@material/base": "^14.0.0", 26 | "@material/dom": "^14.0.0", 27 | "@material/feature-targeting": "^14.0.0", 28 | "@material/rtl": "^14.0.0", 29 | "@material/theme": "^14.0.0", 30 | "@material/typography": "^14.0.0", 31 | "tslib": "^2.1.0" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /packages/mdc-floating-label/test/feature-targeting-any.test.scss: -------------------------------------------------------------------------------- 1 | @use '../mixins' as floating-label; 2 | @use '@material/feature-targeting/feature-targeting'; 3 | 4 | @mixin test($query) { 5 | .test { 6 | @include floating-label.core-styles($query: $query); 7 | @include floating-label.ink-color(red, $query: $query); 8 | @include floating-label.fill-color(red, $query: $query); 9 | @include floating-label.shake-keyframes(standard, 100%, $query: $query); 10 | @include floating-label.float-position(100%, $query: $query); 11 | @include floating-label.shake-animation(standard, $query: $query); 12 | @include floating-label.max-width(100%, $query: $query); 13 | @include floating-label.float-transition(250ms, linear, $query: $query); 14 | } 15 | } 16 | 17 | // This shouldn't output any CSS. 18 | @include test(feature-targeting.any()); 19 | -------------------------------------------------------------------------------- /packages/mdc-focus-ring/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@material/focus-ring", 3 | "description": "The Material Components Web focus ring utilities", 4 | "version": "14.0.0", 5 | "license": "MIT", 6 | "keywords": [ 7 | "material components", 8 | "material design", 9 | "focus", 10 | "focusring" 11 | ], 12 | "sideEffects": false, 13 | "repository": { 14 | "type": "git", 15 | "url": "git+https://github.com/material-components/material-components-web.git", 16 | "directory": "packages/mdc-focus-ring" 17 | }, 18 | "publishConfig": { 19 | "access": "public" 20 | }, 21 | "dependencies": { 22 | "@material/dom": "^14.0.0", 23 | "@material/feature-targeting": "^14.0.0", 24 | "@material/rtl": "^14.0.0", 25 | "@material/shape": "^14.0.0", 26 | "@material/theme": "^14.0.0" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /packages/mdc-focus/README.md: -------------------------------------------------------------------------------- 1 | # Focus 2 | 3 | This package contains focus-related utilities. 4 | 5 | ## Focus rings 6 | 7 | To add a focus ring to an element, ensure the following requirements: 8 | - The focus ring should be a child of the element which it is offset from. 9 | - The element which the focus ring is offset from should have a 10 | non-static `position` CSS value. This is because the focus ring has 11 | `position: absolute` and is then positioned relative to its container 12 | element. 13 | - The focus ring can be shown in Sass via `focus-ring-theme.show-focus-ring()`. 14 | 15 | 16 | See the following example: 17 | 18 | ```html 19 | 23 | ``` 24 | 25 | ```scss 26 | .mdc-button { 27 | position: relative; 28 | } 29 | 30 | .mdc-focus-ring { 31 | @include focus-ring-theme.static-styles(); 32 | @include focus-ring-theme.theme-styles(focus-ring-theme.$light-theme); 33 | } 34 | 35 | .mdc-button:focus-visible .mdc-focus-ring { 36 | @include focus-ring-theme.show-focus-ring(); 37 | } 38 | ``` 39 | -------------------------------------------------------------------------------- /packages/mdc-focus/_focus-ring-shared-theme.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:map'; 2 | 3 | @use '@material/tokens/v0_132' as tokens; 4 | 5 | $ring-offset-key: 'offset'; 6 | $ring-color-key: 'color'; 7 | $track-width-key: 'track-width'; 8 | $target-shape-key: 'target-shape'; 9 | $track-width-value: 3px; 10 | $_grow-animation-duration: 150ms; 11 | $_shrink-animation-duration: 450ms; 12 | $_animation-timing: cubic-bezier(0.2, 0, 0, 1); 13 | 14 | $_color-sys: tokens.md-sys-color-values-light(); 15 | 16 | $default-shared-theme: ( 17 | $track-width-key: $track-width-value, 18 | $ring-color-key: map.get($_color-sys, 'secondary'), 19 | ); 20 | 21 | @mixin focus-ring-animation($grow-animation-name, $shrink-animation-name) { 22 | animation-name: $grow-animation-name, $shrink-animation-name; 23 | animation-duration: $_grow-animation-duration, $_shrink-animation-duration; 24 | animation-delay: 0s, $_grow-animation-duration; 25 | animation-timing-function: $_animation-timing, $_animation-timing; 26 | 27 | @media (prefers-reduced-motion) { 28 | animation: none; 29 | } 30 | } 31 | 32 | /// This should be applied to the focus ring element when the focus ring 33 | /// should be shown (e.g. based on `:focus-visible` pseudoclass). 34 | @mixin show-focus-ring() { 35 | display: block; 36 | } 37 | -------------------------------------------------------------------------------- /packages/mdc-focus/_focus-ring-test-helper.scss: -------------------------------------------------------------------------------- 1 | /// Stop the animation half way to see the maximum size of the focus ring. 2 | @mixin focus-ring-half-animation { 3 | animation-iteration-count: 1; 4 | animation-fill-mode: forwards; 5 | animation-duration: 0s; 6 | } 7 | -------------------------------------------------------------------------------- /packages/mdc-focus/_focus-ring.scss: -------------------------------------------------------------------------------- 1 | @mixin static-styles() { 2 | display: none; 3 | pointer-events: none; 4 | position: absolute; 5 | 6 | // Focus rings should render above other elements by default (although 7 | // note that this does not guarantee that focus rings *always* render 8 | // above other elements, due to how z-index and stacking contexts work). 9 | // See also: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context 10 | z-index: 1; 11 | } 12 | -------------------------------------------------------------------------------- /packages/mdc-focus/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@material/focus", 3 | "description": "The Material Components Web focus ring utilities", 4 | "version": "14.0.0", 5 | "license": "MIT", 6 | "keywords": ["material components", "material design", "focus", "focusring"], 7 | "sideEffects": false, 8 | "repository": { 9 | "type": "git", 10 | "url": "git+https://github.com/material-components/material-components-web.git", 11 | "directory": "packages/mdc-focus" 12 | }, 13 | "publishConfig": { 14 | "access": "public" 15 | }, 16 | "dependencies": { 17 | "@material/theme": "^14.0.0", 18 | "@material/tokens": "^14.0.0", 19 | "@material/shape": "^14.0.0" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /packages/mdc-form-field/.npmignore: -------------------------------------------------------------------------------- 1 | *.ts 2 | !*.d.ts 3 | test/** 4 | -------------------------------------------------------------------------------- /packages/mdc-form-field/_index.scss: -------------------------------------------------------------------------------- 1 | @forward "./variables"; 2 | @forward "./mixins"; 3 | -------------------------------------------------------------------------------- /packages/mdc-form-field/_variables.import.scss: -------------------------------------------------------------------------------- 1 | @forward "./index" as mdc-form-field-* hide mdc-form-field-core-styles; 2 | -------------------------------------------------------------------------------- /packages/mdc-form-field/mdc-form-field.import.scss: -------------------------------------------------------------------------------- 1 | @forward "@material/rtl/variables" as mdc-rtl-*; 2 | @forward "@material/theme/variables" as mdc-theme-*; 3 | @forward "@material/typography/variables" as mdc-typography-*; 4 | @forward "variables" as mdc-form-field-*; 5 | @forward "@material/rtl/mixins" as mdc-* hide mdc-property-, mdc-reflexive, mdc-reflexive-box, mdc-reflexive-position, mdc-reflexive-property; 6 | @forward "@material/rtl/mixins" as mdc-rtl-* hide mdc-rtl-rtl; 7 | @forward "@material/theme/mixins" as mdc-theme-*; 8 | @forward "@material/typography/mixins" as mdc-* hide mdc-base, mdc-baseline-bottom, mdc-baseline-strut-, mdc-baseline-top, mdc-core-styles, mdc-overflow-ellipsis; 9 | @forward "@material/typography/mixins" as mdc-typography-* hide mdc-typography-typography; 10 | @forward "mixins" as mdc-form-field-*; 11 | @forward "@material/feature-targeting/functions" as mdc-feature-*; 12 | @forward "@material/theme/functions" as mdc-theme-*; 13 | @forward "@material/typography/functions" as mdc-typography-*; 14 | @forward "mdc-form-field"; 15 | -------------------------------------------------------------------------------- /packages/mdc-form-field/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@material/form-field", 3 | "description": "Material Components for the web wrapper for laying out form fields and labels next to one another", 4 | "version": "14.0.0", 5 | "license": "MIT", 6 | "keywords": [ 7 | "material components", 8 | "material design", 9 | "form" 10 | ], 11 | "main": "dist/mdc.formField.js", 12 | "module": "index.js", 13 | "sideEffects": false, 14 | "repository": { 15 | "type": "git", 16 | "url": "https://github.com/material-components/material-components-web.git", 17 | "directory": "packages/mdc-form-field" 18 | }, 19 | "dependencies": { 20 | "@material/base": "^14.0.0", 21 | "@material/feature-targeting": "^14.0.0", 22 | "@material/ripple": "^14.0.0", 23 | "@material/rtl": "^14.0.0", 24 | "@material/theme": "^14.0.0", 25 | "@material/typography": "^14.0.0", 26 | "tslib": "^2.1.0" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /packages/mdc-form-field/test/feature-targeting-any.test.scss: -------------------------------------------------------------------------------- 1 | @use '../form-field'; 2 | @use '../form-field-theme'; 3 | @use '@material/feature-targeting/feature-targeting'; 4 | 5 | @mixin test($query) { 6 | .test { 7 | @include form-field.static-styles($query: $query); 8 | @include form-field-theme.theme-styles( 9 | form-field-theme.$light-theme, 10 | $query 11 | ); 12 | } 13 | } 14 | 15 | // This shouldn't output any CSS. 16 | @include test(feature-targeting.any()); 17 | -------------------------------------------------------------------------------- /packages/mdc-icon-button/.npmignore: -------------------------------------------------------------------------------- 1 | *.ts 2 | !*.d.ts 3 | test/** 4 | -------------------------------------------------------------------------------- /packages/mdc-icon-button/_icon-button-all-deprecated.scss: -------------------------------------------------------------------------------- 1 | @forward "./variables"; 2 | @forward "./mixins"; 3 | -------------------------------------------------------------------------------- /packages/mdc-icon-button/_index.scss: -------------------------------------------------------------------------------- 1 | @forward "./icon-button-theme"; 2 | -------------------------------------------------------------------------------- /packages/mdc-icon-button/_variables.import.scss: -------------------------------------------------------------------------------- 1 | @forward "@material/density" as mdc-density-* hide mdc-density-prop-value; 2 | @forward "./icon-button-all-deprecated" as mdc-icon-button-* hide mdc-icon-button-core-styles, mdc-icon-button-without-ripple, mdc-icon-button-ripple, mdc-icon-button-density, mdc-icon-button-size, mdc-icon-button-icon-size, mdc-icon-button-ink-color, mdc-icon-button-disabled-ink-color, mdc-icon-button-base-, mdc-icon-button-ink-color-, mdc-icon-button-if-disabled-; 3 | -------------------------------------------------------------------------------- /packages/mdc-icon-button/mdc-icon-button.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2018 Google Inc. 3 | // 4 | // Permission is hereby granted, free of charge, to any person obtaining a copy 5 | // of this software and associated documentation files (the "Software"), to deal 6 | // in the Software without restriction, including without limitation the rights 7 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | // copies of the Software, and to permit persons to whom the Software is 9 | // furnished to do so, subject to the following conditions: 10 | // 11 | // The above copyright notice and this permission notice shall be included in 12 | // all copies or substantial portions of the Software. 13 | // 14 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 15 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 16 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 17 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 18 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 19 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 20 | // THE SOFTWARE. 21 | // 22 | 23 | @forward './styles'; 24 | -------------------------------------------------------------------------------- /packages/mdc-icon-button/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@material/icon-button", 3 | "description": "The Material Components for the web icon button component", 4 | "version": "14.0.0", 5 | "license": "MIT", 6 | "main": "dist/mdc.iconButton.js", 7 | "module": "index.js", 8 | "sideEffects": false, 9 | "keywords": [ 10 | "material components", 11 | "material design", 12 | "button", 13 | "icon button", 14 | "icon toggle" 15 | ], 16 | "repository": { 17 | "type": "git", 18 | "url": "https://github.com/material-components/material-components-web.git", 19 | "directory": "packages/mdc-icon-button" 20 | }, 21 | "dependencies": { 22 | "@material/base": "^14.0.0", 23 | "@material/density": "^14.0.0", 24 | "@material/dom": "^14.0.0", 25 | "@material/elevation": "^14.0.0", 26 | "@material/feature-targeting": "^14.0.0", 27 | "@material/focus-ring": "^14.0.0", 28 | "@material/ripple": "^14.0.0", 29 | "@material/rtl": "^14.0.0", 30 | "@material/theme": "^14.0.0", 31 | "@material/touch-target": "^14.0.0", 32 | "tslib": "^2.1.0" 33 | }, 34 | "publishConfig": { 35 | "access": "public" 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /packages/mdc-icon-button/test/feature-targeting-any.test.scss: -------------------------------------------------------------------------------- 1 | @use '../mixins' as icon-button; 2 | @use '@material/feature-targeting/feature-targeting'; 3 | 4 | @mixin test($query) { 5 | .test { 6 | @include icon-button.core-styles($query: $query); 7 | @include icon-button.density(0, $query: $query); 8 | @include icon-button.size(0, $query: $query); 9 | @include icon-button.icon-size(0, $query: $query); 10 | @include icon-button.ink-color(red, $query: $query); 11 | } 12 | } 13 | 14 | // This shouldn't output any CSS. 15 | @include test(feature-targeting.any()); 16 | -------------------------------------------------------------------------------- /packages/mdc-image-list/_index.scss: -------------------------------------------------------------------------------- 1 | @forward "./variables"; 2 | @forward "./mixins"; 3 | -------------------------------------------------------------------------------- /packages/mdc-image-list/_variables.import.scss: -------------------------------------------------------------------------------- 1 | @forward "./index" as mdc-image-list-* hide mdc-image-list-core-styles, mdc-image-list-aspect, mdc-image-list-shape-radius, mdc-image-list-standard-columns, mdc-image-list-masonry-columns; 2 | -------------------------------------------------------------------------------- /packages/mdc-image-list/mdc-image-list.scss: -------------------------------------------------------------------------------- 1 | // Copyright 2018 Google Inc. 2 | // 3 | // Permission is hereby granted, free of charge, to any person obtaining a copy 4 | // of this software and associated documentation files (the "Software"), to deal 5 | // in the Software without restriction, including without limitation the rights 6 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | // copies of the Software, and to permit persons to whom the Software is 8 | // furnished to do so, subject to the following conditions: 9 | // 10 | // The above copyright notice and this permission notice shall be included in 11 | // all copies or substantial portions of the Software. 12 | // 13 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | // THE SOFTWARE. 20 | 21 | @use './mixins'; 22 | @include mixins.core-styles; 23 | -------------------------------------------------------------------------------- /packages/mdc-image-list/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@material/image-list", 3 | "version": "14.0.0", 4 | "description": "The Material Components for the web image list component", 5 | "license": "MIT", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/material-components/material-components-web.git", 9 | "directory": "packages/mdc-image-list" 10 | }, 11 | "keywords": [ 12 | "material components", 13 | "material design", 14 | "image list" 15 | ], 16 | "sideEffects": false, 17 | "dependencies": { 18 | "@material/feature-targeting": "^14.0.0", 19 | "@material/shape": "^14.0.0", 20 | "@material/theme": "^14.0.0", 21 | "@material/typography": "^14.0.0", 22 | "tslib": "^2.1.0" 23 | }, 24 | "publishConfig": { 25 | "access": "public" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /packages/mdc-image-list/test/feature-targeting-all.test.scss: -------------------------------------------------------------------------------- 1 | @use './feature-targeting-any.test' as feature-targeting-test; 2 | @use '@material/feature-targeting/feature-targeting'; 3 | 4 | // Verify that the Sass compiles when we ask for all features. 5 | @include feature-targeting-test.test(feature-targeting.all()); 6 | -------------------------------------------------------------------------------- /packages/mdc-image-list/test/feature-targeting-any.test.scss: -------------------------------------------------------------------------------- 1 | @use '../mixins' as image-list; 2 | @use '@material/feature-targeting/feature-targeting'; 3 | 4 | @mixin test($query) { 5 | .test { 6 | @include image-list.core-styles($query: $query); 7 | @include image-list.aspect(1, $query: $query); 8 | @include image-list.shape-radius(0, $query: $query); 9 | @include image-list.standard-columns(4, 4px, $query: $query); 10 | @include image-list.masonry-columns(4, 4px, $query: $query); 11 | } 12 | } 13 | 14 | // This shouldn't output any CSS. 15 | @include test(feature-targeting.any()); 16 | -------------------------------------------------------------------------------- /packages/mdc-layout-grid/_index.scss: -------------------------------------------------------------------------------- 1 | @forward "./variables"; 2 | @forward "./mixins"; 3 | -------------------------------------------------------------------------------- /packages/mdc-layout-grid/_mixins.import.scss: -------------------------------------------------------------------------------- 1 | @forward "./index" as mdc-layout-grid-* hide mdc-layout-grid-layout-grid; 2 | @forward "./index" as mdc-* show mdc-layout-grid; 3 | -------------------------------------------------------------------------------- /packages/mdc-layout-grid/_variables.import.scss: -------------------------------------------------------------------------------- 1 | @forward "./index" as mdc-layout-grid-* hide mdc-layout-grid-media-query-, mdc-layout-grid-cell-span-, mdc-layout-grid-layout-grid, mdc-layout-grid-inner, mdc-layout-grid-cell, mdc-layout-grid-cell-order, mdc-layout-grid-cell-align, mdc-layout-grid-fixed-column-width, mdc-layout-grid-breakpoint-min, mdc-layout-grid-breakpoint-max; 2 | -------------------------------------------------------------------------------- /packages/mdc-layout-grid/mdc-layout-grid.import.scss: -------------------------------------------------------------------------------- 1 | @forward "variables" as mdc-layout-grid-*; 2 | @forward "mixins" as mdc-* hide mdc-breakpoint-max, mdc-breakpoint-min, mdc-cell, mdc-cell-align, mdc-cell-order, mdc-cell-span-, mdc-fixed-column-width, mdc-inner, mdc-media-query-; 3 | @forward "mixins" as mdc-layout-grid-* hide mdc-layout-grid-layout-grid; 4 | @forward "mdc-layout-grid"; 5 | -------------------------------------------------------------------------------- /packages/mdc-layout-grid/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@material/layout-grid", 3 | "version": "14.0.0", 4 | "description": "The Material Components for the web layout grid component", 5 | "license": "MIT", 6 | "keywords": [ 7 | "material components", 8 | "material design", 9 | "grid", 10 | "layout" 11 | ], 12 | "sideEffects": false, 13 | "repository": { 14 | "type": "git", 15 | "url": "https://github.com/material-components/material-components-web.git", 16 | "directory": "packages/mdc-layout-grid" 17 | }, 18 | "dependencies": { 19 | "tslib": "^2.1.0" 20 | }, 21 | "publishConfig": { 22 | "access": "public" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /packages/mdc-line-ripple/.npmignore: -------------------------------------------------------------------------------- 1 | *.ts 2 | !*.d.ts 3 | test/** 4 | -------------------------------------------------------------------------------- /packages/mdc-line-ripple/_functions.import.scss: -------------------------------------------------------------------------------- 1 | @forward "@material/animation" as mdc-animation-* hide mdc-animation-enter, mdc-animation-exit-permanent, mdc-animation-exit-temporary, mdc-animation-standard; 2 | @forward "./index" as mdc-line-ripple-* hide mdc-line-ripple-core-styles, mdc-line-ripple-color; 3 | -------------------------------------------------------------------------------- /packages/mdc-line-ripple/_index.scss: -------------------------------------------------------------------------------- 1 | @forward "./mixins"; 2 | @forward "./functions"; 3 | -------------------------------------------------------------------------------- /packages/mdc-line-ripple/mdc-line-ripple.import.scss: -------------------------------------------------------------------------------- 1 | @forward "@material/base/mixins" as mdc-base-*; 2 | @forward "@material/theme/variables" as mdc-theme-*; 3 | @forward "@material/animation/variables" as mdc-animation-*; 4 | @forward "@material/theme/mixins" as mdc-theme-*; 5 | @forward "mixins" as mdc-line-ripple-*; 6 | @forward "@material/feature-targeting/functions" as mdc-feature-*; 7 | @forward "@material/theme/functions" as mdc-theme-*; 8 | @forward "functions" as mdc-line-ripple-*; 9 | @forward "mdc-line-ripple"; 10 | -------------------------------------------------------------------------------- /packages/mdc-line-ripple/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@material/line-ripple", 3 | "description": "The Material Components for the web line-ripple component", 4 | "version": "14.0.0", 5 | "license": "MIT", 6 | "keywords": [ 7 | "material components", 8 | "material design", 9 | "lineripple", 10 | "line-ripple" 11 | ], 12 | "main": "dist/mdc.lineRipple.js", 13 | "module": "index.js", 14 | "sideEffects": false, 15 | "repository": { 16 | "type": "git", 17 | "url": "git+https://github.com/material-components/material-components-web.git", 18 | "directory": "packages/mdc-line-ripple" 19 | }, 20 | "publishConfig": { 21 | "access": "public" 22 | }, 23 | "dependencies": { 24 | "@material/animation": "^14.0.0", 25 | "@material/base": "^14.0.0", 26 | "@material/feature-targeting": "^14.0.0", 27 | "@material/theme": "^14.0.0", 28 | "tslib": "^2.1.0" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /packages/mdc-line-ripple/test/feature-targeting-any.test.scss: -------------------------------------------------------------------------------- 1 | @use '../mixins' as line-ripple; 2 | @use '@material/feature-targeting/feature-targeting'; 3 | 4 | @mixin test($query) { 5 | .test { 6 | @include line-ripple.core-styles($query: $query); 7 | @include line-ripple.active-color(red, $query: $query); 8 | } 9 | } 10 | 11 | // This shouldn't output any CSS. 12 | @include test(feature-targeting.any()); 13 | -------------------------------------------------------------------------------- /packages/mdc-linear-progress/.npmignore: -------------------------------------------------------------------------------- 1 | *.ts 2 | !*.d.ts 3 | test/** 4 | -------------------------------------------------------------------------------- /packages/mdc-linear-progress/_index.scss: -------------------------------------------------------------------------------- 1 | @forward "./variables"; 2 | @forward "./mixins"; 3 | @forward "./keyframes"; 4 | -------------------------------------------------------------------------------- /packages/mdc-linear-progress/_keyframes.import.scss: -------------------------------------------------------------------------------- 1 | @forward "./index" as mdc-linear-progress-* hide $mdc-linear-progress-baseline-buffer-color, $mdc-linear-progress-height, mdc-linear-progress-core-styles, mdc-linear-progress-bar-color, mdc-linear-progress-buffer-color, mdc-linear-progress-indeterminate-, mdc-linear-progress-reversed-, mdc-linear-progress-str-replace-; 2 | -------------------------------------------------------------------------------- /packages/mdc-linear-progress/_variables.import.scss: -------------------------------------------------------------------------------- 1 | @forward "./index" as mdc-linear-progress-* hide mdc-linear-progress-core-styles, mdc-linear-progress-bar-color, mdc-linear-progress-buffer-color, mdc-linear-progress-indeterminate-, mdc-linear-progress-reversed-, mdc-linear-progress-str-replace-, mdc-linear-progress-primary-indeterminate-translate-keyframes-, mdc-linear-progress-primary-indeterminate-scale-keyframes-, mdc-linear-progress-secondary-indeterminate-translate-keyframes-, mdc-linear-progress-secondary-indeterminate-scale-keyframes-, mdc-linear-progress-buffering-keyframes-, mdc-linear-progress-primary-indeterminate-translate-reverse-keyframes-, mdc-linear-progress-secondary-indeterminate-translate-reverse-keyframes-, mdc-linear-progress-buffering-reverse-keyframes-; 2 | -------------------------------------------------------------------------------- /packages/mdc-linear-progress/mdc-linear-progress.import.scss: -------------------------------------------------------------------------------- 1 | @forward "@material/animation/variables" as mdc-animation-*; 2 | @forward "@material/theme/variables" as mdc-theme-*; 3 | @forward "variables" as mdc-linear-progress-*; 4 | @forward "@material/theme/mixins" as mdc-theme-*; 5 | @forward "keyframes" as mdc-linear-progress-*; 6 | @forward "mixins" as mdc-linear-progress-*; 7 | @forward "@material/animation/functions" as mdc-animation-*; 8 | @forward "@material/feature-targeting/functions" as mdc-feature-*; 9 | @forward "@material/theme/functions" as mdc-theme-*; 10 | @forward "mdc-linear-progress"; 11 | -------------------------------------------------------------------------------- /packages/mdc-linear-progress/mdc-linear-progress.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2017 Google Inc. 3 | // 4 | // Permission is hereby granted, free of charge, to any person obtaining a copy 5 | // of this software and associated documentation files (the "Software"), to deal 6 | // in the Software without restriction, including without limitation the rights 7 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | // copies of the Software, and to permit persons to whom the Software is 9 | // furnished to do so, subject to the following conditions: 10 | // 11 | // The above copyright notice and this permission notice shall be included in 12 | // all copies or substantial portions of the Software. 13 | // 14 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 15 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 16 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 17 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 18 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 19 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 20 | // THE SOFTWARE. 21 | // 22 | 23 | @forward './styles'; 24 | -------------------------------------------------------------------------------- /packages/mdc-linear-progress/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@material/linear-progress", 3 | "description": "The Material Components for the web linear progress indicator component", 4 | "version": "14.0.0", 5 | "license": "MIT", 6 | "main": "dist/mdc.linearProgress.js", 7 | "module": "index.js", 8 | "sideEffects": false, 9 | "keywords": [ 10 | "material components", 11 | "material design", 12 | "linear progress" 13 | ], 14 | "repository": { 15 | "type": "git", 16 | "url": "https://github.com/material-components/material-components-web.git", 17 | "directory": "packages/mdc-linear-progress" 18 | }, 19 | "dependencies": { 20 | "@material/animation": "^14.0.0", 21 | "@material/base": "^14.0.0", 22 | "@material/dom": "^14.0.0", 23 | "@material/feature-targeting": "^14.0.0", 24 | "@material/progress-indicator": "^14.0.0", 25 | "@material/rtl": "^14.0.0", 26 | "@material/theme": "^14.0.0", 27 | "tslib": "^2.1.0" 28 | }, 29 | "publishConfig": { 30 | "access": "public" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /packages/mdc-linear-progress/test/feature-targeting-any.test.scss: -------------------------------------------------------------------------------- 1 | @use '../mixins' as linear-progress; 2 | @use '@material/feature-targeting/feature-targeting'; 3 | 4 | @mixin test($query) { 5 | .test { 6 | @include linear-progress.core-styles($query: $query); 7 | @include linear-progress.bar-color(red, $query: $query); 8 | @include linear-progress.buffer-color(red, $query: $query); 9 | } 10 | } 11 | 12 | // This shouldn't output any CSS. 13 | @include test(feature-targeting.any()); 14 | -------------------------------------------------------------------------------- /packages/mdc-list/.npmignore: -------------------------------------------------------------------------------- 1 | *.ts 2 | !*.d.ts 3 | test/** 4 | -------------------------------------------------------------------------------- /packages/mdc-list/_index.scss: -------------------------------------------------------------------------------- 1 | @forward "./variables"; 2 | @forward "./mixins"; 3 | -------------------------------------------------------------------------------- /packages/mdc-list/images/lists-types.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-web/6ceadb81df508ac08ab007c52c4d3dc1d811cc15/packages/mdc-list/images/lists-types.png -------------------------------------------------------------------------------- /packages/mdc-list/mdc-list.scss: -------------------------------------------------------------------------------- 1 | // Copyright 2016 Google Inc. 2 | // 3 | // Permission is hereby granted, free of charge, to any person obtaining a copy 4 | // of this software and associated documentation files (the "Software"), to deal 5 | // in the Software without restriction, including without limitation the rights 6 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | // copies of the Software, and to permit persons to whom the Software is 8 | // furnished to do so, subject to the following conditions: 9 | // 10 | // The above copyright notice and this permission notice shall be included in 11 | // all copies or substantial portions of the Software. 12 | // 13 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | // THE SOFTWARE. 20 | 21 | @use './mixins'; 22 | @include mixins.deprecated-core-styles; 23 | -------------------------------------------------------------------------------- /packages/mdc-list/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@material/list", 3 | "description": "The Material Components for the web list component", 4 | "version": "14.0.0", 5 | "license": "MIT", 6 | "main": "dist/mdc.list.js", 7 | "module": "index.js", 8 | "sideEffects": false, 9 | "keywords": [ 10 | "material components", 11 | "material design", 12 | "list" 13 | ], 14 | "repository": { 15 | "type": "git", 16 | "url": "https://github.com/material-components/material-components-web.git", 17 | "directory": "packages/mdc-list" 18 | }, 19 | "dependencies": { 20 | "@material/base": "^14.0.0", 21 | "@material/density": "^14.0.0", 22 | "@material/dom": "^14.0.0", 23 | "@material/feature-targeting": "^14.0.0", 24 | "@material/ripple": "^14.0.0", 25 | "@material/rtl": "^14.0.0", 26 | "@material/shape": "^14.0.0", 27 | "@material/theme": "^14.0.0", 28 | "@material/tokens": "^14.0.0", 29 | "@material/typography": "^14.0.0", 30 | "tslib": "^2.1.0" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /packages/mdc-menu-surface/.npmignore: -------------------------------------------------------------------------------- 1 | *.ts 2 | !*.d.ts 3 | test/** 4 | -------------------------------------------------------------------------------- /packages/mdc-menu-surface/_index.scss: -------------------------------------------------------------------------------- 1 | @forward "./variables"; 2 | @forward "./mixins"; 3 | -------------------------------------------------------------------------------- /packages/mdc-menu-surface/_variables.import.scss: -------------------------------------------------------------------------------- 1 | @forward "./index" as mdc-menu-surface-* hide mdc-menu-surface-core-styles, mdc-menu-surface-ink-color, mdc-menu-surface-fill-color, mdc-menu-surface-shape-radius, mdc-menu-surface-base-; 2 | -------------------------------------------------------------------------------- /packages/mdc-menu-surface/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@material/menu-surface", 3 | "version": "14.0.0", 4 | "description": "The Material Components for the web menu surface component", 5 | "license": "MIT", 6 | "keywords": [ 7 | "material components", 8 | "material design", 9 | "menu surface" 10 | ], 11 | "main": "dist/mdc.menuSurface.js", 12 | "module": "index.js", 13 | "sideEffects": false, 14 | "repository": { 15 | "type": "git", 16 | "url": "https://github.com/material-components/material-components-web.git", 17 | "directory": "packages/mdc-menu-surface" 18 | }, 19 | "dependencies": { 20 | "@material/animation": "^14.0.0", 21 | "@material/base": "^14.0.0", 22 | "@material/elevation": "^14.0.0", 23 | "@material/feature-targeting": "^14.0.0", 24 | "@material/rtl": "^14.0.0", 25 | "@material/shape": "^14.0.0", 26 | "@material/theme": "^14.0.0", 27 | "tslib": "^2.1.0" 28 | }, 29 | "publishConfig": { 30 | "access": "public" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /packages/mdc-menu-surface/test/feature-targeting-any.test.scss: -------------------------------------------------------------------------------- 1 | @use '../menusurface'; 2 | @use '../menusurface-theme'; 3 | @use '@material/feature-targeting/feature-targeting'; 4 | 5 | @mixin test($query) { 6 | .test { 7 | @include menusurface.core-styles($query: $query); 8 | @include menusurface-theme.fill-color(surface, $query: $query); 9 | @include menusurface-theme.ink-color(on-surface, $query: $query); 10 | @include menusurface-theme.shape-radius(medium, $query: $query); 11 | } 12 | } 13 | 14 | // This shouldn't output any CSS. 15 | @include test(feature-targeting.any()); 16 | -------------------------------------------------------------------------------- /packages/mdc-menu/.npmignore: -------------------------------------------------------------------------------- 1 | *.ts 2 | !*.d.ts 3 | test/** 4 | -------------------------------------------------------------------------------- /packages/mdc-menu/_index.scss: -------------------------------------------------------------------------------- 1 | @forward "./variables"; 2 | @forward "./mixins"; 3 | -------------------------------------------------------------------------------- /packages/mdc-menu/_menu-custom-properties.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2021 Google Inc. 3 | // 4 | // Permission is hereby granted, free of charge, to any person obtaining a copy 5 | // of this software and associated documentation files (the "Software"), to deal 6 | // in the Software without restriction, including without limitation the rights 7 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | // copies of the Software, and to permit persons to whom the Software is 9 | // furnished to do so, subject to the following conditions: 10 | // 11 | // The above copyright notice and this permission notice shall be included in 12 | // all copies or substantial portions of the Software. 13 | // 14 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 15 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 16 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 17 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 18 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 19 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 20 | // THE SOFTWARE. 21 | // 22 | 23 | $min-width: --mdc-menu-min-width; 24 | -------------------------------------------------------------------------------- /packages/mdc-menu/mdc-menu.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2017 Google Inc. 3 | // 4 | // Permission is hereby granted, free of charge, to any person obtaining a copy 5 | // of this software and associated documentation files (the "Software"), to deal 6 | // in the Software without restriction, including without limitation the rights 7 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | // copies of the Software, and to permit persons to whom the Software is 9 | // furnished to do so, subject to the following conditions: 10 | // 11 | // The above copyright notice and this permission notice shall be included in 12 | // all copies or substantial portions of the Software. 13 | // 14 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 15 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 16 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 17 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 18 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 19 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 20 | // THE SOFTWARE. 21 | // 22 | 23 | @use './menu'; 24 | @include menu.static-styles(); 25 | -------------------------------------------------------------------------------- /packages/mdc-menu/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@material/menu", 3 | "version": "14.0.0", 4 | "description": "The Material Components for the web menu component", 5 | "license": "MIT", 6 | "keywords": [ 7 | "material components", 8 | "material design", 9 | "menu" 10 | ], 11 | "main": "dist/mdc.menu.js", 12 | "module": "index.js", 13 | "sideEffects": false, 14 | "repository": { 15 | "type": "git", 16 | "url": "https://github.com/material-components/material-components-web.git", 17 | "directory": "packages/mdc-menu" 18 | }, 19 | "dependencies": { 20 | "@material/base": "^14.0.0", 21 | "@material/dom": "^14.0.0", 22 | "@material/elevation": "^14.0.0", 23 | "@material/feature-targeting": "^14.0.0", 24 | "@material/list": "^14.0.0", 25 | "@material/menu-surface": "^14.0.0", 26 | "@material/ripple": "^14.0.0", 27 | "@material/rtl": "^14.0.0", 28 | "@material/shape": "^14.0.0", 29 | "@material/theme": "^14.0.0", 30 | "@material/tokens": "^14.0.0", 31 | "tslib": "^2.1.0" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /packages/mdc-menu/test/feature-targeting-any.test.scss: -------------------------------------------------------------------------------- 1 | @use '../menu'; 2 | @use '@material/feature-targeting/feature-targeting'; 3 | 4 | @mixin test($query) { 5 | .test { 6 | @include menu.static-styles($query: $query); 7 | @include menu.width(0, $query: $query); 8 | } 9 | } 10 | 11 | // This shouldn't output any CSS. 12 | @include test(feature-targeting.any()); 13 | -------------------------------------------------------------------------------- /packages/mdc-notched-outline/.npmignore: -------------------------------------------------------------------------------- 1 | *.ts 2 | !*.d.ts 3 | test/** 4 | -------------------------------------------------------------------------------- /packages/mdc-notched-outline/_index.scss: -------------------------------------------------------------------------------- 1 | @forward "./variables"; 2 | @forward "./mixins"; 3 | -------------------------------------------------------------------------------- /packages/mdc-notched-outline/_variables.import.scss: -------------------------------------------------------------------------------- 1 | @forward "./index" as mdc-notched-outline-* hide mdc-notched-outline-core-styles, mdc-notched-outline-color, mdc-notched-outline-stroke-width, mdc-notched-outline-notch-offset, mdc-notched-outline-shape-radius, mdc-notched-outline-floating-label-float-position, mdc-notched-outline-floating-label-float-position-absolute, mdc-notched-outline-base-; 2 | -------------------------------------------------------------------------------- /packages/mdc-notched-outline/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@material/notched-outline", 3 | "description": "The Material Components for the web notched-outline component", 4 | "version": "14.0.0", 5 | "license": "MIT", 6 | "keywords": [ 7 | "material components", 8 | "material design", 9 | "notchedoutline", 10 | "notched outline" 11 | ], 12 | "main": "dist/mdc.notchedOutline.js", 13 | "module": "index.js", 14 | "sideEffects": false, 15 | "repository": { 16 | "type": "git", 17 | "url": "git+https://github.com/material-components/material-components-web.git", 18 | "directory": "packages/mdc-notched-outline" 19 | }, 20 | "publishConfig": { 21 | "access": "public" 22 | }, 23 | "dependencies": { 24 | "@material/base": "^14.0.0", 25 | "@material/feature-targeting": "^14.0.0", 26 | "@material/floating-label": "^14.0.0", 27 | "@material/rtl": "^14.0.0", 28 | "@material/shape": "^14.0.0", 29 | "@material/theme": "^14.0.0", 30 | "tslib": "^2.1.0" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /packages/mdc-notched-outline/test/feature-targeting-any.test.scss: -------------------------------------------------------------------------------- 1 | @use '../mixins' as notched-outline; 2 | @use '@material/feature-targeting/feature-targeting'; 3 | 4 | @mixin test($query) { 5 | .test { 6 | @include notched-outline.core-styles($query: $query); 7 | @include notched-outline.color(red, $query: $query); 8 | @include notched-outline.stroke-width(1337px, $query: $query); 9 | @include notched-outline.notch-offset(1337px, $query: $query); 10 | @include notched-outline.shape-radius(42px, $query: $query); 11 | @include notched-outline.floating-label-float-position( 12 | 100%, 13 | $query: $query 14 | ); 15 | @include notched-outline.floating-label-float-position-absolute( 16 | 100px, 17 | $query: $query 18 | ); 19 | } 20 | } 21 | 22 | // This shouldn't output any CSS. 23 | @include test(feature-targeting.any()); 24 | -------------------------------------------------------------------------------- /packages/mdc-progress-indicator/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@material/progress-indicator", 3 | "description": "The Material Components for the web interface for Progress Indicators", 4 | "version": "14.0.0", 5 | "license": "MIT", 6 | "sideEffects": false, 7 | "repository": { 8 | "type": "git", 9 | "url": "https://github.com/material-components/material-components-web.git", 10 | "directory": "packages/mdc-progress-indicator" 11 | }, 12 | "dependencies": { 13 | "tslib": "^2.1.0" 14 | }, 15 | "publishConfig": { 16 | "access": "public" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /packages/mdc-radio/.npmignore: -------------------------------------------------------------------------------- 1 | *.ts 2 | !*.d.ts 3 | test/** 4 | -------------------------------------------------------------------------------- /packages/mdc-radio/_index.scss: -------------------------------------------------------------------------------- 1 | @forward './radio-theme'; 2 | -------------------------------------------------------------------------------- /packages/mdc-radio/_radio-all-deprecated.scss: -------------------------------------------------------------------------------- 1 | @forward "./variables"; 2 | @forward "./mixins"; 3 | @forward "./functions"; 4 | -------------------------------------------------------------------------------- /packages/mdc-radio/images/radio-button-hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-web/6ceadb81df508ac08ab007c52c4d3dc1d811cc15/packages/mdc-radio/images/radio-button-hero.png -------------------------------------------------------------------------------- /packages/mdc-radio/images/radio-button-states.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-web/6ceadb81df508ac08ab007c52c4d3dc1d811cc15/packages/mdc-radio/images/radio-button-states.png -------------------------------------------------------------------------------- /packages/mdc-radio/mdc-radio.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2016 Google Inc. 3 | // 4 | // Permission is hereby granted, free of charge, to any person obtaining a copy 5 | // of this software and associated documentation files (the "Software"), to deal 6 | // in the Software without restriction, including without limitation the rights 7 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | // copies of the Software, and to permit persons to whom the Software is 9 | // furnished to do so, subject to the following conditions: 10 | // 11 | // The above copyright notice and this permission notice shall be included in 12 | // all copies or substantial portions of the Software. 13 | // 14 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 15 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 16 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 17 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 18 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 19 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 20 | // THE SOFTWARE. 21 | // 22 | 23 | @forward './styles'; 24 | -------------------------------------------------------------------------------- /packages/mdc-radio/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@material/radio", 3 | "description": "The Material Components for the web radio component", 4 | "version": "14.0.0", 5 | "license": "MIT", 6 | "keywords": [ 7 | "material components", 8 | "material design", 9 | "radio" 10 | ], 11 | "main": "dist/mdc.radio.js", 12 | "module": "index.js", 13 | "sideEffects": false, 14 | "repository": { 15 | "type": "git", 16 | "url": "https://github.com/material-components/material-components-web.git", 17 | "directory": "packages/mdc-radio" 18 | }, 19 | "dependencies": { 20 | "@material/animation": "^14.0.0", 21 | "@material/base": "^14.0.0", 22 | "@material/density": "^14.0.0", 23 | "@material/dom": "^14.0.0", 24 | "@material/feature-targeting": "^14.0.0", 25 | "@material/focus-ring": "^14.0.0", 26 | "@material/ripple": "^14.0.0", 27 | "@material/theme": "^14.0.0", 28 | "@material/touch-target": "^14.0.0", 29 | "tslib": "^2.1.0" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /packages/mdc-radio/styles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2016 Google Inc. 3 | // 4 | // Permission is hereby granted, free of charge, to any person obtaining a copy 5 | // of this software and associated documentation files (the "Software"), to deal 6 | // in the Software without restriction, including without limitation the rights 7 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | // copies of the Software, and to permit persons to whom the Software is 9 | // furnished to do so, subject to the following conditions: 10 | // 11 | // The above copyright notice and this permission notice shall be included in 12 | // all copies or substantial portions of the Software. 13 | // 14 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 15 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 16 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 17 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 18 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 19 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 20 | // THE SOFTWARE. 21 | // 22 | 23 | @use './radio'; 24 | @include radio.core-styles; 25 | -------------------------------------------------------------------------------- /packages/mdc-radio/test/feature-targeting-any.test.scss: -------------------------------------------------------------------------------- 1 | @use '../radio'; 2 | @use '../radio-theme'; 3 | @use '@material/feature-targeting/feature-targeting'; 4 | 5 | @mixin test($query) { 6 | .test { 7 | @include radio.core-styles($query: $query); 8 | @include radio-theme.unchecked-stroke-color(red, $query: $query); 9 | @include radio-theme.checked-stroke-color(red, $query: $query); 10 | @include radio-theme.ink-color(red, $query: $query); 11 | @include radio-theme.focus-indicator-color(red, $query: $query); 12 | @include radio.ripple($query: $query); 13 | @include radio.without-ripple($query: $query); 14 | @include radio-theme.touch-target(900px, $query: $query); 15 | @include radio-theme.density(-1, $query: $query); 16 | @include radio-theme.ripple-size(0, $query: $query); 17 | } 18 | } 19 | 20 | // This shouldn't output any CSS. 21 | @include test(feature-targeting.any()); 22 | -------------------------------------------------------------------------------- /packages/mdc-ripple/.npmignore: -------------------------------------------------------------------------------- 1 | *.ts 2 | !*.d.ts 3 | test/** 4 | -------------------------------------------------------------------------------- /packages/mdc-ripple/_index.scss: -------------------------------------------------------------------------------- 1 | @forward "./variables"; 2 | @forward "./mixins"; 3 | @forward "./keyframes"; 4 | @forward "./functions"; 5 | -------------------------------------------------------------------------------- /packages/mdc-ripple/common.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2017 Google Inc. 3 | // 4 | // Permission is hereby granted, free of charge, to any person obtaining a copy 5 | // of this software and associated documentation files (the "Software"), to deal 6 | // in the Software without restriction, including without limitation the rights 7 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | // copies of the Software, and to permit persons to whom the Software is 9 | // furnished to do so, subject to the following conditions: 10 | // 11 | // The above copyright notice and this permission notice shall be included in 12 | // all copies or substantial portions of the Software. 13 | // 14 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 15 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 16 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 17 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 18 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 19 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 20 | // THE SOFTWARE. 21 | // 22 | 23 | @use './mixins'; 24 | @include mixins.common; 25 | -------------------------------------------------------------------------------- /packages/mdc-ripple/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@material/ripple", 3 | "description": "The Material Components for the web Ink Ripple effect for web element interactions", 4 | "version": "14.0.0", 5 | "license": "MIT", 6 | "keywords": [ 7 | "material components", 8 | "material design", 9 | "ripple" 10 | ], 11 | "main": "dist/mdc.ripple.js", 12 | "module": "index.js", 13 | "sideEffects": false, 14 | "repository": { 15 | "type": "git", 16 | "url": "https://github.com/material-components/material-components-web.git", 17 | "directory": "packages/mdc-ripple" 18 | }, 19 | "dependencies": { 20 | "@material/animation": "^14.0.0", 21 | "@material/base": "^14.0.0", 22 | "@material/dom": "^14.0.0", 23 | "@material/feature-targeting": "^14.0.0", 24 | "@material/rtl": "^14.0.0", 25 | "@material/theme": "^14.0.0", 26 | "tslib": "^2.1.0" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /packages/mdc-ripple/test/feature-targeting-any.test.scss: -------------------------------------------------------------------------------- 1 | @use '../ripple'; 2 | @use '../ripple-theme'; 3 | @use '@material/feature-targeting/feature-targeting'; 4 | 5 | @mixin test($query) { 6 | .test { 7 | @include ripple.core-styles($query: $query); 8 | @include ripple.common($query: $query); 9 | @include ripple.surface($query: $query); 10 | @include ripple.target-common($query: $query); 11 | @include ripple-theme.states-base-color(red, $query: $query); 12 | @include ripple-theme.states-hover-opacity(1, $query: $query); 13 | @include ripple-theme.states-focus-opacity(1, $query: $query); 14 | @include ripple-theme.states-press-opacity(1, $query: $query); 15 | @include ripple-theme.states($query: $query); 16 | @include ripple-theme.states-activated(red, $query: $query); 17 | @include ripple-theme.states-selected(red, $query: $query); 18 | @include ripple.radius-bounded($query: $query); 19 | @include ripple.radius-unbounded($query: $query); 20 | } 21 | } 22 | 23 | // This shouldn't output any CSS. 24 | @include test(feature-targeting.any()); 25 | -------------------------------------------------------------------------------- /packages/mdc-rtl/_index.scss: -------------------------------------------------------------------------------- 1 | @forward './rtl'; 2 | -------------------------------------------------------------------------------- /packages/mdc-rtl/_mixins.import.scss: -------------------------------------------------------------------------------- 1 | @forward "./index" as mdc-rtl-* hide mdc-rtl-rtl; 2 | @forward "./index" as mdc-* show mdc-rtl; 3 | -------------------------------------------------------------------------------- /packages/mdc-rtl/_variables.import.scss: -------------------------------------------------------------------------------- 1 | @forward "./index" as mdc-rtl-* hide mdc-rtl-rtl, mdc-rtl-reflexive-box, mdc-rtl-reflexive-property, mdc-rtl-reflexive-position, mdc-rtl-reflexive, mdc-rtl-property-; 2 | -------------------------------------------------------------------------------- /packages/mdc-rtl/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@material/rtl", 3 | "description": "Material Components for the web RTL Scss helpers", 4 | "version": "14.0.0", 5 | "license": "MIT", 6 | "keywords": [ 7 | "material components", 8 | "material design", 9 | "rtl", 10 | "right to left" 11 | ], 12 | "sideEffects": false, 13 | "repository": { 14 | "type": "git", 15 | "url": "https://github.com/material-components/material-components-web.git", 16 | "directory": "packages/mdc-rtl" 17 | }, 18 | "dependencies": { 19 | "@material/theme": "^14.0.0", 20 | "tslib": "^2.1.0" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /packages/mdc-rtl/test/disable-include-rtl.test.scss: -------------------------------------------------------------------------------- 1 | @use '../index' with ( 2 | $include: false, 3 | ); 4 | @use '@material/button/mdc-button'; 5 | @use '@material/textfield/mdc-text-field'; 6 | @use '@material/typography/mdc-typography'; 7 | -------------------------------------------------------------------------------- /packages/mdc-rtl/test/rtl.test.scss: -------------------------------------------------------------------------------- 1 | @use '../rtl'; 2 | 3 | .test-pseudo-element { 4 | &::before { 5 | @include rtl.rtl { 6 | margin-right: 0; 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /packages/mdc-rtl/test/theme.test.scss: -------------------------------------------------------------------------------- 1 | @use '@material/theme/custom-properties'; 2 | @use '../mixins' as rtl; 3 | 4 | .test { 5 | @include rtl.reflexive-box( 6 | margin, 7 | right, 8 | custom-properties.create(--margin-prop, 8px) 9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /packages/mdc-segmented-button/.npmignore: -------------------------------------------------------------------------------- 1 | *.ts 2 | !*.d.ts 3 | test/** 4 | -------------------------------------------------------------------------------- /packages/mdc-segmented-button/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@material/segmented-button", 3 | "version": "14.0.0", 4 | "description": "The Material Components for the web segmented button component", 5 | "license": "MIT", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/material-components/material-components-web.git", 9 | "directory": "packages/mdc-segmented-button" 10 | }, 11 | "keywords": [ 12 | "material components", 13 | "material design", 14 | "segmented button" 15 | ], 16 | "publishConfig": { 17 | "access": "public" 18 | }, 19 | "dependencies": { 20 | "@material/base": "^14.0.0", 21 | "@material/elevation": "^14.0.0", 22 | "@material/feature-targeting": "^14.0.0", 23 | "@material/ripple": "^14.0.0", 24 | "@material/theme": "^14.0.0", 25 | "@material/touch-target": "^14.0.0", 26 | "@material/typography": "^14.0.0", 27 | "tslib": "^2.1.0" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /packages/mdc-select/.npmignore: -------------------------------------------------------------------------------- 1 | *.ts 2 | !*.d.ts 3 | test/** 4 | -------------------------------------------------------------------------------- /packages/mdc-select/helper-text/_index.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2020 Google Inc. 3 | // 4 | // Permission is hereby granted, free of charge, to any person obtaining a copy 5 | // of this software and associated documentation files (the "Software"), to deal 6 | // in the Software without restriction, including without limitation the rights 7 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | // copies of the Software, and to permit persons to whom the Software is 9 | // furnished to do so, subject to the following conditions: 10 | // 11 | // The above copyright notice and this permission notice shall be included in 12 | // all copies or substantial portions of the Software. 13 | // 14 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 15 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 16 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 17 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 18 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 19 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 20 | // THE SOFTWARE. 21 | // 22 | 23 | @forward '../select-helper-text-theme'; 24 | -------------------------------------------------------------------------------- /packages/mdc-select/helper-text/mdc-select-helper-text.scss: -------------------------------------------------------------------------------- 1 | // Copyright 2018 Google Inc. 2 | // 3 | // Permission is hereby granted, free of charge, to any person obtaining a copy 4 | // of this software and associated documentation files (the "Software"), to deal 5 | // in the Software without restriction, including without limitation the rights 6 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | // copies of the Software, and to permit persons to whom the Software is 8 | // furnished to do so, subject to the following conditions:/ 9 | // 10 | // The above copyright notice and this permission notice shall be included in 11 | // all copies or substantial portions of the Software./ 12 | // 13 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | // THE SOFTWARE. 20 | // 21 | 22 | @forward '../styles'; 23 | -------------------------------------------------------------------------------- /packages/mdc-select/icon/_index.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2020 Google Inc. 3 | // 4 | // Permission is hereby granted, free of charge, to any person obtaining a copy 5 | // of this software and associated documentation files (the "Software"), to deal 6 | // in the Software without restriction, including without limitation the rights 7 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | // copies of the Software, and to permit persons to whom the Software is 9 | // furnished to do so, subject to the following conditions: 10 | // 11 | // The above copyright notice and this permission notice shall be included in 12 | // all copies or substantial portions of the Software. 13 | // 14 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 15 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 16 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 17 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 18 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 19 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 20 | // THE SOFTWARE. 21 | // 22 | 23 | @forward "../select-icon-theme"; 24 | -------------------------------------------------------------------------------- /packages/mdc-select/icon/_variables.import.scss: -------------------------------------------------------------------------------- 1 | @forward "./index" as mdc-select-* hide mdc-select-icon-color, mdc-select-icon-, mdc-select-icon-color-, mdc-select-icon-horizontal-position-; 2 | -------------------------------------------------------------------------------- /packages/mdc-select/icon/mdc-select-icon.scss: -------------------------------------------------------------------------------- 1 | // Copyright 2018 Google Inc. 2 | // 3 | // Permission is hereby granted, free of charge, to any person obtaining a copy 4 | // of this software and associated documentation files (the "Software"), to deal 5 | // in the Software without restriction, including without limitation the rights 6 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | // copies of the Software, and to permit persons to whom the Software is 8 | // furnished to do so, subject to the following conditions:/ 9 | // 10 | // The above copyright notice and this permission notice shall be included in 11 | // all copies or substantial portions of the Software./ 12 | // 13 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | // THE SOFTWARE. 20 | // 21 | 22 | @forward "../styles"; 23 | -------------------------------------------------------------------------------- /packages/mdc-select/mdc-select.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2017 Google Inc. 3 | // 4 | // Permission is hereby granted, free of charge, to any person obtaining a copy 5 | // of this software and associated documentation files (the "Software"), to deal 6 | // in the Software without restriction, including without limitation the rights 7 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | // copies of the Software, and to permit persons to whom the Software is 9 | // furnished to do so, subject to the following conditions: 10 | // 11 | // The above copyright notice and this permission notice shall be included in 12 | // all copies or substantial portions of the Software. 13 | // 14 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 15 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 16 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 17 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 18 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 19 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 20 | // THE SOFTWARE. 21 | // 22 | 23 | @forward './styles'; 24 | -------------------------------------------------------------------------------- /packages/mdc-select/test/feature-targeting-any.test.scss: -------------------------------------------------------------------------------- 1 | @use '../mixins' as select; 2 | @use '../helper-text/mixins' as helper-text; 3 | @use '../icon/mixins' as icon; 4 | @use '@material/feature-targeting/functions' as feature; 5 | 6 | @mixin test($query) { 7 | .test { 8 | @include select.core-styles($query: $query); 9 | @include select.ink-color(red, $query: $query); 10 | @include select.container-fill-color(red, $query: $query); 11 | @include select.bottom-line-color(red, $query: $query); 12 | @include select.label-color(red, $query: $query); 13 | @include select.outline-color(red, $query: $query); 14 | @include select.filled-shape-radius(42px, $query: $query); 15 | @include select.outline-shape-radius(42px, $query: $query); 16 | 17 | @include helper-text.helper-text-core-styles($query: $query); 18 | @include helper-text.helper-text-color(red, $query: $query); 19 | @include helper-text.helper-text-validation-color(red, $query: $query); 20 | 21 | @include icon.icon-core-styles($query: $query); 22 | @include icon.icon-color(red, $query: $query); 23 | } 24 | } 25 | 26 | // This shouldn't output any CSS. 27 | @include test(feature.any()); 28 | -------------------------------------------------------------------------------- /packages/mdc-shape/_functions.import.scss: -------------------------------------------------------------------------------- 1 | @forward "./index" as mdc-shape-* hide mdc-shape-radius; 2 | -------------------------------------------------------------------------------- /packages/mdc-shape/_index.scss: -------------------------------------------------------------------------------- 1 | @forward "./variables"; 2 | @forward "./mixins"; 3 | @forward "./functions"; 4 | -------------------------------------------------------------------------------- /packages/mdc-shape/_mixins.import.scss: -------------------------------------------------------------------------------- 1 | @forward "@material/feature-targeting" as mdc-feature-*; 2 | @forward "@material/rtl" as mdc-rtl-* hide mdc-rtl-rtl; 3 | @forward "@material/rtl" as mdc-* hide mdc-property-, mdc-reflexive, mdc-reflexive-box, mdc-reflexive-position, mdc-reflexive-property; 4 | @forward "./index" as mdc-shape-*; 5 | -------------------------------------------------------------------------------- /packages/mdc-shape/_variables.import.scss: -------------------------------------------------------------------------------- 1 | @forward "./index" as mdc-shape-* hide mdc-shape-radius, mdc-shape-flip-radius, mdc-shape-resolve-percentage-radius, mdc-shape-prop-value, mdc-shape-mask-radius, mdc-shape-unpack-radius-, mdc-shape-resolve-percentage-for-corner-, mdc-shape-validate-radius-value-; 2 | -------------------------------------------------------------------------------- /packages/mdc-shape/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@material/shape", 3 | "description": "Shape utilities for Material Components for the web", 4 | "version": "14.0.0", 5 | "license": "MIT", 6 | "keywords": [ 7 | "material components", 8 | "material design", 9 | "shape" 10 | ], 11 | "repository": { 12 | "type": "git", 13 | "url": "https://github.com/material-components/material-components-web.git", 14 | "directory": "packages/mdc-shape" 15 | }, 16 | "publishConfig": { 17 | "access": "public" 18 | }, 19 | "sideEffects": false, 20 | "dependencies": { 21 | "@material/feature-targeting": "^14.0.0", 22 | "@material/rtl": "^14.0.0", 23 | "@material/theme": "^14.0.0", 24 | "tslib": "^2.1.0" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /packages/mdc-shape/test/feature-targeting-any.test.scss: -------------------------------------------------------------------------------- 1 | @use '../mixins' as shape; 2 | @use '@material/feature-targeting/feature-targeting'; 3 | 4 | @mixin test($query) { 5 | .test { 6 | @include shape.radius(1px 2px, true, $query: $query); 7 | } 8 | } 9 | 10 | // This shouldn't output any CSS. 11 | @include test(feature-targeting.any()); 12 | -------------------------------------------------------------------------------- /packages/mdc-slider/.npmignore: -------------------------------------------------------------------------------- 1 | *.ts 2 | !*.d.ts 3 | test/** 4 | -------------------------------------------------------------------------------- /packages/mdc-slider/_index.scss: -------------------------------------------------------------------------------- 1 | @forward './slider-theme'; 2 | -------------------------------------------------------------------------------- /packages/mdc-slider/images/continuous-range-slider.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-web/6ceadb81df508ac08ab007c52c4d3dc1d811cc15/packages/mdc-slider/images/continuous-range-slider.png -------------------------------------------------------------------------------- /packages/mdc-slider/images/continuous-slider.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-web/6ceadb81df508ac08ab007c52c4d3dc1d811cc15/packages/mdc-slider/images/continuous-slider.png -------------------------------------------------------------------------------- /packages/mdc-slider/images/discrete-slider-tick-marks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-web/6ceadb81df508ac08ab007c52c4d3dc1d811cc15/packages/mdc-slider/images/discrete-slider-tick-marks.png -------------------------------------------------------------------------------- /packages/mdc-slider/images/discrete-slider.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-web/6ceadb81df508ac08ab007c52c4d3dc1d811cc15/packages/mdc-slider/images/discrete-slider.png -------------------------------------------------------------------------------- /packages/mdc-slider/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@material/slider", 3 | "version": "14.0.0", 4 | "description": "The Material Components for the web slider component", 5 | "main": "dist/mdc.slider.js", 6 | "module": "index.js", 7 | "sideEffects": false, 8 | "license": "MIT", 9 | "repository": { 10 | "type": "git", 11 | "url": "https://github.com/material-components/material-components-web.git", 12 | "directory": "packages/mdc-slider" 13 | }, 14 | "keywords": [ 15 | "material components", 16 | "material design", 17 | "slider" 18 | ], 19 | "publishConfig": { 20 | "access": "public" 21 | }, 22 | "dependencies": { 23 | "@material/animation": "^14.0.0", 24 | "@material/base": "^14.0.0", 25 | "@material/dom": "^14.0.0", 26 | "@material/elevation": "^14.0.0", 27 | "@material/feature-targeting": "^14.0.0", 28 | "@material/ripple": "^14.0.0", 29 | "@material/rtl": "^14.0.0", 30 | "@material/theme": "^14.0.0", 31 | "@material/tokens": "^14.0.0", 32 | "@material/typography": "^14.0.0", 33 | "tslib": "^2.1.0" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /packages/mdc-slider/styles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2020 Google Inc. 3 | // 4 | // Permission is hereby granted, free of charge, to any person obtaining a copy 5 | // of this software and associated documentation files (the "Software"), to deal 6 | // in the Software without restriction, including without limitation the rights 7 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | // copies of the Software, and to permit persons to whom the Software is 9 | // furnished to do so, subject to the following conditions: 10 | // 11 | // The above copyright notice and this permission notice shall be included in 12 | // all copies or substantial portions of the Software. 13 | // 14 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 15 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 16 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 17 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 18 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 19 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 20 | // THE SOFTWARE. 21 | // 22 | 23 | @use './slider'; 24 | 25 | @include slider.core-styles; 26 | -------------------------------------------------------------------------------- /packages/mdc-slider/test/feature-targeting-any.test.scss: -------------------------------------------------------------------------------- 1 | @use '@material/feature-targeting/feature-targeting'; 2 | @use '../slider'; 3 | 4 | @mixin test($query) { 5 | .test { 6 | @include slider.core-styles($query: $query); 7 | } 8 | } 9 | 10 | // This shouldn't output any CSS. 11 | @include test(feature-targeting.any()); 12 | -------------------------------------------------------------------------------- /packages/mdc-snackbar/.npmignore: -------------------------------------------------------------------------------- 1 | *.ts 2 | !*.d.ts 3 | test/** 4 | -------------------------------------------------------------------------------- /packages/mdc-snackbar/_index.scss: -------------------------------------------------------------------------------- 1 | @forward "./variables"; 2 | @forward "./mixins"; 3 | -------------------------------------------------------------------------------- /packages/mdc-snackbar/mdc-snackbar.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2022 Google Inc. 3 | // 4 | // Permission is hereby granted, free of charge, to any person obtaining a copy 5 | // of this software and associated documentation files (the "Software"), to deal 6 | // in the Software without restriction, including without limitation the rights 7 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | // copies of the Software, and to permit persons to whom the Software is 9 | // furnished to do so, subject to the following conditions: 10 | // 11 | // The above copyright notice and this permission notice shall be included in 12 | // all copies or substantial portions of the Software. 13 | // 14 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 15 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 16 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 17 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 18 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 19 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 20 | // THE SOFTWARE. 21 | // 22 | 23 | @forward './styles'; 24 | -------------------------------------------------------------------------------- /packages/mdc-snackbar/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@material/snackbar", 3 | "description": "The Material Components for the web snackbar component", 4 | "version": "14.0.0", 5 | "license": "MIT", 6 | "keywords": [ 7 | "material components", 8 | "material design", 9 | "snackbar" 10 | ], 11 | "main": "dist/mdc.snackbar.js", 12 | "module": "index.js", 13 | "sideEffects": false, 14 | "repository": { 15 | "type": "git", 16 | "url": "https://github.com/material-components/material-components-web.git", 17 | "directory": "packages/mdc-snackbar" 18 | }, 19 | "dependencies": { 20 | "@material/animation": "^14.0.0", 21 | "@material/base": "^14.0.0", 22 | "@material/button": "^14.0.0", 23 | "@material/dom": "^14.0.0", 24 | "@material/elevation": "^14.0.0", 25 | "@material/feature-targeting": "^14.0.0", 26 | "@material/icon-button": "^14.0.0", 27 | "@material/ripple": "^14.0.0", 28 | "@material/rtl": "^14.0.0", 29 | "@material/shape": "^14.0.0", 30 | "@material/theme": "^14.0.0", 31 | "@material/tokens": "^14.0.0", 32 | "@material/typography": "^14.0.0", 33 | "tslib": "^2.1.0" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /packages/mdc-snackbar/styles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2022 Google Inc. 3 | // 4 | // Permission is hereby granted, free of charge, to any person obtaining a copy 5 | // of this software and associated documentation files (the "Software"), to deal 6 | // in the Software without restriction, including without limitation the rights 7 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | // copies of the Software, and to permit persons to whom the Software is 9 | // furnished to do so, subject to the following conditions: 10 | // 11 | // The above copyright notice and this permission notice shall be included in 12 | // all copies or substantial portions of the Software. 13 | // 14 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 15 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 16 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 17 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 18 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 19 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 20 | // THE SOFTWARE. 21 | // 22 | 23 | @use './snackbar'; 24 | @include snackbar.core-styles; 25 | -------------------------------------------------------------------------------- /packages/mdc-snackbar/test/feature-targeting-any.test.scss: -------------------------------------------------------------------------------- 1 | @use '../mixins' as snackbar; 2 | @use '@material/feature-targeting/feature-targeting'; 3 | 4 | @mixin test($query) { 5 | .test { 6 | @include snackbar.core-styles($query: $query); 7 | @include snackbar.fill-color(red, $query: $query); 8 | @include snackbar.label-ink-color(red, $query: $query); 9 | @include snackbar.shape-radius(1337, $query: $query); 10 | @include snackbar.min-width(1337, $query: $query); 11 | @include snackbar.max-width(1337, $query: $query); 12 | @include snackbar.elevation(13, $query: $query); 13 | @include snackbar.viewport-margin(1337, $query: $query); 14 | @include snackbar.z-index(1337, $query: $query); 15 | @include snackbar.position-leading($query: $query); 16 | @include snackbar.layout-stacked($query: $query); 17 | } 18 | } 19 | 20 | // This shouldn't output any CSS. 21 | @include test(feature-targeting.any()); 22 | -------------------------------------------------------------------------------- /packages/mdc-switch/.npmignore: -------------------------------------------------------------------------------- 1 | *.ts 2 | !*.d.ts 3 | test/** 4 | -------------------------------------------------------------------------------- /packages/mdc-switch/deprecated/_index.scss: -------------------------------------------------------------------------------- 1 | @forward "./variables"; 2 | @forward "./mixins"; 3 | @forward "./functions"; 4 | -------------------------------------------------------------------------------- /packages/mdc-switch/deprecated/test/feature-targeting-any.test.scss: -------------------------------------------------------------------------------- 1 | @use '../mixins' as switch; 2 | @use '@material/feature-targeting/feature-targeting'; 3 | 4 | @mixin test($query) { 5 | .test { 6 | @include switch.core-styles($query: $query); 7 | @include switch.density(-1, $query: $query); 8 | @include switch.toggled-on-color(on-surface, $query: $query); 9 | @include switch.toggled-off-color(on-surface, $query: $query); 10 | @include switch.toggled-on-ripple-color(on-surface, $query: $query); 11 | @include switch.toggled-off-ripple-color(on-surface, $query: $query); 12 | @include switch.toggled-on-track-color(on-surface, $query: $query); 13 | @include switch.toggled-on-thumb-color(on-surface, $query: $query); 14 | @include switch.toggled-off-track-color(on-surface, $query: $query); 15 | @include switch.toggled-off-thumb-color(on-surface, $query: $query); 16 | @include switch.ripple($query: $query); 17 | @include switch.ripple-size(0, $query: $query); 18 | @include switch.without-ripple($query: $query); 19 | } 20 | } 21 | 22 | // This shouldn't output any CSS. 23 | @include test(feature-targeting.any()); 24 | -------------------------------------------------------------------------------- /packages/mdc-switch/images/switch-hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-web/6ceadb81df508ac08ab007c52c4d3dc1d811cc15/packages/mdc-switch/images/switch-hero.png -------------------------------------------------------------------------------- /packages/mdc-switch/images/switch-states.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-web/6ceadb81df508ac08ab007c52c4d3dc1d811cc15/packages/mdc-switch/images/switch-states.png -------------------------------------------------------------------------------- /packages/mdc-switch/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@material/switch", 3 | "description": "The Material Components for the web switch component", 4 | "version": "14.0.0", 5 | "license": "MIT", 6 | "keywords": [ 7 | "material components", 8 | "material design", 9 | "switch" 10 | ], 11 | "main": "dist/mdc.switch.js", 12 | "module": "index.js", 13 | "sideEffects": false, 14 | "repository": { 15 | "type": "git", 16 | "url": "https://github.com/material-components/material-components-web.git", 17 | "directory": "packages/mdc-switch" 18 | }, 19 | "dependencies": { 20 | "@material/animation": "^14.0.0", 21 | "@material/base": "^14.0.0", 22 | "@material/density": "^14.0.0", 23 | "@material/dom": "^14.0.0", 24 | "@material/elevation": "^14.0.0", 25 | "@material/feature-targeting": "^14.0.0", 26 | "@material/focus-ring": "^14.0.0", 27 | "@material/ripple": "^14.0.0", 28 | "@material/rtl": "^14.0.0", 29 | "@material/shape": "^14.0.0", 30 | "@material/theme": "^14.0.0", 31 | "@material/tokens": "^14.0.0", 32 | "safevalues": "^1.0.1", 33 | "tslib": "^2.1.0" 34 | }, 35 | "publishConfig": { 36 | "access": "public" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /packages/mdc-tab-bar/.npmignore: -------------------------------------------------------------------------------- 1 | *.ts 2 | !*.d.ts 3 | test/** 4 | -------------------------------------------------------------------------------- /packages/mdc-tab-bar/_index.scss: -------------------------------------------------------------------------------- 1 | @forward "./variables"; 2 | @forward "./mixins"; 3 | -------------------------------------------------------------------------------- /packages/mdc-tab-bar/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@material/tab-bar", 3 | "description": "The Material Components for the web tab bar component", 4 | "version": "14.0.0", 5 | "license": "MIT", 6 | "keywords": [ 7 | "material components", 8 | "material design", 9 | "tab", 10 | "bar" 11 | ], 12 | "main": "dist/mdc.tabBar.js", 13 | "module": "index.js", 14 | "sideEffects": false, 15 | "repository": { 16 | "type": "git", 17 | "url": "https://github.com/material-components/material-components-web.git", 18 | "directory": "packages/mdc-tab-bar" 19 | }, 20 | "dependencies": { 21 | "@material/animation": "^14.0.0", 22 | "@material/base": "^14.0.0", 23 | "@material/density": "^14.0.0", 24 | "@material/elevation": "^14.0.0", 25 | "@material/feature-targeting": "^14.0.0", 26 | "@material/tab": "^14.0.0", 27 | "@material/tab-indicator": "^14.0.0", 28 | "@material/tab-scroller": "^14.0.0", 29 | "@material/theme": "^14.0.0", 30 | "@material/tokens": "^14.0.0", 31 | "@material/typography": "^14.0.0", 32 | "tslib": "^2.1.0" 33 | }, 34 | "publishConfig": { 35 | "access": "public" 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /packages/mdc-tab-bar/test/feature-targeting-any.test.scss: -------------------------------------------------------------------------------- 1 | @use '../mixins' as tab-bar; 2 | @use '@material/feature-targeting/feature-targeting'; 3 | 4 | @mixin test($query) { 5 | .test { 6 | @include tab-bar.core-styles($query: $query); 7 | @include tab-bar.density(0, $query: $query); 8 | @include tab-bar.stacked-density(0, $query: $query); 9 | @include tab-bar.tab-scroller-transition(0, $query: $query); 10 | } 11 | } 12 | 13 | // This shouldn't output any CSS. 14 | @include test(feature-targeting.any()); 15 | -------------------------------------------------------------------------------- /packages/mdc-tab-indicator/.npmignore: -------------------------------------------------------------------------------- 1 | *.ts 2 | !*.d.ts 3 | test/** 4 | -------------------------------------------------------------------------------- /packages/mdc-tab-indicator/_index.scss: -------------------------------------------------------------------------------- 1 | @forward "./mixins"; 2 | -------------------------------------------------------------------------------- /packages/mdc-tab-indicator/mdc-tab-indicator.import.scss: -------------------------------------------------------------------------------- 1 | @forward "@material/animation/variables" as mdc-animation-*; 2 | @forward "@material/theme/variables" as mdc-theme-*; 3 | @forward "@material/theme/mixins" as mdc-theme-*; 4 | @forward "mixins" as mdc-tab-indicator-*; 5 | @forward "@material/feature-targeting/functions" as mdc-feature-*; 6 | @forward "@material/theme/functions" as mdc-theme-*; 7 | @forward "mdc-tab-indicator"; 8 | -------------------------------------------------------------------------------- /packages/mdc-tab-indicator/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@material/tab-indicator", 3 | "description": "The Material Components for the web tab indicator component", 4 | "version": "14.0.0", 5 | "license": "MIT", 6 | "keywords": [ 7 | "material components", 8 | "material design", 9 | "tab", 10 | "indicator" 11 | ], 12 | "main": "dist/mdc.tabIndicator.js", 13 | "module": "index.js", 14 | "sideEffects": false, 15 | "repository": { 16 | "type": "git", 17 | "url": "https://github.com/material-components/material-components-web.git", 18 | "directory": "packages/mdc-tab-indicator" 19 | }, 20 | "dependencies": { 21 | "@material/animation": "^14.0.0", 22 | "@material/base": "^14.0.0", 23 | "@material/feature-targeting": "^14.0.0", 24 | "@material/theme": "^14.0.0", 25 | "tslib": "^2.1.0" 26 | }, 27 | "publishConfig": { 28 | "access": "public" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /packages/mdc-tab-indicator/test/feature-targeting-any.test.scss: -------------------------------------------------------------------------------- 1 | @use '../mixins' as tab-indicator; 2 | @use '@material/feature-targeting/feature-targeting'; 3 | 4 | @mixin test($query) { 5 | .test { 6 | @include tab-indicator.core-styles($query: $query); 7 | } 8 | } 9 | 10 | // This shouldn't output any CSS. 11 | @include test(feature-targeting.any()); 12 | -------------------------------------------------------------------------------- /packages/mdc-tab-scroller/.npmignore: -------------------------------------------------------------------------------- 1 | *.ts 2 | !*.d.ts 3 | test/** 4 | -------------------------------------------------------------------------------- /packages/mdc-tab-scroller/_index.scss: -------------------------------------------------------------------------------- 1 | @forward "./variables"; 2 | @forward "./mixins"; 3 | -------------------------------------------------------------------------------- /packages/mdc-tab-scroller/_variables.import.scss: -------------------------------------------------------------------------------- 1 | @forward "./index" as mdc-tab-scroller-* hide mdc-tab-scroller-transition, mdc-tab-scroller-core-styles, mdc-tab-scroller-scroll-content-; 2 | -------------------------------------------------------------------------------- /packages/mdc-tab-scroller/_variables.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2019 Google Inc. 3 | // 4 | // Permission is hereby granted, free of charge, to any person obtaining a copy 5 | // of this software and associated documentation files (the "Software"), to deal 6 | // in the Software without restriction, including without limitation the rights 7 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | // copies of the Software, and to permit persons to whom the Software is 9 | // furnished to do so, subject to the following conditions: 10 | // 11 | // The above copyright notice and this permission notice shall be included in 12 | // all copies or substantial portions of the Software. 13 | // 14 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 15 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 16 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 17 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 18 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 19 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 20 | // THE SOFTWARE. 21 | // 22 | 23 | $transition-duration: 250ms !default; 24 | -------------------------------------------------------------------------------- /packages/mdc-tab-scroller/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@material/tab-scroller", 3 | "description": "The Material Components for the web tab scroller component", 4 | "version": "14.0.0", 5 | "license": "MIT", 6 | "keywords": [ 7 | "material components", 8 | "material design", 9 | "tab", 10 | "scroller" 11 | ], 12 | "main": "dist/mdc.tabScroller.js", 13 | "module": "index.js", 14 | "sideEffects": false, 15 | "repository": { 16 | "type": "git", 17 | "url": "https://github.com/material-components/material-components-web.git", 18 | "directory": "packages/mdc-tab-scroller" 19 | }, 20 | "dependencies": { 21 | "@material/animation": "^14.0.0", 22 | "@material/base": "^14.0.0", 23 | "@material/dom": "^14.0.0", 24 | "@material/feature-targeting": "^14.0.0", 25 | "@material/tab": "^14.0.0", 26 | "tslib": "^2.1.0" 27 | }, 28 | "publishConfig": { 29 | "access": "public" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /packages/mdc-tab-scroller/test/feature-targeting-any.test.scss: -------------------------------------------------------------------------------- 1 | @use '../mixins' as tab-scroller; 2 | @use '@material/feature-targeting/feature-targeting'; 3 | 4 | @mixin test($query) { 5 | .test { 6 | @include tab-scroller.core-styles($query: $query); 7 | } 8 | } 9 | 10 | // This shouldn't output any CSS. 11 | @include test(feature-targeting.any()); 12 | -------------------------------------------------------------------------------- /packages/mdc-tab/.npmignore: -------------------------------------------------------------------------------- 1 | *.ts 2 | !*.d.ts 3 | test/** 4 | -------------------------------------------------------------------------------- /packages/mdc-tab/_index.scss: -------------------------------------------------------------------------------- 1 | @forward "./variables"; 2 | @forward "./mixins"; 3 | -------------------------------------------------------------------------------- /packages/mdc-tab/mdc-tab.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2018 Google Inc. 3 | // 4 | // Permission is hereby granted, free of charge, to any person obtaining a copy 5 | // of this software and associated documentation files (the "Software"), to deal 6 | // in the Software without restriction, including without limitation the rights 7 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | // copies of the Software, and to permit persons to whom the Software is 9 | // furnished to do so, subject to the following conditions: 10 | // 11 | // The above copyright notice and this permission notice shall be included in 12 | // all copies or substantial portions of the Software. 13 | // 14 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 15 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 16 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 17 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 18 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 19 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 20 | // THE SOFTWARE. 21 | // 22 | 23 | @use './mixins'; 24 | @include mixins.core-styles; 25 | -------------------------------------------------------------------------------- /packages/mdc-tab/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@material/tab", 3 | "description": "The Material Components for the web tab component", 4 | "version": "14.0.0", 5 | "license": "MIT", 6 | "keywords": [ 7 | "material components", 8 | "material design", 9 | "tab" 10 | ], 11 | "repository": { 12 | "type": "git", 13 | "url": "https://github.com/material-components/material-components-web.git", 14 | "directory": "packages/mdc-tab" 15 | }, 16 | "main": "dist/mdc.tab.js", 17 | "module": "index.js", 18 | "sideEffects": false, 19 | "dependencies": { 20 | "@material/base": "^14.0.0", 21 | "@material/elevation": "^14.0.0", 22 | "@material/feature-targeting": "^14.0.0", 23 | "@material/focus-ring": "^14.0.0", 24 | "@material/ripple": "^14.0.0", 25 | "@material/rtl": "^14.0.0", 26 | "@material/tab-indicator": "^14.0.0", 27 | "@material/theme": "^14.0.0", 28 | "@material/tokens": "^14.0.0", 29 | "@material/typography": "^14.0.0", 30 | "tslib": "^2.1.0" 31 | }, 32 | "publishConfig": { 33 | "access": "public" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /packages/mdc-tab/test/feature-targeting-any.test.scss: -------------------------------------------------------------------------------- 1 | @use '../mixins' as tab; 2 | @use '@material/feature-targeting/feature-targeting'; 3 | 4 | @mixin test($query) { 5 | .test { 6 | @include tab.core-styles($query: $query); 7 | @include tab.without-ripple($query: $query); 8 | @include tab.ripple($query: $query); 9 | @include tab.height(0, $query: $query); 10 | @include tab.text-transform(uppercase, $query: $query); 11 | } 12 | } 13 | 14 | // This shouldn't output any CSS. 15 | @include test(feature-targeting.any()); 16 | -------------------------------------------------------------------------------- /packages/mdc-textfield/.npmignore: -------------------------------------------------------------------------------- 1 | *.ts 2 | !*.d.ts 3 | test/** 4 | -------------------------------------------------------------------------------- /packages/mdc-textfield/_index.scss: -------------------------------------------------------------------------------- 1 | @forward "./variables"; 2 | @forward "./mixins"; 3 | -------------------------------------------------------------------------------- /packages/mdc-textfield/character-counter/_index.scss: -------------------------------------------------------------------------------- 1 | @forward "./mixins"; 2 | -------------------------------------------------------------------------------- /packages/mdc-textfield/helper-text/_index.scss: -------------------------------------------------------------------------------- 1 | @forward "./mixins"; 2 | -------------------------------------------------------------------------------- /packages/mdc-textfield/icon/_index.scss: -------------------------------------------------------------------------------- 1 | @forward "./variables"; 2 | @forward "./mixins"; 3 | -------------------------------------------------------------------------------- /packages/mdc-textfield/icon/_variables.import.scss: -------------------------------------------------------------------------------- 1 | @forward "./index" as mdc-text-field-* hide mdc-text-field-icon-core-styles, mdc-text-field-leading-icon-color, mdc-text-field-trailing-icon-color, mdc-text-field-disabled-icon-color, mdc-text-field-leading-icon-horizontal-position-, mdc-text-field-trailing-icon-horizontal-position-, mdc-text-field-icon-horizontal-position-two-icons-, mdc-text-field-icon-, mdc-text-field-leading-icon-color-, mdc-text-field-trailing-icon-color-; 2 | -------------------------------------------------------------------------------- /packages/mdc-textfield/images/text-field-generic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-web/6ceadb81df508ac08ab007c52c4d3dc1d811cc15/packages/mdc-textfield/images/text-field-generic.png -------------------------------------------------------------------------------- /packages/mdc-textfield/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@material/textfield", 3 | "description": "The Material Components for the web text field component", 4 | "version": "14.0.0", 5 | "license": "MIT", 6 | "keywords": [ 7 | "material components", 8 | "material design", 9 | "textfield", 10 | "text field" 11 | ], 12 | "main": "dist/mdc.textfield.js", 13 | "module": "index.js", 14 | "sideEffects": false, 15 | "repository": { 16 | "type": "git", 17 | "url": "https://github.com/material-components/material-components-web.git", 18 | "directory": "packages/mdc-textfield" 19 | }, 20 | "dependencies": { 21 | "@material/animation": "^14.0.0", 22 | "@material/base": "^14.0.0", 23 | "@material/density": "^14.0.0", 24 | "@material/dom": "^14.0.0", 25 | "@material/feature-targeting": "^14.0.0", 26 | "@material/floating-label": "^14.0.0", 27 | "@material/line-ripple": "^14.0.0", 28 | "@material/notched-outline": "^14.0.0", 29 | "@material/ripple": "^14.0.0", 30 | "@material/rtl": "^14.0.0", 31 | "@material/shape": "^14.0.0", 32 | "@material/theme": "^14.0.0", 33 | "@material/tokens": "^14.0.0", 34 | "@material/typography": "^14.0.0", 35 | "tslib": "^2.1.0" 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /packages/mdc-theme/_all-theme-deprecated.scss: -------------------------------------------------------------------------------- 1 | @forward './color-palette'; 2 | @forward './functions'; 3 | @forward './mixins'; 4 | @forward './variables'; 5 | -------------------------------------------------------------------------------- /packages/mdc-theme/_color-custom-properties.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2020 Google Inc. 3 | // 4 | // Permission is hereby granted, free of charge, to any person obtaining a copy 5 | // of this software and associated documentation files (the "Software"), to deal 6 | // in the Software without restriction, including without limitation the rights 7 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | // copies of the Software, and to permit persons to whom the Software is 9 | // furnished to do so, subject to the following conditions: 10 | // 11 | // The above copyright notice and this permission notice shall be included in 12 | // all copies or substantial portions of the Software. 13 | // 14 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 15 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 16 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 17 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 18 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 19 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 20 | // THE SOFTWARE. 21 | // 22 | 23 | $secondary: --mdc-theme-secondary; 24 | -------------------------------------------------------------------------------- /packages/mdc-theme/_color-palette.import.scss: -------------------------------------------------------------------------------- 1 | @forward "./all-theme-deprecated" as material-color-* hide $material-color-primary, $material-color-on-primary, $material-color-accent, $material-color-secondary, $material-color-on-secondary, $material-color-background, $material-color-surface, $material-color-on-surface, $material-color-error, $material-color-on-error, $material-color-text-colors, $material-color-text-emphasis, $material-color-property-values, material-color-ink-color-for-fill-, material-color-prop-value, material-color-accessible-ink-color, material-color-is-valid-theme-prop-value-, material-color-text-emphasis, material-color-core-styles, material-color-prop, material-color-luminance, material-color-contrast, material-color-tone, material-color-contrast-tone, material-color-is-var-with-fallback-, material-color-get-var-fallback-, material-color-var-, material-color-color-hash, material-color-is-css-var-, material-color-get-css-varname-; 2 | -------------------------------------------------------------------------------- /packages/mdc-theme/_index.scss: -------------------------------------------------------------------------------- 1 | @forward './theme-color' show 2 | $background, 3 | $error, 4 | $primary, 5 | $on-error, 6 | $on-primary, 7 | $on-secondary, 8 | $on-surface, 9 | $secondary, 10 | $surface, 11 | accessible-ink-color, 12 | contrast, 13 | contrast-tone, 14 | luminance, 15 | text-emphasis, 16 | tone; 17 | @forward './theme' show core-styles, property; 18 | @forward './color-palette'; 19 | -------------------------------------------------------------------------------- /packages/mdc-theme/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@material/theme", 3 | "description": "The Material Components for the web theming system", 4 | "version": "14.0.0", 5 | "license": "MIT", 6 | "keywords": [ 7 | "material components", 8 | "material design", 9 | "theme" 10 | ], 11 | "repository": { 12 | "type": "git", 13 | "url": "https://github.com/material-components/material-components-web.git", 14 | "directory": "packages/mdc-theme" 15 | }, 16 | "sideEffects": false, 17 | "dependencies": { 18 | "@material/feature-targeting": "^14.0.0", 19 | "tslib": "^2.1.0" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /packages/mdc-theme/styles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2017 Google Inc. 3 | // 4 | // Permission is hereby granted, free of charge, to any person obtaining a copy 5 | // of this software and associated documentation files (the "Software"), to deal 6 | // in the Software without restriction, including without limitation the rights 7 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | // copies of the Software, and to permit persons to whom the Software is 9 | // furnished to do so, subject to the following conditions: 10 | // 11 | // The above copyright notice and this permission notice shall be included in 12 | // all copies or substantial portions of the Software. 13 | // 14 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 15 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 16 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 17 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 18 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 19 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 20 | // THE SOFTWARE. 21 | // 22 | 23 | @use './theme'; 24 | 25 | @include theme.core-styles; 26 | -------------------------------------------------------------------------------- /packages/mdc-theme/test/feature-targeting-any.test.scss: -------------------------------------------------------------------------------- 1 | @use '../theme'; 2 | @use '@material/feature-targeting/feature-targeting'; 3 | 4 | @mixin test($query) { 5 | .test { 6 | @include theme.core-styles($query: $query); 7 | } 8 | } 9 | 10 | // This shouldn't output any CSS. 11 | @include test(feature-targeting.any()); 12 | -------------------------------------------------------------------------------- /packages/mdc-theme/test/override.test.scss: -------------------------------------------------------------------------------- 1 | @use '../index' as theme with ( 2 | $primary: teal, 3 | $secondary: crimson 4 | ); 5 | 6 | @include theme.core-styles(); 7 | -------------------------------------------------------------------------------- /packages/mdc-theme/test/replace.test.scss: -------------------------------------------------------------------------------- 1 | @use '../custom-properties'; 2 | @use '../theme'; 3 | 4 | .simple { 5 | @include theme.property(width, 'calc(x - y)', $replace: (x: 100%, y: 20px)); 6 | } 7 | 8 | .var { 9 | $first: custom-properties.create(--m-foo, 16px); 10 | $second: custom-properties.create(--m-bar, 8px); 11 | @include theme.property( 12 | width, 13 | 'calc(first + second)', 14 | $replace: (first: $first, second: $second) 15 | ); 16 | 17 | @include theme.property( 18 | height, 19 | 'calc(first + second + first + second)', 20 | $replace: (first: $first, second: $second) 21 | ); 22 | } 23 | 24 | .multiple { 25 | @include theme.property(width, 'calc(x + x + x)', $replace: (x: 8px)); 26 | } 27 | 28 | .list { 29 | @include theme.property(padding, 0 value, $replace: (value: 16px)); 30 | } 31 | 32 | .replace-nulls { 33 | // Entire block should be dropped. This should not be emitted. 34 | @include theme.property(padding, a b, $replace: (a: 16px, b: null)); 35 | } 36 | -------------------------------------------------------------------------------- /packages/mdc-theme/test/shadow-dom.test.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:selector'; 2 | @use '../selector-ext'; 3 | @use '../shadow-dom'; 4 | 5 | :host, 6 | :host(:not(.hidden)[outlined]), 7 | :host .my-class, 8 | gm-fab { 9 | @include shadow-dom.host-aware(selector.append(&, '[lowered]')) { 10 | color: blue; 11 | 12 | @include shadow-dom.host-aware(selector.append(&, ':hover')) { 13 | background-color: red; 14 | } 15 | } 16 | 17 | @include shadow-dom.host-aware(selector.append(&, ':focus'), &) { 18 | border-color: green; 19 | } 20 | } 21 | 22 | /* Test replacement for deprecated shadow-dom.host-aware() */ 23 | :host, 24 | :host(:not(.hidden)[outlined]), 25 | :host .my-class, 26 | gm-fab { 27 | @include selector-ext.append-strict(&, '[lowered]') { 28 | color: blue; 29 | 30 | @include selector-ext.append-strict(&, ':hover') { 31 | background-color: red; 32 | } 33 | } 34 | 35 | @at-root { 36 | #{selector-ext.append-strict(&, ':focus')}, 37 | & { 38 | border-color: green; 39 | } 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /packages/mdc-theme/test/theme.test.scss: -------------------------------------------------------------------------------- 1 | @use '../theme'; 2 | 3 | .test { 4 | @include theme.property(color, primary); 5 | } 6 | -------------------------------------------------------------------------------- /packages/mdc-theme/test/validate.test.scss: -------------------------------------------------------------------------------- 1 | @use 'true' as test; 2 | 3 | @use '../validate'; 4 | 5 | @include test.describe('theme-styles') { 6 | @include test.describe('with `$require-all: false`') { 7 | @include test.it('returns null when passed in null') { 8 | $reference-theme: ( 9 | 'test-token': blue, 10 | ); 11 | 12 | @include test.assert-equal( 13 | validate.theme-styles($reference-theme, null, $require-all: false), 14 | null 15 | ); 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /packages/mdc-tokens/_resolvers.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:meta'; 2 | @use '@material/elevation/elevation-theme'; 3 | 4 | @function _material-elevation($args...) { 5 | @return elevation-theme.resolver($args...); 6 | } 7 | 8 | $material: ( 9 | elevation: meta.get-function(_material-elevation), 10 | ); 11 | -------------------------------------------------------------------------------- /packages/mdc-tokens/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@material/tokens", 3 | "description": "Material Components for the web mixins for Material Design tokens", 4 | "version": "14.0.0", 5 | "license": "MIT", 6 | "keywords": [ 7 | "material components", 8 | "material design", 9 | "tokens" 10 | ], 11 | "repository": { 12 | "type": "git", 13 | "url": "https://github.com/material-components/material-components-web.git", 14 | "directory": "packages/mdc-tokens" 15 | }, 16 | "sideEffects": false, 17 | "dependencies": { 18 | "@material/elevation": "^14.0.0" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /packages/mdc-tokens/v0_132/_md-comp-bottom-app-bar.scss: -------------------------------------------------------------------------------- 1 | // 2 | // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! 3 | // !!! DO NOT MODIFY IT BY HAND !!! 4 | // Design system display name: Google Material 3 5 | // Design system version: v0.132 6 | // 7 | 8 | @use 'sass:map'; 9 | 10 | @use './md-sys-color'; 11 | 12 | @use './md-sys-elevation'; 13 | 14 | @use './md-sys-shape'; 15 | 16 | $_default: ( 17 | 'md-sys-color': md-sys-color.values-light(), 18 | 'md-sys-elevation': md-sys-elevation.values(), 19 | 'md-sys-shape': md-sys-shape.values(), 20 | ); 21 | 22 | @function values($deps: $_default, $exclude-hardcoded-values: false) { 23 | @return ( 24 | 'container-color': map.get($deps, 'md-sys-color', 'surface'), 25 | 'container-elevation': map.get($deps, 'md-sys-elevation', 'level2'), 26 | 'container-height': if($exclude-hardcoded-values, null, 80px), 27 | 'container-shape': map.get($deps, 'md-sys-shape', 'corner-none'), 28 | 'container-surface-tint-layer-color': 29 | map.get($deps, 'md-sys-color', 'surface-tint') 30 | ); 31 | } 32 | -------------------------------------------------------------------------------- /packages/mdc-tokens/v0_132/_md-comp-divider.scss: -------------------------------------------------------------------------------- 1 | // 2 | // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! 3 | // !!! DO NOT MODIFY IT BY HAND !!! 4 | // Design system display name: Google Material 3 5 | // Design system version: v0.132 6 | // 7 | 8 | @use 'sass:map'; 9 | 10 | @use './md-sys-color'; 11 | 12 | $_default: ( 13 | 'md-sys-color': md-sys-color.values-light(), 14 | ); 15 | 16 | @function values($deps: $_default, $exclude-hardcoded-values: false) { 17 | @return ( 18 | 'color': map.get($deps, 'md-sys-color', 'outline-variant'), 19 | 'thickness': if($exclude-hardcoded-values, null, 1px) 20 | ); 21 | } 22 | -------------------------------------------------------------------------------- /packages/mdc-tokens/v0_132/_md-comp-scrim.scss: -------------------------------------------------------------------------------- 1 | // 2 | // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! 3 | // !!! DO NOT MODIFY IT BY HAND !!! 4 | // Design system display name: Google Material 3 5 | // Design system version: v0.132 6 | // 7 | 8 | @use 'sass:map'; 9 | 10 | @use './md-sys-color'; 11 | 12 | $_default: ( 13 | 'md-sys-color': md-sys-color.values-light(), 14 | ); 15 | 16 | @function values($deps: $_default, $exclude-hardcoded-values: false) { 17 | @return ( 18 | 'container-color': map.get($deps, 'md-sys-color', 'scrim'), 19 | 'container-opacity': if($exclude-hardcoded-values, null, 0.32) 20 | ); 21 | } 22 | -------------------------------------------------------------------------------- /packages/mdc-tokens/v0_132/_md-comp-sheet-floating.scss: -------------------------------------------------------------------------------- 1 | // 2 | // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! 3 | // !!! DO NOT MODIFY IT BY HAND !!! 4 | // Design system display name: Google Material 3 5 | // Design system version: v0.132 6 | // 7 | 8 | @use 'sass:map'; 9 | 10 | @use './md-sys-color'; 11 | 12 | @use './md-sys-elevation'; 13 | 14 | @use './md-sys-shape'; 15 | 16 | $_default: ( 17 | 'md-sys-color': md-sys-color.values-light(), 18 | 'md-sys-elevation': md-sys-elevation.values(), 19 | 'md-sys-shape': md-sys-shape.values(), 20 | ); 21 | 22 | @function values($deps: $_default) { 23 | @return ( 24 | 'container-color': map.get($deps, 'md-sys-color', 'surface'), 25 | 'container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 26 | 'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-large'), 27 | 'container-surface-tint-layer-color': 28 | map.get($deps, 'md-sys-color', 'surface-tint') 29 | ); 30 | } 31 | -------------------------------------------------------------------------------- /packages/mdc-tokens/v0_132/_md-ref-typeface.scss: -------------------------------------------------------------------------------- 1 | // 2 | // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! 3 | // !!! DO NOT MODIFY IT BY HAND !!! 4 | // Design system display name: Google Material 3 5 | // Design system version: v0.132 6 | // User-configured context group "Audience": "3P" 7 | // 8 | 9 | @function values($exclude-hardcoded-values: false) { 10 | @return ( 11 | 'brand': if($exclude-hardcoded-values, null, (Roboto)), 12 | 'plain': if($exclude-hardcoded-values, null, (Roboto)), 13 | 'weight-bold': if($exclude-hardcoded-values, null, 700), 14 | 'weight-medium': if($exclude-hardcoded-values, null, 500), 15 | 'weight-regular': if($exclude-hardcoded-values, null, 400) 16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /packages/mdc-tokens/v0_132/_md-sys-elevation.scss: -------------------------------------------------------------------------------- 1 | // 2 | // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! 3 | // !!! DO NOT MODIFY IT BY HAND !!! 4 | // Design system display name: Google Material 3 5 | // Design system version: v0.132 6 | // 7 | 8 | @function values($exclude-hardcoded-values: false) { 9 | @return ( 10 | 'level0': if($exclude-hardcoded-values, null, 0), 11 | 'level1': if($exclude-hardcoded-values, null, 1), 12 | 'level2': if($exclude-hardcoded-values, null, 3), 13 | 'level3': if($exclude-hardcoded-values, null, 6), 14 | 'level4': if($exclude-hardcoded-values, null, 8), 15 | 'level5': if($exclude-hardcoded-values, null, 12) 16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /packages/mdc-tokens/v0_132/_md-sys-shape.scss: -------------------------------------------------------------------------------- 1 | // 2 | // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! 3 | // !!! DO NOT MODIFY IT BY HAND !!! 4 | // Design system display name: Google Material 3 5 | // Design system version: v0.132 6 | // 7 | 8 | @function values($exclude-hardcoded-values: false) { 9 | @return ( 10 | 'corner-extra-large': if($exclude-hardcoded-values, null, 28px), 11 | 'corner-extra-large-top': 12 | if($exclude-hardcoded-values, null, (28px 28px 0px 0px)), 13 | 'corner-extra-small': if($exclude-hardcoded-values, null, 4px), 14 | 'corner-extra-small-top': 15 | if($exclude-hardcoded-values, null, (4px 4px 0px 0px)), 16 | 'corner-full': if($exclude-hardcoded-values, null, 9999px), 17 | 'corner-large': if($exclude-hardcoded-values, null, 16px), 18 | 'corner-large-end': if($exclude-hardcoded-values, null, (0px 16px 16px 0px)), 19 | 'corner-large-start': 20 | if($exclude-hardcoded-values, null, (16px 0px 0px 16px)), 21 | 'corner-large-top': if($exclude-hardcoded-values, null, (16px 16px 0px 0px)), 22 | 'corner-medium': if($exclude-hardcoded-values, null, 12px), 23 | 'corner-none': if($exclude-hardcoded-values, null, 0px), 24 | 'corner-small': if($exclude-hardcoded-values, null, 8px) 25 | ); 26 | } 27 | -------------------------------------------------------------------------------- /packages/mdc-tokens/v0_132/_md-sys-state.scss: -------------------------------------------------------------------------------- 1 | // 2 | // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! 3 | // !!! DO NOT MODIFY IT BY HAND !!! 4 | // Design system display name: Google Material 3 5 | // Design system version: v0.132 6 | // 7 | 8 | @function values($exclude-hardcoded-values: false) { 9 | @return ( 10 | 'dragged-state-layer-opacity': if($exclude-hardcoded-values, null, 0.16), 11 | 'focus-state-layer-opacity': if($exclude-hardcoded-values, null, 0.12), 12 | 'hover-state-layer-opacity': if($exclude-hardcoded-values, null, 0.08), 13 | 'pressed-state-layer-opacity': if($exclude-hardcoded-values, null, 0.12) 14 | ); 15 | } 16 | -------------------------------------------------------------------------------- /packages/mdc-tokens/v0_161/_md-comp-bottom-app-bar.scss: -------------------------------------------------------------------------------- 1 | // 2 | // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! 3 | // !!! DO NOT MODIFY IT BY HAND !!! 4 | // Design system display name: Google Material 3 5 | // Design system version: v0.161 6 | // 7 | 8 | @use 'sass:map'; 9 | 10 | @use './md-sys-color'; 11 | 12 | @use './md-sys-elevation'; 13 | 14 | @use './md-sys-shape'; 15 | 16 | $_default: ( 17 | 'md-sys-color': md-sys-color.values-light(), 18 | 'md-sys-elevation': md-sys-elevation.values(), 19 | 'md-sys-shape': md-sys-shape.values(), 20 | ); 21 | 22 | @function values($deps: $_default, $exclude-hardcoded-values: false) { 23 | @return ( 24 | 'container-color': map.get($deps, 'md-sys-color', 'surface'), 25 | 'container-elevation': map.get($deps, 'md-sys-elevation', 'level2'), 26 | 'container-height': if($exclude-hardcoded-values, null, 80px), 27 | 'container-shape': map.get($deps, 'md-sys-shape', 'corner-none'), 28 | 'container-surface-tint-layer-color': 29 | map.get($deps, 'md-sys-color', 'surface-tint') 30 | ); 31 | } 32 | -------------------------------------------------------------------------------- /packages/mdc-tokens/v0_161/_md-comp-divider.scss: -------------------------------------------------------------------------------- 1 | // 2 | // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! 3 | // !!! DO NOT MODIFY IT BY HAND !!! 4 | // Design system display name: Google Material 3 5 | // Design system version: v0.161 6 | // 7 | 8 | @use 'sass:map'; 9 | 10 | @use './md-sys-color'; 11 | 12 | $_default: ( 13 | 'md-sys-color': md-sys-color.values-light(), 14 | ); 15 | 16 | @function values($deps: $_default, $exclude-hardcoded-values: false) { 17 | @return ( 18 | 'color': map.get($deps, 'md-sys-color', 'outline-variant'), 19 | 'thickness': if($exclude-hardcoded-values, null, 1px) 20 | ); 21 | } 22 | -------------------------------------------------------------------------------- /packages/mdc-tokens/v0_161/_md-comp-menu.scss: -------------------------------------------------------------------------------- 1 | // 2 | // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! 3 | // !!! DO NOT MODIFY IT BY HAND !!! 4 | // Design system display name: Google Material 3 5 | // Design system version: v0.161 6 | // 7 | 8 | @use 'sass:map'; 9 | 10 | @use './md-sys-color'; 11 | 12 | @use './md-sys-elevation'; 13 | 14 | @use './md-sys-shape'; 15 | 16 | $_default: ( 17 | 'md-sys-color': md-sys-color.values-light(), 18 | 'md-sys-elevation': md-sys-elevation.values(), 19 | 'md-sys-shape': md-sys-shape.values(), 20 | ); 21 | 22 | @function values($deps: $_default) { 23 | @return ( 24 | 'container-color': map.get($deps, 'md-sys-color', 'surface'), 25 | 'container-elevation': map.get($deps, 'md-sys-elevation', 'level2'), 26 | 'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), 27 | 'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-small'), 28 | 'container-surface-tint-layer-color': 29 | map.get($deps, 'md-sys-color', 'surface-tint'), 30 | 'list-item-selected-container-color': 31 | map.get($deps, 'md-sys-color', 'surface-variant') 32 | ); 33 | } 34 | -------------------------------------------------------------------------------- /packages/mdc-tokens/v0_161/_md-comp-scrim.scss: -------------------------------------------------------------------------------- 1 | // 2 | // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! 3 | // !!! DO NOT MODIFY IT BY HAND !!! 4 | // Design system display name: Google Material 3 5 | // Design system version: v0.161 6 | // 7 | 8 | @use 'sass:map'; 9 | 10 | @use './md-sys-color'; 11 | 12 | $_default: ( 13 | 'md-sys-color': md-sys-color.values-light(), 14 | ); 15 | 16 | @function values($deps: $_default, $exclude-hardcoded-values: false) { 17 | @return ( 18 | 'container-color': map.get($deps, 'md-sys-color', 'scrim'), 19 | 'container-opacity': if($exclude-hardcoded-values, null, 0.32) 20 | ); 21 | } 22 | -------------------------------------------------------------------------------- /packages/mdc-tokens/v0_161/_md-comp-sheet-floating.scss: -------------------------------------------------------------------------------- 1 | // 2 | // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! 3 | // !!! DO NOT MODIFY IT BY HAND !!! 4 | // Design system display name: Google Material 3 5 | // Design system version: v0.161 6 | // 7 | 8 | @use 'sass:map'; 9 | 10 | @use './md-sys-color'; 11 | 12 | @use './md-sys-elevation'; 13 | 14 | @use './md-sys-shape'; 15 | 16 | $_default: ( 17 | 'md-sys-color': md-sys-color.values-light(), 18 | 'md-sys-elevation': md-sys-elevation.values(), 19 | 'md-sys-shape': md-sys-shape.values(), 20 | ); 21 | 22 | @function values($deps: $_default) { 23 | @return ( 24 | 'container-color': map.get($deps, 'md-sys-color', 'surface'), 25 | 'container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), 26 | 'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-large'), 27 | 'container-surface-tint-layer-color': 28 | map.get($deps, 'md-sys-color', 'surface-tint') 29 | ); 30 | } 31 | -------------------------------------------------------------------------------- /packages/mdc-tokens/v0_161/_md-ref-typeface.scss: -------------------------------------------------------------------------------- 1 | // 2 | // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! 3 | // !!! DO NOT MODIFY IT BY HAND !!! 4 | // Design system display name: Google Material 3 5 | // Design system version: v0.161 6 | // User-configured context group "Audience": "3P" 7 | // 8 | 9 | @function values($exclude-hardcoded-values: false) { 10 | @return ( 11 | 'brand': if($exclude-hardcoded-values, null, (Roboto)), 12 | 'plain': if($exclude-hardcoded-values, null, (Roboto)), 13 | 'weight-bold': if($exclude-hardcoded-values, null, 700), 14 | 'weight-medium': if($exclude-hardcoded-values, null, 500), 15 | 'weight-regular': if($exclude-hardcoded-values, null, 400) 16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /packages/mdc-tokens/v0_161/_md-sys-elevation.scss: -------------------------------------------------------------------------------- 1 | // 2 | // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! 3 | // !!! DO NOT MODIFY IT BY HAND !!! 4 | // Design system display name: Google Material 3 5 | // Design system version: v0.161 6 | // 7 | 8 | @function values($exclude-hardcoded-values: false) { 9 | @return ( 10 | 'level0': if($exclude-hardcoded-values, null, 0), 11 | 'level1': if($exclude-hardcoded-values, null, 1), 12 | 'level2': if($exclude-hardcoded-values, null, 3), 13 | 'level3': if($exclude-hardcoded-values, null, 6), 14 | 'level4': if($exclude-hardcoded-values, null, 8), 15 | 'level5': if($exclude-hardcoded-values, null, 12) 16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /packages/mdc-tokens/v0_161/_md-sys-shape.scss: -------------------------------------------------------------------------------- 1 | // 2 | // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! 3 | // !!! DO NOT MODIFY IT BY HAND !!! 4 | // Design system display name: Google Material 3 5 | // Design system version: v0.161 6 | // 7 | 8 | @function values($exclude-hardcoded-values: false) { 9 | @return ( 10 | 'corner-extra-large': if($exclude-hardcoded-values, null, 28px), 11 | 'corner-extra-large-top': 12 | if($exclude-hardcoded-values, null, (28px 28px 0px 0px)), 13 | 'corner-extra-small': if($exclude-hardcoded-values, null, 4px), 14 | 'corner-extra-small-top': 15 | if($exclude-hardcoded-values, null, (4px 4px 0px 0px)), 16 | 'corner-full': if($exclude-hardcoded-values, null, 9999px), 17 | 'corner-large': if($exclude-hardcoded-values, null, 16px), 18 | 'corner-large-end': if($exclude-hardcoded-values, null, (0px 16px 16px 0px)), 19 | 'corner-large-start': 20 | if($exclude-hardcoded-values, null, (16px 0px 0px 16px)), 21 | 'corner-large-top': if($exclude-hardcoded-values, null, (16px 16px 0px 0px)), 22 | 'corner-medium': if($exclude-hardcoded-values, null, 12px), 23 | 'corner-none': if($exclude-hardcoded-values, null, 0px), 24 | 'corner-small': if($exclude-hardcoded-values, null, 8px) 25 | ); 26 | } 27 | -------------------------------------------------------------------------------- /packages/mdc-tokens/v0_161/_md-sys-state.scss: -------------------------------------------------------------------------------- 1 | // 2 | // !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! 3 | // !!! DO NOT MODIFY IT BY HAND !!! 4 | // Design system display name: Google Material 3 5 | // Design system version: v0.161 6 | // 7 | 8 | @function values($exclude-hardcoded-values: false) { 9 | @return ( 10 | 'dragged-state-layer-opacity': if($exclude-hardcoded-values, null, 0.16), 11 | 'focus-state-layer-opacity': if($exclude-hardcoded-values, null, 0.12), 12 | 'hover-state-layer-opacity': if($exclude-hardcoded-values, null, 0.08), 13 | 'pressed-state-layer-opacity': if($exclude-hardcoded-values, null, 0.12) 14 | ); 15 | } 16 | -------------------------------------------------------------------------------- /packages/mdc-tooltip/.npmignore: -------------------------------------------------------------------------------- 1 | *.ts 2 | !*.d.ts 3 | test/** 4 | -------------------------------------------------------------------------------- /packages/mdc-tooltip/_index.scss: -------------------------------------------------------------------------------- 1 | @forward "./tooltip-theme"; 2 | -------------------------------------------------------------------------------- /packages/mdc-tooltip/images/plain_tooltip_alignment.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-web/6ceadb81df508ac08ab007c52c4d3dc1d811cc15/packages/mdc-tooltip/images/plain_tooltip_alignment.png -------------------------------------------------------------------------------- /packages/mdc-tooltip/images/rich_tooltip.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-web/6ceadb81df508ac08ab007c52c4d3dc1d811cc15/packages/mdc-tooltip/images/rich_tooltip.png -------------------------------------------------------------------------------- /packages/mdc-tooltip/images/rich_tooltip_alignment.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-web/6ceadb81df508ac08ab007c52c4d3dc1d811cc15/packages/mdc-tooltip/images/rich_tooltip_alignment.png -------------------------------------------------------------------------------- /packages/mdc-tooltip/images/tooltip.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-web/6ceadb81df508ac08ab007c52c4d3dc1d811cc15/packages/mdc-tooltip/images/tooltip.png -------------------------------------------------------------------------------- /packages/mdc-tooltip/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@material/tooltip", 3 | "description": "The Material Components Web tooltip component.", 4 | "version": "14.0.0", 5 | "license": "MIT", 6 | "keywords": [ 7 | "material components", 8 | "material design", 9 | "tooltip" 10 | ], 11 | "main": "dist/mdc.tooltip.js", 12 | "module": "index.js", 13 | "sideEffects": false, 14 | "repository": { 15 | "type": "git", 16 | "url": "https://github.com/material-components/material-components-web.git", 17 | "directory": "packages/mdc-tooltip" 18 | }, 19 | "dependencies": { 20 | "@material/animation": "^14.0.0", 21 | "@material/base": "^14.0.0", 22 | "@material/button": "^14.0.0", 23 | "@material/dom": "^14.0.0", 24 | "@material/elevation": "^14.0.0", 25 | "@material/feature-targeting": "^14.0.0", 26 | "@material/rtl": "^14.0.0", 27 | "@material/shape": "^14.0.0", 28 | "@material/theme": "^14.0.0", 29 | "@material/tokens": "^14.0.0", 30 | "@material/typography": "^14.0.0", 31 | "safevalues": "^1.0.1", 32 | "tslib": "^2.1.0" 33 | }, 34 | "publishConfig": { 35 | "access": "public" 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /packages/mdc-tooltip/test/feature-targeting-any.test.scss: -------------------------------------------------------------------------------- 1 | @use '../tooltip'; 2 | @use '@material/feature-targeting/feature-targeting'; 3 | 4 | @mixin test($query) { 5 | .test { 6 | @include tooltip.core-styles($query: $query); 7 | } 8 | } 9 | 10 | // This shouldn't output any CSS. 11 | @include test(feature-targeting.any()); 12 | -------------------------------------------------------------------------------- /packages/mdc-top-app-bar/.npmignore: -------------------------------------------------------------------------------- 1 | *.ts 2 | !*.d.ts 3 | test/** 4 | -------------------------------------------------------------------------------- /packages/mdc-top-app-bar/_index.scss: -------------------------------------------------------------------------------- 1 | @forward "./variables"; 2 | @forward "./mixins"; 3 | -------------------------------------------------------------------------------- /packages/mdc-top-app-bar/_variables.import.scss: -------------------------------------------------------------------------------- 1 | @forward "./index" as mdc-top-app-bar-* hide mdc-top-app-bar-ink-color, mdc-top-app-bar-fill-color, mdc-top-app-bar-fill-color-accessible, mdc-top-app-bar-icon-ink-color, mdc-top-app-bar-short-shape-radius, mdc-top-app-bar-mobile-breakpoint-; 2 | -------------------------------------------------------------------------------- /packages/mdc-top-app-bar/images/contextual-app-bar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-web/6ceadb81df508ac08ab007c52c4d3dc1d811cc15/packages/mdc-top-app-bar/images/contextual-app-bar.png -------------------------------------------------------------------------------- /packages/mdc-top-app-bar/images/regular-app-bar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/material-components/material-components-web/6ceadb81df508ac08ab007c52c4d3dc1d811cc15/packages/mdc-top-app-bar/images/regular-app-bar.png -------------------------------------------------------------------------------- /packages/mdc-top-app-bar/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@material/top-app-bar", 3 | "version": "14.0.0", 4 | "description": "The Material Components for the web top app bar component", 5 | "license": "MIT", 6 | "main": "dist/mdc.topAppBar.js", 7 | "module": "index.js", 8 | "sideEffects": false, 9 | "repository": { 10 | "type": "git", 11 | "url": "https://github.com/material-components/material-components-web.git", 12 | "directory": "packages/mdc-top-app-bar" 13 | }, 14 | "keywords": [ 15 | "material components", 16 | "material design", 17 | "top app bar", 18 | "top-app-bar", 19 | "topappbar" 20 | ], 21 | "dependencies": { 22 | "@material/animation": "^14.0.0", 23 | "@material/base": "^14.0.0", 24 | "@material/elevation": "^14.0.0", 25 | "@material/ripple": "^14.0.0", 26 | "@material/rtl": "^14.0.0", 27 | "@material/shape": "^14.0.0", 28 | "@material/theme": "^14.0.0", 29 | "@material/typography": "^14.0.0", 30 | "tslib": "^2.1.0" 31 | }, 32 | "publishConfig": { 33 | "access": "public" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /packages/mdc-touch-target/_index.scss: -------------------------------------------------------------------------------- 1 | @forward "./variables"; 2 | @forward "./mixins"; 3 | -------------------------------------------------------------------------------- /packages/mdc-touch-target/_mixins.import.scss: -------------------------------------------------------------------------------- 1 | @forward "@material/base" as mdc-base-*; 2 | @forward "@material/feature-targeting" as mdc-feature-*; 3 | @forward "./index" as mdc-touch-target-* hide mdc-touch-target-touch-target; 4 | @forward "./index" as mdc-* show mdc-touch-target; 5 | -------------------------------------------------------------------------------- /packages/mdc-touch-target/_variables.import.scss: -------------------------------------------------------------------------------- 1 | @forward "./index" as mdc-touch-target-* hide mdc-touch-target-wrapper, mdc-touch-target-touch-target, mdc-touch-target-margin; 2 | -------------------------------------------------------------------------------- /packages/mdc-touch-target/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@material/touch-target", 3 | "description": "Touch target mixins and variables for Material Components for the web", 4 | "version": "14.0.0", 5 | "license": "MIT", 6 | "keywords": [ 7 | "material components", 8 | "material design", 9 | "accessibility", 10 | "touch target" 11 | ], 12 | "repository": { 13 | "type": "git", 14 | "url": "https://github.com/material-components/material-components-web.git", 15 | "directory": "packages/mdc-touch-target" 16 | }, 17 | "sideEffects": false, 18 | "dependencies": { 19 | "@material/base": "^14.0.0", 20 | "@material/feature-targeting": "^14.0.0", 21 | "@material/rtl": "^14.0.0", 22 | "@material/theme": "^14.0.0", 23 | "tslib": "^2.1.0" 24 | }, 25 | "publishConfig": { 26 | "access": "public" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /packages/mdc-touch-target/test/feature-targeting-any.test.scss: -------------------------------------------------------------------------------- 1 | @use '../mixins' as touch-target; 2 | @use '@material/feature-targeting/feature-targeting'; 3 | 4 | @mixin test($query) { 5 | .test { 6 | @include touch-target.wrapper($query: $query); 7 | @include touch-target.touch-target($query: $query); 8 | @include touch-target.margin(0, $query: $query); 9 | } 10 | } 11 | 12 | // This shouldn't output any CSS. 13 | @include test(feature-targeting.any()); 14 | -------------------------------------------------------------------------------- /packages/mdc-typography/_functions.import.scss: -------------------------------------------------------------------------------- 1 | @forward "./index" as mdc-typography-* hide $mdc-typography-font-family, $mdc-typography-base, $mdc-typography-font-weight-values, $mdc-typography-styles, mdc-typography-core-styles, mdc-typography-base, mdc-typography-typography, mdc-typography-overflow-ellipsis, mdc-typography-baseline-top, mdc-typography-baseline-bottom, mdc-typography-baseline-strut-; 2 | -------------------------------------------------------------------------------- /packages/mdc-typography/_index.scss: -------------------------------------------------------------------------------- 1 | @forward "./variables"; 2 | @forward "./mixins"; 3 | @forward "./functions"; 4 | -------------------------------------------------------------------------------- /packages/mdc-typography/_mixins.import.scss: -------------------------------------------------------------------------------- 1 | @forward "@material/feature-targeting" as mdc-feature-*; 2 | @forward "./index" as mdc-typography-* hide mdc-typography-typography; 3 | @forward "./index" as mdc-* show mdc-typography; 4 | -------------------------------------------------------------------------------- /packages/mdc-typography/_variables.import.scss: -------------------------------------------------------------------------------- 1 | @forward "./index" as mdc-typography-* hide mdc-typography-core-styles, mdc-typography-base, mdc-typography-typography, mdc-typography-overflow-ellipsis, mdc-typography-baseline-top, mdc-typography-baseline-bottom, mdc-typography-baseline-strut-; 2 | -------------------------------------------------------------------------------- /packages/mdc-typography/mdc-typography.import.scss: -------------------------------------------------------------------------------- 1 | @forward "variables" as mdc-typography-*; 2 | @forward "mixins" as mdc-* hide mdc-base, mdc-baseline-bottom, mdc-baseline-strut-, mdc-baseline-top, mdc-core-styles, mdc-overflow-ellipsis; 3 | @forward "mixins" as mdc-typography-* hide mdc-typography-typography; 4 | @forward "@material/feature-targeting/functions" as mdc-feature-*; 5 | @forward "functions" as mdc-typography-*; 6 | @forward "mdc-typography"; 7 | -------------------------------------------------------------------------------- /packages/mdc-typography/mdc-typography.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2017 Google Inc. 3 | // 4 | // Permission is hereby granted, free of charge, to any person obtaining a copy 5 | // of this software and associated documentation files (the "Software"), to deal 6 | // in the Software without restriction, including without limitation the rights 7 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | // copies of the Software, and to permit persons to whom the Software is 9 | // furnished to do so, subject to the following conditions: 10 | // 11 | // The above copyright notice and this permission notice shall be included in 12 | // all copies or substantial portions of the Software. 13 | // 14 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 15 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 16 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 17 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 18 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 19 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 20 | // THE SOFTWARE. 21 | // 22 | 23 | @forward './styles'; 24 | -------------------------------------------------------------------------------- /packages/mdc-typography/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@material/typography", 3 | "description": "Typography classes, mixins, and variables for Material Components for the web", 4 | "version": "14.0.0", 5 | "license": "MIT", 6 | "keywords": [ 7 | "material components", 8 | "material design", 9 | "typography", 10 | "font" 11 | ], 12 | "repository": { 13 | "type": "git", 14 | "url": "https://github.com/material-components/material-components-web.git", 15 | "directory": "packages/mdc-typography" 16 | }, 17 | "sideEffects": false, 18 | "dependencies": { 19 | "@material/feature-targeting": "^14.0.0", 20 | "@material/theme": "^14.0.0", 21 | "tslib": "^2.1.0" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /packages/mdc-typography/test/feature-targeting-any.test.scss: -------------------------------------------------------------------------------- 1 | @use '../mixins' as typography; 2 | @use '@material/feature-targeting/feature-targeting'; 3 | 4 | @mixin test($query) { 5 | .test { 6 | @include typography.core-styles($query: $query); 7 | @include typography.base($query: $query); 8 | @include typography.typography(button, $query: $query); 9 | @include typography.overflow-ellipsis($query: $query); 10 | @include typography.baseline($top: 0, $bottom: 0, $query: $query); 11 | @include typography.text-baseline($top: 0, $bottom: 0, $query: $query); 12 | } 13 | } 14 | 15 | // This shouldn't output any CSS. 16 | @include test(feature-targeting.any()); 17 | -------------------------------------------------------------------------------- /scripts/build/clean.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @fileoverview Cleans top-level build directories (for OSS and internal processes), 3 | * dist subfolders under packages, and .js[.map] files in package directories. 4 | */ 5 | 6 | const del = require('del'); 7 | const fs = require('fs'); 8 | 9 | const {sync: globSync} = require('glob'); 10 | 11 | function main() { 12 | removeDirectory('build'); 13 | removeDirectory('.rewrite-tmp'); 14 | removeFilesOfType('css'); 15 | removeFilesOfType('js'); 16 | removeFilesOfType('d.ts', [ 17 | // This file is hand-written. 18 | 'packages/mdc-base/externs.d.ts', 19 | ]); 20 | removeFilesOfType('map'); 21 | } 22 | 23 | function removeDirectory(directory) { 24 | del.sync([directory]); 25 | } 26 | 27 | function removeFilesOfType(type, extraIgnore = []) { 28 | const fileGlob = `packages/**/*.${type}`; 29 | const filePaths = globSync(fileGlob, { 30 | ignore: ['**/node_modules/**', ...extraIgnore], 31 | }); 32 | filePaths.forEach((filePath) => { 33 | fs.unlink(filePath, (err) => { 34 | if (err) throw err; 35 | }); 36 | }); 37 | } 38 | 39 | main(); 40 | -------------------------------------------------------------------------------- /scripts/documentation/ts-api-table.hbs: -------------------------------------------------------------------------------- 1 | {{#each modules as |module|}} 2 | ### {{module.moduleName}} 3 | {{#if module.moduleName.length}} 4 | #### Methods 5 | 6 | Signature | Description 7 | --- | --- 8 | {{#each module.methods}} 9 | `{{methodSignature}}` | {{documentation}} 10 | {{/each}} 11 | 12 | {{/if}} 13 | {{#if module.properties.length}} 14 | #### Properties 15 | 16 | Name | Type | Description 17 | --- | --- | --- 18 | {{#each module.properties}} 19 | {{name}} | `{{type}}` | {{documentation}} 20 | {{/each}} 21 | 22 | {{/if}} 23 | {{#if module.events.length}} 24 | #### Events 25 | {{#each module.events}} 26 | - {{documentation}} 27 | {{/each}} 28 | 29 | {{/if}} 30 | {{#if ../showFrameworkUsage}} 31 | ## Usage within Web Frameworks 32 | 33 | If you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md). 34 | 35 | {{/if}} 36 | {{/each}} 37 | -------------------------------------------------------------------------------- /scripts/documentation/ts-api-tables.hbs: -------------------------------------------------------------------------------- 1 | {{> tsApiTable modules=componentModules showFrameworkUsage=true }} 2 | {{> tsApiTable modules=nonComponentModules }} -------------------------------------------------------------------------------- /scripts/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "lib": ["es2016"] 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /testing/ts-node.register.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const tsconfigPath = path.join(__dirname, '../tsconfig-node.json'); 3 | 4 | require('ts-node').register({ 5 | project: tsconfigPath, 6 | }); 7 | -------------------------------------------------------------------------------- /tsconfig-base.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "declaration": true, 4 | "downlevelIteration": true, 5 | "emitDecoratorMetadata": true, 6 | "esModuleInterop": true, 7 | "experimentalDecorators": true, 8 | "lib": ["es2017", "dom"], 9 | "moduleResolution": "node", 10 | "newLine": "lf", 11 | "noEmitOnError": false, 12 | "noErrorTruncation": true, 13 | "noFallthroughCasesInSwitch": true, 14 | "noStrictGenericChecks": true, 15 | "noUnusedLocals": true, 16 | "noUnusedParameters": true, 17 | "preserveConstEnums": true, 18 | "pretty": true, 19 | "skipLibCheck": true, 20 | "sourceMap": true, 21 | "strict": true, 22 | "stripInternal": true, 23 | "target": "es5", 24 | "types": ["resize-observer-browser"] 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /tsconfig-node.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": [ 3 | "packages/**/test/*scss.test.ts", 4 | "testing/featuretargeting/**", 5 | ], 6 | "extends": "./tsconfig-base.json", 7 | "types": ["node", "resize-observer-browser"] 8 | } 9 | -------------------------------------------------------------------------------- /tsconfig-testing.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig-base.json", 3 | "compilerOptions": { 4 | "baseUrl": ".", 5 | "paths": { 6 | "@material/base/*": ["packages/mdc-base/*"], 7 | "jasmine": ["node_modules/@types/jasmine/index.d.ts"] 8 | } 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "exclude": [ 3 | "packages/**/test/*.ts", 4 | "scripts/**/*.ts", 5 | "testing/**/*.ts" 6 | ], 7 | "extends": "./tsconfig-base.json" 8 | } 9 | -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "tslint:recommended", 4 | "gts/tslint.json" 5 | ], 6 | "linterOptions": { 7 | "exclude": [ 8 | "node_modules/**/*.{j,t}s", 9 | "**/node_modules/**/*.{j,t}s" 10 | ] 11 | } 12 | } 13 | --------------------------------------------------------------------------------