├── .github ├── ISSUE_TEMPLATE │ ├── bug.yaml │ ├── config.yml │ ├── documentation-bug.yaml │ └── feature.yaml ├── release-please.yml └── workflows │ ├── build-catalog.yml │ ├── commitlint.yml │ ├── firebase-hosting-merge.yml │ ├── firebase-hosting-pull-request.yml │ ├── nightly.yml │ ├── publish.yml │ ├── test.yml │ ├── update-docs-on-main.yml │ └── update-size-on-main.yml ├── .gitignore ├── .release-please-manifest.json ├── CHANGELOG.md ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── SECURITY.md ├── all.ts ├── button ├── _elevated-button.scss ├── _filled-button.scss ├── _filled-tonal-button.scss ├── _outlined-button.scss ├── _text-button.scss ├── demo │ ├── demo.ts │ ├── project.json │ └── stories.ts ├── elevated-button.ts ├── elevated-button_test.ts ├── filled-button.ts ├── filled-button_test.ts ├── filled-tonal-button.ts ├── filled-tonal-button_test.ts ├── harness.ts ├── internal │ ├── _elevated-button.scss │ ├── _elevation.scss │ ├── _filled-button.scss │ ├── _filled-tonal-button.scss │ ├── _icon.scss │ ├── _outlined-button.scss │ ├── _shared.scss │ ├── _text-button.scss │ ├── _touch-target.scss │ ├── button.ts │ ├── button_test.ts │ ├── elevated-button.ts │ ├── elevated-styles.scss │ ├── filled-button.ts │ ├── filled-styles.scss │ ├── filled-tonal-button.ts │ ├── filled-tonal-styles.scss │ ├── outlined-button.ts │ ├── outlined-styles.scss │ ├── shared-elevation-styles.scss │ ├── shared-styles.scss │ ├── text-button.ts │ └── text-styles.scss ├── outlined-button.ts ├── outlined-button_test.ts ├── text-button.ts └── text-button_test.ts ├── catalog ├── .firebaserc ├── eleventy-helpers │ ├── filters │ │ ├── filter-sort.cjs │ │ ├── filter-toc.cjs │ │ └── md-markdown.cjs │ ├── plugins │ │ ├── copy-code-button.cjs │ │ └── permalinks.cjs │ ├── shortcodes │ │ ├── inline-css.cjs │ │ ├── inline-js.cjs │ │ └── playground-example.cjs │ └── transforms │ │ └── minify-html.cjs ├── eleventy.config.cjs ├── esbuild.config.mjs ├── firebase.json ├── package.json ├── scripts │ ├── copy-docs.mjs │ └── copy-stories.mjs ├── site │ ├── _includes │ │ ├── default.html │ │ └── layouts │ │ │ ├── components.html │ │ │ └── docs.html │ ├── about │ │ └── about.json │ ├── components │ │ └── components.json │ ├── css │ │ ├── global.css │ │ ├── home-page.css │ │ ├── md-layout.css │ │ ├── no-js.css │ │ ├── stories.css │ │ └── syntax-highlight.css │ ├── fonts │ │ └── google-sans │ │ │ ├── mono.woff2 │ │ │ └── regular.woff2 │ ├── images │ │ └── favicon.svg │ ├── index.html │ ├── stories │ │ └── stories.html │ └── theming │ │ └── theming.json ├── src │ ├── components │ │ ├── catalog-component-header-title.ts │ │ ├── catalog-component-header.ts │ │ ├── copy-code-button.ts │ │ ├── drag-playground.ts │ │ ├── hct-slider.ts │ │ ├── nav-drawer.ts │ │ ├── theme-changer.ts │ │ └── top-app-bar.ts │ ├── hydration-entrypoints │ │ ├── components │ │ │ ├── button.ts │ │ │ ├── checkbox.ts │ │ │ ├── fab.ts │ │ │ ├── icon-button.ts │ │ │ ├── list.ts │ │ │ ├── menu.ts │ │ │ ├── select.ts │ │ │ └── text-field.ts │ │ ├── copy-code-button.ts │ │ ├── menu.ts │ │ ├── navigation.ts │ │ └── playground-elements.ts │ ├── inline │ │ └── apply-saved-theme.ts │ ├── pages │ │ ├── components.ts │ │ ├── global.ts │ │ ├── home-page.ts │ │ └── stories.ts │ ├── signals │ │ ├── drawer-open-state.ts │ │ ├── inert.ts │ │ └── signal-element.ts │ ├── ssr-utils │ │ ├── dsd-polyfill.ts │ │ ├── lit-hydrate-support.ts │ │ └── lit-island.ts │ ├── ssr.ts │ ├── svg │ │ └── material-design-logo.ts │ ├── types │ │ ├── color-events.ts │ │ └── is-land.d.ts │ └── utils │ │ ├── apply-theme-string.ts │ │ ├── material-color-helpers.ts │ │ └── theme.ts ├── stories │ ├── base.json │ ├── components │ │ ├── knob-ui-components.ts │ │ ├── stories-renderer.ts │ │ ├── story-knob-panel.ts │ │ └── story-renderer.ts │ ├── index.html │ ├── index.ts │ ├── knobs.ts │ ├── material-collection.ts │ ├── story.ts │ └── theme-loader.ts └── tsconfig.json ├── checkbox ├── _checkbox.scss ├── checkbox.ts ├── checkbox_test.ts ├── demo │ ├── demo.ts │ ├── project.json │ └── stories.ts ├── harness.ts └── internal │ ├── _checkbox.scss │ ├── checkbox-styles.scss │ ├── checkbox.ts │ └── checkbox_test.ts ├── chips ├── _assist-chip.scss ├── _filter-chip.scss ├── _input-chip.scss ├── _suggestion-chip.scss ├── assist-chip.ts ├── assist-chip_test.ts ├── chip-set.ts ├── demo │ ├── demo.ts │ ├── project.json │ └── stories.ts ├── filter-chip.ts ├── filter-chip_test.ts ├── harness.ts ├── input-chip.ts ├── input-chip_test.ts ├── internal │ ├── _assist-chip.scss │ ├── _chip-set.scss │ ├── _elevated.scss │ ├── _filter-chip.scss │ ├── _input-chip.scss │ ├── _selectable.scss │ ├── _shared.scss │ ├── _suggestion-chip.scss │ ├── _trailing-icon.scss │ ├── assist-chip.ts │ ├── assist-chip_test.ts │ ├── assist-styles.scss │ ├── chip-set-styles.scss │ ├── chip-set.ts │ ├── chip-set_test.ts │ ├── chip.ts │ ├── chip_test.ts │ ├── elevated-styles.scss │ ├── filter-chip.ts │ ├── filter-chip_test.ts │ ├── filter-styles.scss │ ├── input-chip.ts │ ├── input-chip_test.ts │ ├── input-styles.scss │ ├── multi-action-chip.ts │ ├── multi-action-chip_test.ts │ ├── selectable-styles.scss │ ├── shared-styles.scss │ ├── suggestion-chip.ts │ ├── suggestion-chip_test.ts │ ├── suggestion-styles.scss │ ├── trailing-icon-styles.scss │ └── trailing-icons.ts ├── suggestion-chip.ts └── suggestion-chip_test.ts ├── color └── _color.scss ├── commitlint.config.js ├── common.ts ├── dialog ├── _dialog.scss ├── demo │ ├── demo.ts │ ├── project.json │ └── stories.ts ├── dialog.ts ├── dialog_test.ts ├── harness.ts ├── internal │ ├── _dialog.scss │ ├── animations.ts │ ├── dialog-styles.scss │ └── dialog.ts └── test │ └── window_size.json ├── divider ├── _divider.scss ├── demo │ ├── demo.ts │ ├── project.json │ └── stories.ts ├── divider.ts ├── divider_test.ts └── internal │ ├── _divider.scss │ ├── divider-styles.scss │ └── divider.ts ├── docs ├── components │ ├── button.md │ ├── checkbox.md │ ├── chip.md │ ├── dialog.md │ ├── divider.md │ ├── elevation.md │ ├── fab.md │ ├── figures │ │ ├── checkbox │ │ │ ├── theming.html │ │ │ ├── usage-label.html │ │ │ └── usage.html │ │ ├── fab │ │ │ ├── extended-fabs.html │ │ │ ├── fabs.html │ │ │ ├── theming-branded.html │ │ │ ├── theming-extended.html │ │ │ ├── theming-fab.html │ │ │ ├── usage-branded-extended.html │ │ │ ├── usage-branded-sizes.html │ │ │ ├── usage-branded.html │ │ │ ├── usage-color.html │ │ │ ├── usage-extended.html │ │ │ ├── usage-fab.html │ │ │ ├── usage-lowered.html │ │ │ ├── usage-sizes.html │ │ │ └── usage-without-icon.html │ │ ├── iconbutton │ │ │ ├── buttons.html │ │ │ ├── theming-filled-tonal.html │ │ │ ├── theming-filled.html │ │ │ ├── theming-outlined.html │ │ │ ├── theming-standard.html │ │ │ ├── usage-filled-tonal.html │ │ │ ├── usage-filled.html │ │ │ ├── usage-outlined.html │ │ │ ├── usage-standard.html │ │ │ ├── usage-toggle.html │ │ │ └── usage.html │ │ ├── list │ │ │ ├── theming-icon.html │ │ │ ├── theming-image.html │ │ │ ├── theming-list.html │ │ │ ├── usage-icon.html │ │ │ ├── usage-image.html │ │ │ └── usage.html │ │ ├── menu │ │ │ ├── theming.html │ │ │ ├── usage-document.html │ │ │ ├── usage-fixed.html │ │ │ ├── usage-popover.html │ │ │ ├── usage-submenu.html │ │ │ └── usage.html │ │ ├── select │ │ │ ├── theming-filled.html │ │ │ ├── theming-outlined.html │ │ │ └── usage.html │ │ └── textfield │ │ │ ├── theming-filled.html │ │ │ ├── theming-outlined.html │ │ │ ├── usage-char-counter.html │ │ │ ├── usage-icons.html │ │ │ ├── usage-label.html │ │ │ ├── usage-prefix.html │ │ │ ├── usage-supporting-text.html │ │ │ ├── usage-textarea.html │ │ │ ├── usage-type.html │ │ │ └── usage.html │ ├── focus-ring.md │ ├── icon-button.md │ ├── icon.md │ ├── images │ │ ├── button │ │ │ ├── hero.webp │ │ │ ├── theming-elevated-button.webp │ │ │ ├── theming-filled-button.webp │ │ │ ├── theming-filled-tonal-button.webp │ │ │ ├── theming-outlined-button.webp │ │ │ ├── theming-text-button.webp │ │ │ ├── types.webp │ │ │ ├── usage-elevated-button.webp │ │ │ ├── usage-filled-button.webp │ │ │ ├── usage-filled-tonal-button.webp │ │ │ ├── usage-icon.webp │ │ │ ├── usage-outlined-button.webp │ │ │ ├── usage-text-button.webp │ │ │ └── usage.webp │ │ ├── checkbox │ │ │ ├── hero.webp │ │ │ ├── theming.webp │ │ │ ├── usage-label.webp │ │ │ └── usage.webp │ │ ├── chips │ │ │ └── hero.webp │ │ ├── dialog │ │ │ └── hero.webp │ │ ├── divider │ │ │ ├── hero.webp │ │ │ ├── theming.webp │ │ │ ├── usage-inset-start.webp │ │ │ ├── usage-inset.webp │ │ │ └── usage.webp │ │ ├── elevation │ │ │ ├── hero.webp │ │ │ ├── theming.webp │ │ │ ├── usage-animation.gif │ │ │ └── usage.webp │ │ ├── fab │ │ │ ├── extended-fabs.webp │ │ │ ├── fabs.webp │ │ │ ├── hero.webp │ │ │ ├── small-fabs.webp │ │ │ ├── theming-branded.webp │ │ │ ├── theming-extended.webp │ │ │ ├── theming-fab.webp │ │ │ ├── usage-branded-extended.webp │ │ │ ├── usage-branded-sizes.webp │ │ │ ├── usage-branded.webp │ │ │ ├── usage-color.webp │ │ │ ├── usage-extended.webp │ │ │ ├── usage-fab.webp │ │ │ ├── usage-lowered.webp │ │ │ ├── usage-sizes.webp │ │ │ └── usage-without-icon.webp │ │ ├── focus │ │ │ ├── hero.gif │ │ │ ├── theming.gif │ │ │ ├── usage-animation.gif │ │ │ ├── usage-inward.gif │ │ │ └── usage.gif │ │ ├── icon │ │ │ ├── hero.gif │ │ │ ├── theming.webp │ │ │ ├── usage.webp │ │ │ ├── usage_filled.webp │ │ │ ├── usage_rounded.webp │ │ │ └── usage_sharp.webp │ │ ├── iconbutton │ │ │ ├── buttons.webp │ │ │ ├── hero.webp │ │ │ ├── theming-filled-tonal.webp │ │ │ ├── theming-filled.webp │ │ │ ├── theming-outlined.webp │ │ │ ├── theming-standard.webp │ │ │ ├── usage-filled-tonal.webp │ │ │ ├── usage-filled.webp │ │ │ ├── usage-outlined.webp │ │ │ ├── usage-standard.webp │ │ │ ├── usage-toggle.webp │ │ │ └── usage.webp │ │ ├── list │ │ │ ├── hero.webp │ │ │ ├── theming-icon.webp │ │ │ ├── theming-image.webp │ │ │ ├── theming-list.webp │ │ │ ├── usage-icon.webp │ │ │ ├── usage-image.webp │ │ │ └── usage.webp │ │ ├── menu │ │ │ ├── hero.webp │ │ │ ├── theming.webp │ │ │ ├── usage-document.webp │ │ │ ├── usage-fixed.webp │ │ │ ├── usage-popover.webp │ │ │ ├── usage-submenu.webp │ │ │ └── usage.webp │ │ ├── progress │ │ │ ├── hero.webp │ │ │ ├── theming-circular.webp │ │ │ └── theming-linear.webp │ │ ├── radio │ │ │ └── hero.webp │ │ ├── ripple │ │ │ ├── hero.gif │ │ │ ├── theming.gif │ │ │ ├── usage-unbounded.gif │ │ │ └── usage.gif │ │ ├── select │ │ │ ├── hero.webp │ │ │ ├── theming-filled.webp │ │ │ ├── theming-outlined.webp │ │ │ └── usage.webp │ │ ├── slider │ │ │ ├── hero.webp │ │ │ └── theming.webp │ │ ├── switch │ │ │ └── hero.webp │ │ ├── tabs │ │ │ ├── hero.webp │ │ │ ├── scrollable.webp │ │ │ ├── theming.webp │ │ │ └── usage.webp │ │ └── textfield │ │ │ ├── hero.webp │ │ │ ├── theming-filled.webp │ │ │ ├── theming-outlined.webp │ │ │ ├── usage-char-counter.webp │ │ │ ├── usage-icons.webp │ │ │ ├── usage-label.webp │ │ │ ├── usage-prefix.webp │ │ │ ├── usage-supporting-text.webp │ │ │ ├── usage-textarea.webp │ │ │ ├── usage-type.webp │ │ │ └── usage.webp │ ├── list.md │ ├── menu.md │ ├── progress.md │ ├── radio.md │ ├── ripple.md │ ├── select.md │ ├── slider.md │ ├── switch.md │ ├── tabs.md │ └── text-field.md ├── images │ ├── material-web.gif │ └── what-is-material.webp ├── intro.md ├── quick-start.md ├── roadmap.md ├── size.md ├── support.md └── theming │ ├── README.md │ ├── color.md │ ├── images │ ├── color-scheme-dark.webp │ ├── color-scheme-light.webp │ ├── theming.webp │ └── token-types.webp │ ├── shape.md │ └── typography.md ├── elevation ├── _elevation.scss ├── demo │ ├── demo.ts │ ├── project.json │ └── stories.ts ├── elevation.ts ├── elevation_test.ts └── internal │ ├── _elevation.scss │ ├── elevation-styles.scss │ └── elevation.ts ├── fab ├── _fab.scss ├── branded-fab.ts ├── demo │ ├── demo.ts │ ├── project.json │ └── stories.ts ├── fab.ts ├── fab_test.ts ├── harness.ts └── internal │ ├── _fab-branded.scss │ ├── _fab.scss │ ├── _shared.scss │ ├── fab-branded-styles.scss │ ├── fab-styles.scss │ ├── fab.ts │ ├── forced-colors-styles.scss │ ├── shared-styles.scss │ └── shared.ts ├── field ├── _filled-field.scss ├── _outlined-field.scss ├── demo │ ├── demo.ts │ ├── project.json │ └── stories.ts ├── filled-field.ts ├── filled-field_test.ts ├── harness.ts ├── internal │ ├── _content.scss │ ├── _filled-field.scss │ ├── _label.scss │ ├── _outlined-field.scss │ ├── _shared.scss │ ├── _supporting-text.scss │ ├── field.ts │ ├── field_test.ts │ ├── filled-field.ts │ ├── filled-styles.scss │ ├── outlined-field.ts │ ├── outlined-styles.scss │ └── shared-styles.scss ├── outlined-field.ts └── outlined-field_test.ts ├── focus ├── _focus-ring.scss ├── demo │ ├── demo.ts │ ├── project.json │ └── stories.ts ├── internal │ ├── _focus-ring.scss │ ├── focus-ring-styles.scss │ ├── focus-ring.ts │ └── focus-ring_test.ts ├── md-focus-ring.ts └── md-focus-ring_test.ts ├── icon ├── _icon.scss ├── icon.ts ├── icon_test.ts └── internal │ ├── _icon.scss │ ├── icon-styles.scss │ └── icon.ts ├── iconbutton ├── _filled-icon-button.scss ├── _filled-tonal-icon-button.scss ├── _icon-button.scss ├── _outlined-icon-button.scss ├── demo │ ├── demo.ts │ ├── project.json │ └── stories.ts ├── filled-icon-button.ts ├── filled-icon-button_test.ts ├── filled-tonal-icon-button.ts ├── filled-tonal-icon-button_test.ts ├── harness.ts ├── icon-button.ts ├── icon-button_test.ts ├── internal │ ├── _filled-icon-button.scss │ ├── _filled-tonal-icon-button.scss │ ├── _icon-button.scss │ ├── _outlined-icon-button.scss │ ├── _shared.scss │ ├── filled-styles.scss │ ├── filled-tonal-styles.scss │ ├── icon-button.ts │ ├── outlined-styles.scss │ ├── shared-styles.scss │ └── standard-styles.scss ├── outlined-icon-button.ts └── outlined-icon-button_test.ts ├── internal ├── README.md ├── aria │ ├── aria.ts │ ├── aria_test.ts │ ├── delegate.ts │ └── delegate_test.ts ├── controller │ ├── attachable-controller.ts │ ├── form-submitter.ts │ ├── form-submitter_test.ts │ ├── is-rtl.ts │ ├── is-rtl_test.ts │ ├── string-converter.ts │ └── string-converter_test.ts ├── events │ ├── dispatch-hooks.ts │ ├── dispatch-hooks_test.ts │ ├── form-label-activation.ts │ ├── form-label-activation_test.ts │ ├── redispatch-event.ts │ └── redispatch-event_test.ts ├── motion │ ├── _animation.scss │ ├── animation.ts │ └── animation_test.ts └── sass │ ├── _string-ext.scss │ ├── _var.scss │ └── test │ ├── _string-ext.test.scss │ └── test.scss ├── labs ├── README.md ├── badge │ ├── _badge.scss │ ├── badge.ts │ ├── badge_test.ts │ └── internal │ │ ├── _badge.scss │ │ ├── badge-styles.scss │ │ └── badge.ts ├── behaviors │ ├── constraint-validation.ts │ ├── constraint-validation_test.ts │ ├── custom-state-set.ts │ ├── custom-state-set_test.ts │ ├── element-internals.ts │ ├── element-internals_test.ts │ ├── focusable.ts │ ├── focusable_test.ts │ ├── form-associated.ts │ ├── form-associated_test.ts │ ├── mixin.ts │ ├── on-report-validity.ts │ ├── on-report-validity_test.ts │ └── validators │ │ ├── checkbox-validator.ts │ │ ├── checkbox-validator_test.ts │ │ ├── radio-validator.ts │ │ ├── radio-validator_test.ts │ │ ├── select-validator.ts │ │ ├── select-validator_test.ts │ │ ├── text-field-validator.ts │ │ ├── text-field-validator_test.ts │ │ ├── validator.ts │ │ └── validator_test.ts ├── card │ ├── _elevated-card.scss │ ├── _filled-card.scss │ ├── _outlined-card.scss │ ├── demo │ │ ├── demo.ts │ │ ├── project.json │ │ └── stories.ts │ ├── elevated-card.ts │ ├── elevated-card_test.ts │ ├── filled-card.ts │ ├── filled-card_test.ts │ ├── internal │ │ ├── _elevated-card.scss │ │ ├── _filled-card.scss │ │ ├── _outlined-card.scss │ │ ├── _shared.scss │ │ ├── card.ts │ │ ├── elevated-styles.scss │ │ ├── filled-styles.scss │ │ ├── outlined-styles.scss │ │ └── shared-styles.scss │ ├── outlined-card.ts │ └── outlined-card_test.ts ├── item │ ├── demo │ │ ├── demo.ts │ │ ├── project.json │ │ └── stories.ts │ ├── internal │ │ ├── _item.scss │ │ ├── item-styles.scss │ │ └── item.ts │ └── item.ts ├── navigationbar │ ├── _navigation-bar.scss │ ├── demo │ │ ├── demo.ts │ │ ├── project.json │ │ └── stories.ts │ ├── harness.ts │ ├── internal │ │ ├── _navigation-bar.scss │ │ ├── constants.ts │ │ ├── navigation-bar-styles.scss │ │ ├── navigation-bar.ts │ │ └── state.ts │ ├── md-navigation-bar_test.ts │ └── navigation-bar.ts ├── navigationdrawer │ ├── _navigation-drawer-modal.scss │ ├── _navigation-drawer.scss │ ├── internal │ │ ├── _navigation-drawer-modal.scss │ │ ├── _navigation-drawer.scss │ │ ├── _shared.scss │ │ ├── navigation-drawer-modal-styles.scss │ │ ├── navigation-drawer-modal.ts │ │ ├── navigation-drawer-styles.scss │ │ ├── navigation-drawer.ts │ │ └── shared-styles.scss │ ├── navigation-drawer-modal.ts │ └── navigation-drawer.ts ├── navigationtab │ ├── _navigation-tab.scss │ ├── harness.ts │ ├── internal │ │ ├── _navigation-tab.scss │ │ ├── navigation-tab-styles.scss │ │ ├── navigation-tab.ts │ │ └── state.ts │ ├── md-navigation-tab_test.ts │ └── navigation-tab.ts ├── segmentedbutton │ ├── internal │ │ ├── _outlined-segmented-button.scss │ │ ├── _shared.scss │ │ ├── outlined-segmented-button.ts │ │ ├── outlined-styles.scss │ │ ├── segmented-button.ts │ │ └── shared-styles.scss │ └── outlined-segmented-button.ts └── segmentedbuttonset │ ├── demo │ ├── demo.ts │ ├── project.json │ └── stories.ts │ ├── internal │ ├── _outlined-segmented-button-set.scss │ ├── _shared.scss │ ├── outlined-segmented-button-set.ts │ ├── outlined-styles.scss │ ├── segmented-button-set.ts │ └── shared-styles.scss │ └── outlined-segmented-button-set.ts ├── list ├── _list-item.scss ├── _list.scss ├── demo │ ├── demo.ts │ ├── project.json │ └── stories.ts ├── harness.ts ├── internal │ ├── _list.scss │ ├── list-controller.ts │ ├── list-navigation-helpers.ts │ ├── list-styles.scss │ ├── list.ts │ └── listitem │ │ ├── _list-item.scss │ │ ├── harness.ts │ │ ├── list-item-styles.scss │ │ └── list-item.ts ├── list-item.ts ├── list-item_test.ts ├── list.ts ├── list_test.ts └── test │ ├── assets.ts │ └── window_size.json ├── menu ├── _menu-item.scss ├── _menu.scss ├── demo │ ├── demo.ts │ ├── project.json │ └── stories.ts ├── harness.ts ├── internal │ ├── _menu.scss │ ├── controllers │ │ ├── menuItemController.ts │ │ ├── shared.ts │ │ ├── surfacePositionController.ts │ │ └── typeaheadController.ts │ ├── menu-styles.scss │ ├── menu.ts │ ├── menuitem │ │ ├── _menu-item.scss │ │ ├── harness.ts │ │ ├── menu-item-styles.scss │ │ └── menu-item.ts │ ├── submenu │ │ ├── _sub-menu.scss │ │ ├── sub-menu-styles.scss │ │ └── sub-menu.ts │ └── types.ts ├── menu-item.ts ├── menu.ts ├── menu_test.ts ├── sub-menu.ts └── test │ └── window_size.json ├── migrations └── v2 │ ├── README.md │ ├── query-selector-aria.ts │ └── query-selector-aria_test.ts ├── package-lock.json ├── package.json ├── progress ├── _circular-progress.scss ├── _linear-progress.scss ├── circular-progress.ts ├── circular-progress_test.ts ├── demo │ ├── demo.ts │ ├── project.json │ └── stories.ts ├── harness.ts ├── internal │ ├── _circular-progress.scss │ ├── _linear-progress.scss │ ├── circular-progress-styles.scss │ ├── circular-progress.ts │ ├── linear-progress-styles.scss │ ├── linear-progress.ts │ └── progress.ts ├── linear-progress.ts └── linear-progress_test.ts ├── radio ├── _radio.scss ├── demo │ ├── demo.ts │ ├── project.json │ └── stories.ts ├── harness.ts ├── internal │ ├── _radio.scss │ ├── radio-styles.scss │ ├── radio.ts │ └── single-selection-controller.ts ├── radio.ts └── radio_test.ts ├── release-please-config.json ├── ripple ├── _ripple.scss ├── demo │ ├── demo.ts │ ├── project.json │ └── stories.ts ├── internal │ ├── _ripple.scss │ ├── ripple-styles.scss │ ├── ripple.ts │ └── ripple_test.ts ├── ripple.ts └── ripple_test.ts ├── scripts ├── analyzer │ ├── analyze-element.ts │ ├── element-docs-map.ts │ ├── markdown-tree-builder.ts │ └── update-docs.ts ├── component-custom-elements.ts ├── css-to-ts.ts ├── size │ ├── bundle-size.ts │ └── update-size.ts └── tsconfig.json ├── select ├── _filled-select.scss ├── _outlined-select.scss ├── demo │ ├── demo.ts │ ├── project.json │ └── stories.ts ├── filled-select.ts ├── harness.ts ├── internal │ ├── _filled-select.scss │ ├── _outlined-select.scss │ ├── _shared.scss │ ├── filled-select-styles.scss │ ├── filled-select.ts │ ├── outlined-select-styles.scss │ ├── outlined-select.ts │ ├── select.ts │ ├── selectoption │ │ ├── harness.ts │ │ ├── select-option.ts │ │ └── selectOptionController.ts │ ├── shared-styles.scss │ └── shared.ts ├── outlined-select.ts ├── select-option.ts ├── select_test.ts └── test │ ├── assets.ts │ └── window_size.json ├── slider ├── _slider.scss ├── demo │ ├── demo.ts │ ├── project.json │ └── stories.ts ├── harness.ts ├── internal │ ├── _slider.scss │ ├── forced-colors-styles.scss │ ├── slider-styles.scss │ └── slider.ts ├── slider.ts └── slider_test.ts ├── switch ├── _switch.scss ├── demo │ ├── demo.ts │ ├── project.json │ └── stories.ts ├── harness.ts ├── internal │ ├── README.md │ ├── _handle.scss │ ├── _icon.scss │ ├── _switch.scss │ ├── _track.scss │ ├── switch-styles.scss │ ├── switch.ts │ └── switch_test.ts ├── switch.ts └── switch_test.ts ├── tabs ├── _primary-tab.scss ├── _secondary-tab.scss ├── demo │ ├── demo.ts │ ├── project.json │ └── stories.ts ├── harness.ts ├── internal │ ├── _primary-tab.scss │ ├── _secondary-tab.scss │ ├── _tab.scss │ ├── _tabs.scss │ ├── primary-tab-styles.scss │ ├── primary-tab.ts │ ├── secondary-tab-styles.scss │ ├── secondary-tab.ts │ ├── tab-styles.scss │ ├── tab.ts │ ├── tabs-styles.scss │ └── tabs.ts ├── primary-tab.ts ├── secondary-tab.ts ├── tabs.ts ├── tabs_test.ts └── test │ └── window_size.json ├── testing ├── environment.ts ├── forms.ts ├── harness.ts ├── skip-animations.ts ├── skip-animations_test.ts ├── table │ ├── _test-table.scss │ ├── internal │ │ ├── _test-table.scss │ │ ├── test-table-styles.scss │ │ ├── test-table.ts │ │ └── test-table_test.ts │ └── test-table.ts ├── templates.ts ├── tokens.ts ├── tokens_test.ts └── transform-pseudo-classes.ts ├── textfield ├── _filled-text-field.scss ├── _outlined-text-field.scss ├── demo │ ├── demo.ts │ ├── project.json │ └── stories.ts ├── filled-text-field.ts ├── filled-text-field_test.ts ├── harness.ts ├── harness_test.ts ├── internal │ ├── _filled-text-field.scss │ ├── _icon.scss │ ├── _input.scss │ ├── _outlined-text-field.scss │ ├── _shared.scss │ ├── filled-styles.scss │ ├── filled-text-field.ts │ ├── outlined-styles.scss │ ├── outlined-text-field.ts │ ├── shared-styles.scss │ ├── text-field.ts │ └── text-field_test.ts ├── outlined-text-field.ts └── outlined-text-field_test.ts ├── tokens ├── _index.scss ├── _md-comp-assist-chip.scss ├── _md-comp-badge.scss ├── _md-comp-checkbox.scss ├── _md-comp-circular-progress.scss ├── _md-comp-dialog.scss ├── _md-comp-divider.scss ├── _md-comp-elevated-button.scss ├── _md-comp-elevated-card.scss ├── _md-comp-elevation.scss ├── _md-comp-fab-branded.scss ├── _md-comp-fab.scss ├── _md-comp-filled-button.scss ├── _md-comp-filled-card.scss ├── _md-comp-filled-field.scss ├── _md-comp-filled-icon-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-focus-ring.scss ├── _md-comp-full-screen-dialog.scss ├── _md-comp-icon-button.scss ├── _md-comp-icon.scss ├── _md-comp-input-chip.scss ├── _md-comp-item.scss ├── _md-comp-linear-progress.scss ├── _md-comp-list-item.scss ├── _md-comp-list.scss ├── _md-comp-menu-item.scss ├── _md-comp-menu.scss ├── _md-comp-navigation-bar.scss ├── _md-comp-navigation-drawer.scss ├── _md-comp-outlined-button.scss ├── _md-comp-outlined-card.scss ├── _md-comp-outlined-field.scss ├── _md-comp-outlined-icon-button.scss ├── _md-comp-outlined-segmented-button.scss ├── _md-comp-outlined-select.scss ├── _md-comp-outlined-text-field.scss ├── _md-comp-primary-tab.scss ├── _md-comp-radio.scss ├── _md-comp-ripple.scss ├── _md-comp-secondary-tab.scss ├── _md-comp-slider.scss ├── _md-comp-suggestion-chip.scss ├── _md-comp-switch.scss ├── _md-comp-test-table.scss ├── _md-comp-text-button.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 ├── internal │ ├── _shape.scss │ └── _validate.scss └── v0_192 │ ├── _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 ├── tsconfig.json ├── typography ├── _typeface.scss ├── _typescale.scss └── md-typescale-styles.scss └── web-test-runner.config.js /.github/ISSUE_TEMPLATE/config.yml: -------------------------------------------------------------------------------- 1 | blank_issues_enabled: false 2 | contact_links: 3 | - name: ❓ Questions, Help, and Advice 4 | url: https://github.com/material-components/material-web/discussions 5 | about: For general support, please refer to the Material Web discussion board. 6 | 7 | - name: 💬 Chat 8 | url: https://lit.dev/discord/ 9 | about: Alternatively, you can join the Lit Discord and join the `#material` channel to talk to the team. 10 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/documentation-bug.yaml: -------------------------------------------------------------------------------- 1 | name: 🐛 Documentation Bug 2 | description: Report a bug that affects Material Web documentation (https://material-web.dev/) 3 | 4 | body: 5 | - type: textarea 6 | id: description 7 | validations: 8 | required: true 9 | attributes: 10 | label: Description 11 | description: | 12 | Please describe the documentation issue in as much detail as possible. 13 | placeholder: | 14 | Add issue description here. 15 | 16 | - type: textarea 17 | id: environment 18 | attributes: 19 | label: Browser/OS Environment 20 | description: | 21 | Please list which browser and operating system combination(s) you are using. 22 | placeholder: | 23 | Browser: Chrome 103.0.5060.53 24 | OS: macOS 12.4 25 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature.yaml: -------------------------------------------------------------------------------- 1 | name: ✨ Feature Request 2 | description: Request a feature to be added to Material Web Components. 3 | 4 | body: 5 | - type: textarea 6 | id: description 7 | validations: 8 | required: true 9 | attributes: 10 | label: Description 11 | description: | 12 | Please describe the feature request in as much detail as possible. Include why the feature is needed, and example code or screenshots to help describe it. 13 | placeholder: | 14 | Add support for '...'. 15 | This is needed to '...'. 16 | Requirements, code examples, and screenshots that help describe the feature. 17 | -------------------------------------------------------------------------------- /.github/release-please.yml: -------------------------------------------------------------------------------- 1 | handleGHRelease: true 2 | manifest: true 3 | -------------------------------------------------------------------------------- /.github/workflows/build-catalog.yml: -------------------------------------------------------------------------------- 1 | name: Build Catalog 2 | 3 | on: [push] 4 | 5 | jobs: 6 | build-catalog: 7 | runs-on: ubuntu-latest 8 | steps: 9 | - uses: actions/checkout@v3 10 | - uses: actions/setup-node@v3 11 | with: 12 | node-version: 18 13 | cache: npm 14 | - uses: google/wireit@setup-github-actions-caching/v2 15 | 16 | - run: npm ci 17 | - run: npm run build:catalog 18 | env: 19 | WIREIT_FAILURES: continue -------------------------------------------------------------------------------- /.github/workflows/commitlint.yml: -------------------------------------------------------------------------------- 1 | name: commitlint 2 | 3 | on: [pull_request] 4 | 5 | jobs: 6 | commitlint: 7 | runs-on: ubuntu-latest 8 | 9 | steps: 10 | - uses: actions/checkout@v3 11 | - uses: actions/setup-node@v3 12 | with: 13 | node-version: 18 14 | cache: npm 15 | 16 | - run: npm install -g @commitlint/cli @commitlint/config-conventional 17 | - run: 'echo "${PR_TITLE}" | commitlint' 18 | env: 19 | PR_TITLE: ${{ github.event.pull_request.title }} 20 | -------------------------------------------------------------------------------- /.github/workflows/publish.yml: -------------------------------------------------------------------------------- 1 | name: Publish 2 | 3 | on: 4 | push: 5 | tags: 6 | - 'v*' 7 | 8 | jobs: 9 | publish: 10 | runs-on: ubuntu-latest 11 | 12 | steps: 13 | - uses: actions/checkout@v3 14 | - uses: actions/setup-node@v3 15 | with: 16 | node-version: 18 17 | cache: npm 18 | - uses: google/wireit@setup-github-actions-caching/v2 19 | 20 | - run: npm ci 21 | - run: npm run build 22 | env: 23 | WIREIT_FAILURES: continue 24 | 25 | - uses: actions/setup-node@v3 26 | with: 27 | node-version: 18 28 | registry-url: 'https://wombat-dressing-room.appspot.com/' 29 | - run: npm publish 30 | env: 31 | NODE_AUTH_TOKEN: ${{ secrets.NODE_AUTH_TOKEN }} 32 | -------------------------------------------------------------------------------- /.github/workflows/test.yml: -------------------------------------------------------------------------------- 1 | name: Tests 2 | 3 | on: [push] 4 | 5 | jobs: 6 | build: 7 | runs-on: ubuntu-latest 8 | 9 | steps: 10 | - uses: actions/checkout@v3 11 | - uses: actions/setup-node@v3 12 | with: 13 | node-version: 18 14 | cache: npm 15 | - uses: google/wireit@setup-github-actions-caching/v2 16 | 17 | - run: npm ci 18 | - run: npm run build 19 | env: 20 | WIREIT_FAILURES: continue 21 | 22 | test: 23 | runs-on: ubuntu-latest 24 | 25 | steps: 26 | - uses: actions/checkout@v3 27 | - uses: actions/setup-node@v3 28 | with: 29 | node-version: 18 30 | cache: npm 31 | - uses: google/wireit@setup-github-actions-caching/v2 32 | 33 | - run: npm ci 34 | - run: npx playwright install --with-deps 35 | - run: npm test 36 | env: 37 | WIREIT_FAILURES: continue 38 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.js 3 | !web-test-runner.config.js 4 | !commitlint.config.js 5 | *.css 6 | *-styles.ts 7 | *.map 8 | *.d.ts 9 | !types/*.d.ts 10 | .wireit/ 11 | *.tsbuildinfo 12 | 13 | !catalog/**/*.css 14 | catalog/_dev 15 | catalog/_prod 16 | catalog/node_modules 17 | catalog/.wireit 18 | catalog/lib/ 19 | catalog/build/ 20 | catalog/site/components/*.md 21 | catalog/site/components/images 22 | catalog/site/theming/*.md 23 | catalog/site/theming/images 24 | catalog/site/about/*.md 25 | catalog/site/about/images 26 | catalog/stories/*/ 27 | !catalog/stories/components/ 28 | !catalog/src/types/**/*.d.ts 29 | -------------------------------------------------------------------------------- /.release-please-manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | ".": "2.3.0" 3 | } 4 | -------------------------------------------------------------------------------- /SECURITY.md: -------------------------------------------------------------------------------- 1 | # Security Policy 2 | 3 | ## Supported Versions 4 | 5 | Security updates are only applied to the latest published version. 6 | 7 | ## Reporting a Vulnerability 8 | 9 | Report vulnerabilities in a private 10 | [GitHub security advisory](https://github.com/material-components/material-web/security/advisories/new). 11 | 12 | **Please do not disclose security vulnerabilities in public issues.** 13 | -------------------------------------------------------------------------------- /button/_elevated-button.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2021 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | @forward './internal/elevated-button' show theme; 7 | -------------------------------------------------------------------------------- /button/_filled-button.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2021 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | @forward './internal/filled-button' show theme; 7 | -------------------------------------------------------------------------------- /button/_filled-tonal-button.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2021 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | @forward './internal/filled-tonal-button' show theme; 7 | -------------------------------------------------------------------------------- /button/_outlined-button.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2021 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | @forward './internal/outlined-button' show theme; 7 | -------------------------------------------------------------------------------- /button/_text-button.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2021 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | @forward './internal/text-button' show theme; 7 | -------------------------------------------------------------------------------- /button/demo/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "/assets/stories/base.json", 3 | "files": { 4 | "demo.ts": { 5 | "hidden": true 6 | }, 7 | "stories.ts": {} 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /button/elevated-button_test.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2023 Google LLC 4 | * SPDX-License-Identifier: Apache-2.0 5 | */ 6 | 7 | // import 'jasmine'; (google3-only) 8 | 9 | import {createTokenTests} from '../testing/tokens.js'; 10 | 11 | import {MdElevatedButton} from './elevated-button.js'; 12 | 13 | describe('', () => { 14 | describe('.styles', () => { 15 | createTokenTests(MdElevatedButton.styles); 16 | }); 17 | }); 18 | -------------------------------------------------------------------------------- /button/filled-button_test.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2023 Google LLC 4 | * SPDX-License-Identifier: Apache-2.0 5 | */ 6 | 7 | // import 'jasmine'; (google3-only) 8 | 9 | import {createTokenTests} from '../testing/tokens.js'; 10 | 11 | import {MdFilledButton} from './filled-button.js'; 12 | 13 | describe('', () => { 14 | describe('.styles', () => { 15 | createTokenTests(MdFilledButton.styles); 16 | }); 17 | }); 18 | -------------------------------------------------------------------------------- /button/filled-tonal-button_test.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2023 Google LLC 4 | * SPDX-License-Identifier: Apache-2.0 5 | */ 6 | 7 | // import 'jasmine'; (google3-only) 8 | 9 | import {createTokenTests} from '../testing/tokens.js'; 10 | 11 | import {MdFilledTonalButton} from './filled-tonal-button.js'; 12 | 13 | describe('', () => { 14 | describe('.styles', () => { 15 | createTokenTests(MdFilledTonalButton.styles); 16 | }); 17 | }); 18 | -------------------------------------------------------------------------------- /button/harness.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2021 Google LLC 4 | * SPDX-License-Identifier: Apache-2.0 5 | */ 6 | 7 | import {Harness} from '../testing/harness.js'; 8 | 9 | import {Button} from './internal/button.js'; 10 | 11 | /** 12 | * Test harness for buttons. 13 | */ 14 | export class ButtonHarness extends Harness