├── .release-please-manifest.json ├── .github ├── release-please.yml └── workflows │ ├── build-catalog.yml │ ├── commitlint.yml │ ├── deploy-catalog.yml │ ├── publish.yml │ └── test.yml ├── docs ├── images │ ├── color-scheme-dark.png │ └── color-scheme-light.png └── components │ └── images │ ├── button │ ├── hero.png │ ├── types.png │ ├── usage.png │ ├── usage-icon.png │ ├── theming-text-button.png │ ├── usage-filled-button.png │ ├── usage-text-button.png │ ├── theming-filled-button.png │ ├── usage-elevated-button.png │ ├── usage-outlined-button.png │ ├── theming-elevated-button.png │ ├── theming-outlined-button.png │ ├── usage-filled-tonal-button.png │ └── theming-filled-tonal-button.png │ ├── focus │ ├── hero.gif │ ├── usage.gif │ ├── theming.gif │ ├── usage-inward.gif │ └── usage-animation.gif │ ├── icon │ ├── hero.gif │ ├── usage.png │ ├── theming.png │ ├── usage_sharp.png │ ├── usage_filled.png │ └── usage_rounded.png │ ├── ripple │ ├── hero.gif │ ├── usage.gif │ ├── theming.gif │ └── usage-unbounded.gif │ ├── checkbox │ ├── hero.png │ ├── theming.png │ ├── usage.png │ └── usage-label.png │ ├── divider │ ├── hero.png │ ├── usage.png │ ├── theming.png │ ├── usage-inset.png │ └── usage-inset-start.png │ ├── elevation │ ├── hero.png │ ├── usage.png │ ├── theming.png │ └── usage-animation.gif │ ├── iconbutton │ ├── hero.png │ ├── usage.png │ ├── buttons.png │ ├── usage-filled.png │ ├── usage-toggle.png │ ├── theming-filled.png │ ├── usage-outlined.png │ ├── usage-standard.png │ ├── theming-outlined.png │ ├── theming-standard.png │ ├── theming-filled-tonal.png │ └── usage-filled-tonal.png │ ├── circularprogress │ ├── hero.png │ ├── usage.gif │ ├── theming.png │ └── usage-four-color.gif │ └── linearprogress │ ├── hero.gif │ ├── usage.gif │ ├── theming.png │ └── usage-four-color.gif ├── catalog ├── site │ ├── fonts │ │ └── google-sans │ │ │ ├── mono.woff2 │ │ │ └── regular.woff2 │ ├── components │ │ └── components.json │ ├── css │ │ └── home-page.css │ ├── index.html │ └── _includes │ │ └── layouts │ │ └── components.html ├── src │ ├── hydration-entrypoints │ │ ├── components │ │ │ ├── checkbox.ts │ │ │ ├── icon-button.ts │ │ │ └── button.ts │ │ ├── copy-code-button.ts │ │ ├── menu.ts │ │ ├── navigation.ts │ │ └── playground-elements.ts │ ├── pages │ │ └── home-page.ts │ ├── signals │ │ ├── drawer-open-state.ts │ │ └── inert.ts │ ├── ssr-utils │ │ ├── lit-hydrate-support.ts │ │ ├── lit-island.ts │ │ └── dsd-polyfill.ts │ ├── inline │ │ └── apply-saved-theme.ts │ └── svg │ │ └── material-design-logo.ts ├── stories │ ├── index.ts │ ├── base.json │ └── index.html ├── tsconfig.json ├── scripts │ └── copy-stories.mjs └── eleventy-helpers │ └── transforms │ └── minify-html.cjs ├── icon ├── _icon.scss ├── lib │ ├── icon-styles.scss │ ├── icon.ts │ └── _md-comp-icon.scss └── icon.ts ├── list ├── _list.scss ├── _list-item.scss ├── demo │ └── project.json ├── lib │ ├── list-styles.scss │ ├── listitem │ │ ├── list-item-styles.scss │ │ ├── harness.ts │ │ ├── forced-colors-styles.scss │ │ └── list-item-only.ts │ └── listitemlink │ │ └── list-item-link-only.ts ├── test │ └── window_size.json ├── list-item_test.ts ├── list_test.ts └── harness.ts ├── menu ├── _menu.scss ├── _menu-item.scss ├── demo │ └── project.json ├── lib │ ├── menu-styles.scss │ ├── menuitem │ │ ├── menu-item-styles.scss │ │ ├── harness.ts │ │ └── forced-colors-styles.scss │ ├── forced-colors-styles.scss │ ├── submenuitem │ │ └── harness.ts │ └── types.ts ├── test │ └── window_size.json └── menu_test.ts ├── tabs ├── _tab.scss ├── demo │ └── project.json ├── lib │ ├── tab-styles.scss │ ├── tabs-styles.scss │ └── _tabs.scss ├── test │ └── window_size.json ├── tab.ts └── tabs.ts ├── radio ├── _radio.scss ├── demo │ ├── project.json │ └── demo.ts ├── lib │ ├── radio-styles.scss │ └── forced-colors-styles.scss └── harness.ts ├── dialog ├── _dialog.scss ├── demo │ └── project.json ├── lib │ └── dialog-styles.scss └── test │ └── window_size.json ├── divider ├── _divider.scss ├── demo │ ├── project.json │ └── demo.ts ├── lib │ ├── divider-styles.scss │ └── divider.ts ├── divider_test.ts └── divider.ts ├── labs ├── badge │ ├── _badge.scss │ ├── lib │ │ ├── badge-styles.scss │ │ └── badge.ts │ ├── badge_test.ts │ └── badge.ts ├── navigationbar │ ├── _navigation-bar.scss │ ├── demo │ │ └── project.json │ ├── lib │ │ ├── navigation-bar-styles.scss │ │ ├── state.ts │ │ └── constants.ts │ ├── navigation-bar.ts │ └── harness.ts ├── navigationtab │ ├── _navigation-tab.scss │ ├── lib │ │ ├── navigation-tab-styles.scss │ │ └── state.ts │ ├── harness.ts │ └── navigation-tab.ts ├── navigationdrawer │ ├── _navigation-drawer.scss │ ├── _navigation-drawer-modal.scss │ ├── lib │ │ ├── shared-styles.scss │ │ ├── navigation-drawer-styles.scss │ │ ├── navigation-drawer-modal-styles.scss │ │ └── _shared.scss │ ├── navigation-drawer.ts │ └── navigation-drawer-modal.ts ├── README.md ├── segmentedbuttonset │ ├── demo │ │ ├── project.json │ │ └── demo.ts │ ├── lib │ │ ├── shared-styles.scss │ │ ├── outlined-styles.scss │ │ ├── outlined-segmented-button-set.ts │ │ └── _shared.scss │ └── outlined-segmented-button-set.ts └── segmentedbutton │ ├── lib │ ├── shared-styles.scss │ ├── outlined-styles.scss │ └── outlined-segmented-button.ts │ └── outlined-segmented-button.ts ├── ripple ├── _ripple.scss ├── demo │ └── project.json ├── lib │ └── ripple-styles.scss └── ripple_test.ts ├── slider ├── _slider.scss ├── lib │ └── slider-styles.scss └── demo │ └── project.json ├── switch ├── _switch.scss ├── demo │ └── project.json ├── lib │ └── switch-styles.scss ├── harness.ts └── switch.ts ├── checkbox ├── _checkbox.scss ├── demo │ ├── project.json │ └── demo.ts ├── lib │ └── checkbox-styles.scss ├── harness.ts └── checkbox.ts ├── chips ├── _assist-chip.scss ├── _filter-chip.scss ├── _input-chip.scss ├── _suggestion-chip.scss ├── demo │ ├── project.json │ └── demo.ts ├── lib │ ├── shared-styles.scss │ ├── _chip-set.scss │ ├── chip-set-styles.scss │ ├── elevated-styles.scss │ ├── assist-styles.scss │ ├── filter-styles.scss │ ├── input-styles.scss │ ├── selectable-styles.scss │ ├── trailing-icon-styles.scss │ ├── suggestion-styles.scss │ └── suggestion-chip.ts ├── input-chip_test.ts ├── assist-chip_test.ts ├── filter-chip_test.ts ├── suggestion-chip_test.ts ├── chip-set.ts ├── assist-chip.ts ├── suggestion-chip.ts ├── input-chip.ts └── filter-chip.ts ├── elevation ├── _elevation.scss ├── demo │ ├── project.json │ └── demo.ts ├── lib │ ├── elevation-styles.scss │ └── elevation.ts ├── elevation_test.ts └── elevation.ts ├── focus ├── _focus-ring.scss ├── demo │ └── project.json ├── lib │ └── focus-ring-styles.scss ├── focus-ring_test.ts └── focus-ring.ts ├── button ├── _filled-button.scss ├── _text-button.scss ├── _tonal-button.scss ├── _elevated-button.scss ├── _outlined-button.scss ├── demo │ ├── project.json │ └── demo.ts ├── lib │ ├── text-styles.scss │ ├── filled-styles.scss │ ├── tonal-styles.scss │ ├── elevated-styles.scss │ ├── outlined-styles.scss │ ├── shared-elevation-styles.scss │ ├── shared-styles.scss │ ├── text-button.ts │ ├── _touch-target.scss │ ├── outlined-button.ts │ ├── filled-button.ts │ ├── tonal-button.ts │ └── elevated-button.ts └── harness.ts ├── field ├── _filled-field.scss ├── _outlined-field.scss ├── lib │ ├── shared-styles.scss │ ├── filled-styles.scss │ ├── outlined-styles.scss │ ├── filled-field.ts │ └── outlined-field.ts ├── demo │ └── project.json ├── filled-field_test.ts ├── outlined-field_test.ts ├── filled-field.ts ├── outlined-field.ts └── harness.ts ├── select ├── _filled-select.scss ├── _outlined-select.scss ├── demo │ └── project.json ├── lib │ ├── shared-styles.scss │ ├── filled-select-styles.scss │ ├── outlined-select-styles.scss │ ├── selectoption │ │ └── harness.ts │ ├── filled-select.ts │ ├── outlined-select.ts │ ├── _shared.scss │ ├── outlined-forced-colors-styles.scss │ └── filled-forced-colors-styles.scss ├── test │ └── window_size.json └── select_test.ts ├── testing └── table │ ├── _test-table.scss │ ├── lib │ └── test-table-styles.scss │ └── test-table.ts ├── iconbutton ├── _filled-icon-button.scss ├── _outlined-icon-button.scss ├── _standard-icon-button.scss ├── _filled-tonal-icon-button.scss ├── demo │ └── project.json ├── lib │ ├── shared-styles.scss │ ├── filled-styles.scss │ ├── outlined-styles.scss │ ├── standard-styles.scss │ └── filled-tonal-styles.scss └── harness.ts ├── linearprogress ├── _linear-progress.scss ├── lib │ └── linear-progress-styles.scss ├── demo │ └── project.json ├── linear-progress_test.ts ├── harness.ts └── linear-progress.ts ├── textfield ├── _filled-text-field.scss ├── _outlined-text-field.scss ├── demo │ └── project.json ├── lib │ ├── shared-styles.scss │ ├── filled-styles.scss │ ├── outlined-styles.scss │ ├── filled-text-field.ts │ ├── outlined-text-field.ts │ ├── _icon.scss │ ├── _shared.scss │ ├── outlined-forced-colors-styles.scss │ └── filled-forced-colors-styles.scss ├── filled-text-field_test.ts └── outlined-text-field_test.ts ├── circularprogress ├── _circular-progress.scss ├── demo │ └── project.json ├── lib │ └── circular-progress-styles.scss ├── circular-progress_test.ts └── harness.ts ├── .npmignore ├── internal ├── sass │ └── test │ │ └── test.scss ├── README.md ├── controller │ ├── string-converter.ts │ ├── is-rtl.ts │ ├── is-rtl_test.ts │ └── string-converter_test.ts └── motion │ └── _animation.scss ├── fab ├── _fab.scss ├── demo │ └── project.json ├── lib │ ├── fab-styles.scss │ ├── shared-styles.scss │ ├── fab-branded-styles.scss │ ├── forced-colors-styles.scss │ └── fab.ts └── harness.ts ├── release-please-config.json ├── tokens ├── _md-sys-shape.scss ├── _md-sys-state.scss ├── _md-ref-palette.scss ├── _md-sys-motion.scss ├── _md-comp-scrim.scss ├── _md-comp-sheet-floating.scss ├── _md-sys-color.scss ├── _md-comp-sheet-bottom.scss ├── _md-comp-bottom-app-bar.scss ├── _md-comp-plain-tooltip.scss ├── _md-comp-elevation.scss ├── v0_172 │ ├── _md-comp-divider.scss │ ├── _md-comp-scrim.scss │ ├── _md-sys-state.scss │ ├── _md-sys-elevation.scss │ ├── _md-ref-typeface.scss │ ├── _md-comp-sheet-floating.scss │ └── _md-comp-bottom-app-bar.scss ├── _md-comp-divider.scss ├── _md-comp-banner.scss ├── _md-comp-data-table.scss ├── _md-comp-filled-card.scss ├── _md-comp-carousel-item.scss ├── _md-comp-elevated-card.scss ├── _md-comp-outlined-card.scss ├── _md-comp-search-view.scss ├── _md-comp-date-input-modal.scss ├── _md-comp-outlined-menu-button.scss ├── _md-comp-standard-menu-button.scss ├── _md-comp-top-app-bar-large.scss ├── _md-comp-top-app-bar-small.scss ├── _md-comp-top-app-bar-medium.scss ├── _md-comp-snackbar.scss ├── _md-comp-search-bar.scss ├── _md-comp-sheet-side.scss ├── _md-comp-time-input.scss ├── _md-comp-top-app-bar-small-centered.scss ├── _md-comp-rich-tooltip.scss ├── _md-comp-time-picker.scss ├── _md-comp-navigation-bar.scss ├── _md-comp-navigation-rail.scss ├── _md-comp-date-picker-modal.scss ├── _md-comp-navigation-drawer.scss ├── _md-comp-date-picker-docked.scss ├── _md-comp-filled-autocomplete.scss ├── _md-comp-filled-menu-button.scss ├── _md-comp-full-screen-dialog.scss ├── _md-ref-typeface.scss ├── _md-comp-outlined-autocomplete.scss └── _md-sys-elevation.scss ├── .gitignore ├── css-to-ts.js ├── web-test-runner.config.js └── tsconfig.json /.release-please-manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | ".": "1.0.0-pre.10" 3 | } 4 | -------------------------------------------------------------------------------- /.github/release-please.yml: -------------------------------------------------------------------------------- 1 | handleGHRelease: true 2 | manifest: true 3 | -------------------------------------------------------------------------------- /docs/images/color-scheme-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/download/material-web/main/docs/images/color-scheme-dark.png -------------------------------------------------------------------------------- /docs/images/color-scheme-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/download/material-web/main/docs/images/color-scheme-light.png -------------------------------------------------------------------------------- /docs/components/images/button/hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/download/material-web/main/docs/components/images/button/hero.png -------------------------------------------------------------------------------- /docs/components/images/focus/hero.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/download/material-web/main/docs/components/images/focus/hero.gif -------------------------------------------------------------------------------- /docs/components/images/focus/usage.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/download/material-web/main/docs/components/images/focus/usage.gif -------------------------------------------------------------------------------- /docs/components/images/icon/hero.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/download/material-web/main/docs/components/images/icon/hero.gif -------------------------------------------------------------------------------- /docs/components/images/icon/usage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/download/material-web/main/docs/components/images/icon/usage.png -------------------------------------------------------------------------------- /docs/components/images/ripple/hero.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/download/material-web/main/docs/components/images/ripple/hero.gif -------------------------------------------------------------------------------- /docs/components/images/button/types.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/download/material-web/main/docs/components/images/button/types.png -------------------------------------------------------------------------------- /docs/components/images/button/usage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/download/material-web/main/docs/components/images/button/usage.png -------------------------------------------------------------------------------- /docs/components/images/checkbox/hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/download/material-web/main/docs/components/images/checkbox/hero.png -------------------------------------------------------------------------------- /docs/components/images/divider/hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/download/material-web/main/docs/components/images/divider/hero.png -------------------------------------------------------------------------------- /docs/components/images/divider/usage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/download/material-web/main/docs/components/images/divider/usage.png -------------------------------------------------------------------------------- /docs/components/images/focus/theming.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/download/material-web/main/docs/components/images/focus/theming.gif -------------------------------------------------------------------------------- /docs/components/images/icon/theming.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/download/material-web/main/docs/components/images/icon/theming.png -------------------------------------------------------------------------------- /docs/components/images/ripple/usage.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/download/material-web/main/docs/components/images/ripple/usage.gif -------------------------------------------------------------------------------- /catalog/site/fonts/google-sans/mono.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/download/material-web/main/catalog/site/fonts/google-sans/mono.woff2 -------------------------------------------------------------------------------- /docs/components/images/checkbox/theming.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/download/material-web/main/docs/components/images/checkbox/theming.png -------------------------------------------------------------------------------- /docs/components/images/checkbox/usage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/download/material-web/main/docs/components/images/checkbox/usage.png -------------------------------------------------------------------------------- /docs/components/images/divider/theming.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/download/material-web/main/docs/components/images/divider/theming.png -------------------------------------------------------------------------------- /docs/components/images/elevation/hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/download/material-web/main/docs/components/images/elevation/hero.png -------------------------------------------------------------------------------- /docs/components/images/elevation/usage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/download/material-web/main/docs/components/images/elevation/usage.png -------------------------------------------------------------------------------- /docs/components/images/icon/usage_sharp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/download/material-web/main/docs/components/images/icon/usage_sharp.png -------------------------------------------------------------------------------- /docs/components/images/iconbutton/hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/download/material-web/main/docs/components/images/iconbutton/hero.png -------------------------------------------------------------------------------- /docs/components/images/iconbutton/usage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/download/material-web/main/docs/components/images/iconbutton/usage.png -------------------------------------------------------------------------------- /docs/components/images/ripple/theming.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/download/material-web/main/docs/components/images/ripple/theming.gif -------------------------------------------------------------------------------- /catalog/site/fonts/google-sans/regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/download/material-web/main/catalog/site/fonts/google-sans/regular.woff2 -------------------------------------------------------------------------------- /docs/components/images/button/usage-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/download/material-web/main/docs/components/images/button/usage-icon.png -------------------------------------------------------------------------------- /docs/components/images/elevation/theming.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/download/material-web/main/docs/components/images/elevation/theming.png -------------------------------------------------------------------------------- /docs/components/images/focus/usage-inward.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/download/material-web/main/docs/components/images/focus/usage-inward.gif -------------------------------------------------------------------------------- /docs/components/images/icon/usage_filled.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/download/material-web/main/docs/components/images/icon/usage_filled.png -------------------------------------------------------------------------------- /docs/components/images/icon/usage_rounded.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/download/material-web/main/docs/components/images/icon/usage_rounded.png -------------------------------------------------------------------------------- /docs/components/images/iconbutton/buttons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/download/material-web/main/docs/components/images/iconbutton/buttons.png -------------------------------------------------------------------------------- /icon/_icon.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2022 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | @forward './lib/icon' show theme; 7 | -------------------------------------------------------------------------------- /list/_list.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2022 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | @forward './lib/list' show theme; 7 | -------------------------------------------------------------------------------- /menu/_menu.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2023 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | @forward './lib/menu' show theme; 7 | -------------------------------------------------------------------------------- /tabs/_tab.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2023 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | @forward './lib/tab' show theme; 7 | -------------------------------------------------------------------------------- /docs/components/images/checkbox/usage-label.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/download/material-web/main/docs/components/images/checkbox/usage-label.png -------------------------------------------------------------------------------- /docs/components/images/circularprogress/hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/download/material-web/main/docs/components/images/circularprogress/hero.png -------------------------------------------------------------------------------- /docs/components/images/divider/usage-inset.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/download/material-web/main/docs/components/images/divider/usage-inset.png -------------------------------------------------------------------------------- /docs/components/images/focus/usage-animation.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/download/material-web/main/docs/components/images/focus/usage-animation.gif -------------------------------------------------------------------------------- /docs/components/images/linearprogress/hero.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/download/material-web/main/docs/components/images/linearprogress/hero.gif -------------------------------------------------------------------------------- /docs/components/images/linearprogress/usage.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/download/material-web/main/docs/components/images/linearprogress/usage.gif -------------------------------------------------------------------------------- /radio/_radio.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2022 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | @forward './lib/radio' show theme; 7 | -------------------------------------------------------------------------------- /catalog/site/components/components.json: -------------------------------------------------------------------------------- 1 | { 2 | "layout": "layouts/components.html", 3 | "tags": [ 4 | "component" 5 | ], 6 | "hasToc": true 7 | } -------------------------------------------------------------------------------- /dialog/_dialog.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2023 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | @forward './lib/dialog' show theme; 7 | -------------------------------------------------------------------------------- /divider/_divider.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2023 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | @forward './lib/divider' show theme; 7 | -------------------------------------------------------------------------------- /docs/components/images/circularprogress/usage.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/download/material-web/main/docs/components/images/circularprogress/usage.gif -------------------------------------------------------------------------------- /docs/components/images/iconbutton/usage-filled.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/download/material-web/main/docs/components/images/iconbutton/usage-filled.png -------------------------------------------------------------------------------- /docs/components/images/iconbutton/usage-toggle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/download/material-web/main/docs/components/images/iconbutton/usage-toggle.png -------------------------------------------------------------------------------- /docs/components/images/linearprogress/theming.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/download/material-web/main/docs/components/images/linearprogress/theming.png -------------------------------------------------------------------------------- /docs/components/images/ripple/usage-unbounded.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/download/material-web/main/docs/components/images/ripple/usage-unbounded.gif -------------------------------------------------------------------------------- /labs/badge/_badge.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2022 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | @forward './lib/badge' show theme; 7 | -------------------------------------------------------------------------------- /ripple/_ripple.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2022 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | @forward './lib/ripple' show theme; 7 | -------------------------------------------------------------------------------- /slider/_slider.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2023 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | @forward './lib/slider' show theme; 7 | -------------------------------------------------------------------------------- /switch/_switch.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2022 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | @forward './lib/switch' show theme; 7 | -------------------------------------------------------------------------------- /checkbox/_checkbox.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2022 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | @forward './lib/checkbox' show theme; 7 | -------------------------------------------------------------------------------- /chips/_assist-chip.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2023 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | @forward './lib/assist-chip' show theme; 7 | -------------------------------------------------------------------------------- /chips/_filter-chip.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2023 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | @forward './lib/filter-chip' show theme; 7 | -------------------------------------------------------------------------------- /chips/_input-chip.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2023 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | @forward './lib/input-chip' show theme; 7 | -------------------------------------------------------------------------------- /docs/components/images/button/theming-text-button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/download/material-web/main/docs/components/images/button/theming-text-button.png -------------------------------------------------------------------------------- /docs/components/images/button/usage-filled-button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/download/material-web/main/docs/components/images/button/usage-filled-button.png -------------------------------------------------------------------------------- /docs/components/images/button/usage-text-button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/download/material-web/main/docs/components/images/button/usage-text-button.png -------------------------------------------------------------------------------- /docs/components/images/circularprogress/theming.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/download/material-web/main/docs/components/images/circularprogress/theming.png -------------------------------------------------------------------------------- /docs/components/images/divider/usage-inset-start.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/download/material-web/main/docs/components/images/divider/usage-inset-start.png -------------------------------------------------------------------------------- /docs/components/images/elevation/usage-animation.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/download/material-web/main/docs/components/images/elevation/usage-animation.gif -------------------------------------------------------------------------------- /docs/components/images/iconbutton/theming-filled.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/download/material-web/main/docs/components/images/iconbutton/theming-filled.png -------------------------------------------------------------------------------- /docs/components/images/iconbutton/usage-outlined.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/download/material-web/main/docs/components/images/iconbutton/usage-outlined.png -------------------------------------------------------------------------------- /docs/components/images/iconbutton/usage-standard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/download/material-web/main/docs/components/images/iconbutton/usage-standard.png -------------------------------------------------------------------------------- /elevation/_elevation.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2022 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | @forward './lib/elevation' show theme; 7 | -------------------------------------------------------------------------------- /focus/_focus-ring.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2022 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | @forward './lib/focus-ring' show theme; 7 | -------------------------------------------------------------------------------- /button/_filled-button.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2021 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | @forward './lib/filled-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 './lib/text-button' show theme; 7 | -------------------------------------------------------------------------------- /button/_tonal-button.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2021 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | @forward './lib/tonal-button' show theme; 7 | -------------------------------------------------------------------------------- /docs/components/images/button/theming-filled-button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/download/material-web/main/docs/components/images/button/theming-filled-button.png -------------------------------------------------------------------------------- /docs/components/images/button/usage-elevated-button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/download/material-web/main/docs/components/images/button/usage-elevated-button.png -------------------------------------------------------------------------------- /docs/components/images/button/usage-outlined-button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/download/material-web/main/docs/components/images/button/usage-outlined-button.png -------------------------------------------------------------------------------- /docs/components/images/iconbutton/theming-outlined.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/download/material-web/main/docs/components/images/iconbutton/theming-outlined.png -------------------------------------------------------------------------------- /docs/components/images/iconbutton/theming-standard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/download/material-web/main/docs/components/images/iconbutton/theming-standard.png -------------------------------------------------------------------------------- /field/_filled-field.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2021 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | @forward './lib/filled-field' show theme; 7 | -------------------------------------------------------------------------------- /list/_list-item.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2022 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | @forward './lib/listitem/list-item' show theme; 7 | -------------------------------------------------------------------------------- /menu/_menu-item.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2023 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | @forward './lib/menuitem/menu-item' show theme; 7 | -------------------------------------------------------------------------------- /select/_filled-select.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2023 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | @forward './lib/filled-select' show theme; 7 | -------------------------------------------------------------------------------- /button/_elevated-button.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2021 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | @forward './lib/elevated-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 './lib/outlined-button' show theme; 7 | -------------------------------------------------------------------------------- /chips/_suggestion-chip.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2023 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | @forward './lib/suggestion-chip' show theme; 7 | -------------------------------------------------------------------------------- /docs/components/images/button/theming-elevated-button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/download/material-web/main/docs/components/images/button/theming-elevated-button.png -------------------------------------------------------------------------------- /docs/components/images/button/theming-outlined-button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/download/material-web/main/docs/components/images/button/theming-outlined-button.png -------------------------------------------------------------------------------- /docs/components/images/iconbutton/theming-filled-tonal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/download/material-web/main/docs/components/images/iconbutton/theming-filled-tonal.png -------------------------------------------------------------------------------- /docs/components/images/iconbutton/usage-filled-tonal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/download/material-web/main/docs/components/images/iconbutton/usage-filled-tonal.png -------------------------------------------------------------------------------- /docs/components/images/linearprogress/usage-four-color.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/download/material-web/main/docs/components/images/linearprogress/usage-four-color.gif -------------------------------------------------------------------------------- /field/_outlined-field.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2021 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | @forward './lib/outlined-field' show theme; 7 | -------------------------------------------------------------------------------- /select/_outlined-select.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2023 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | @forward './lib/outlined-select' show theme; 7 | -------------------------------------------------------------------------------- /testing/table/_test-table.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2021 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | @forward './lib/test-table' show theme; 7 | -------------------------------------------------------------------------------- /docs/components/images/button/usage-filled-tonal-button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/download/material-web/main/docs/components/images/button/usage-filled-tonal-button.png -------------------------------------------------------------------------------- /docs/components/images/circularprogress/usage-four-color.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/download/material-web/main/docs/components/images/circularprogress/usage-four-color.gif -------------------------------------------------------------------------------- /field/lib/shared-styles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2021 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | @use './shared'; 7 | 8 | @include shared.styles; 9 | -------------------------------------------------------------------------------- /slider/lib/slider-styles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2023 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | @use './slider'; 7 | 8 | @include slider.styles; 9 | -------------------------------------------------------------------------------- /docs/components/images/button/theming-filled-tonal-button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/download/material-web/main/docs/components/images/button/theming-filled-tonal-button.png -------------------------------------------------------------------------------- /iconbutton/_filled-icon-button.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2022 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | @forward './lib/filled-icon-button' show theme; 7 | -------------------------------------------------------------------------------- /labs/navigationbar/_navigation-bar.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2022 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | @forward './lib/navigation-bar' show theme; 7 | -------------------------------------------------------------------------------- /labs/navigationtab/_navigation-tab.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2022 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | @forward './lib/navigation-tab' show theme; 7 | -------------------------------------------------------------------------------- /linearprogress/_linear-progress.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2023 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | @forward './lib/linear-progress' show theme; 7 | -------------------------------------------------------------------------------- /textfield/_filled-text-field.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2021 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | @forward './lib/filled-text-field' show theme; 7 | -------------------------------------------------------------------------------- /textfield/_outlined-text-field.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2021 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | @forward './lib/outlined-text-field' show theme; 7 | -------------------------------------------------------------------------------- /circularprogress/_circular-progress.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2023 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | @forward './lib/circular-progress' show theme; 7 | -------------------------------------------------------------------------------- /iconbutton/_outlined-icon-button.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2022 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | @forward './lib/outlined-icon-button' show theme; 7 | -------------------------------------------------------------------------------- /iconbutton/_standard-icon-button.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2022 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | @forward './lib/standard-icon-button' show theme; 7 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.js 3 | !web-test-runner.config.js 4 | !css-to-ts.js 5 | *.css 6 | *.css.ts 7 | *.map 8 | *.d.ts 9 | !types/*.d.ts 10 | .wireit/ 11 | docs/ 12 | catalog/ -------------------------------------------------------------------------------- /field/lib/filled-styles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2021 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | @use './filled-field'; 7 | 8 | @include filled-field.styles; 9 | -------------------------------------------------------------------------------- /field/lib/outlined-styles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2021 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | @use './outlined-field'; 6 | 7 | @include outlined-field.styles; 8 | -------------------------------------------------------------------------------- /labs/navigationdrawer/_navigation-drawer.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2021 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | @forward './lib/navigation-drawer' show theme; 7 | -------------------------------------------------------------------------------- /iconbutton/_filled-tonal-icon-button.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2022 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | @forward './lib/filled-tonal-icon-button' show theme; 7 | -------------------------------------------------------------------------------- /labs/navigationdrawer/_navigation-drawer-modal.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2021 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | @forward './lib/navigation-drawer-modal' show theme; 7 | -------------------------------------------------------------------------------- /internal/sass/test/test.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2021 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | // go/keep-sorted start 7 | @use './string-ext.test'; 8 | // go/keep-sorted end 9 | -------------------------------------------------------------------------------- /button/demo/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "/material-web/assets/stories/base.json", 3 | "files": { 4 | "demo.ts": { 5 | "hidden": true 6 | }, 7 | "stories.ts": {} 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /catalog/src/hydration-entrypoints/components/checkbox.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2023 Google LLC 4 | * SPDX-License-Identifier: Apache-2.0 5 | */ 6 | 7 | import '@material/web/checkbox/checkbox.js'; -------------------------------------------------------------------------------- /chips/demo/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "/material-web/assets/stories/base.json", 3 | "files": { 4 | "demo.ts": { 5 | "hidden": true 6 | }, 7 | "stories.ts": {} 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /dialog/demo/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "/material-web/assets/stories/base.json", 3 | "files": { 4 | "demo.ts": { 5 | "hidden": true 6 | }, 7 | "stories.ts": {} 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /divider/demo/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "/material-web/assets/stories/base.json", 3 | "files": { 4 | "demo.ts": { 5 | "hidden": true 6 | }, 7 | "stories.ts": {} 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /fab/_fab.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2022 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | @forward './lib/fab-branded' as branded-* show branded-theme; 7 | @forward './lib/fab' show theme; 8 | -------------------------------------------------------------------------------- /fab/demo/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "/material-web/assets/stories/base.json", 3 | "files": { 4 | "demo.ts": { 5 | "hidden": true 6 | }, 7 | "stories.ts": {} 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /field/demo/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "/material-web/assets/stories/base.json", 3 | "files": { 4 | "demo.ts": { 5 | "hidden": true 6 | }, 7 | "stories.ts": {} 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /focus/demo/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "/material-web/assets/stories/base.json", 3 | "files": { 4 | "demo.ts": { 5 | "hidden": true 6 | }, 7 | "stories.ts": {} 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /linearprogress/lib/linear-progress-styles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2023 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | @use './linear-progress'; 7 | 8 | @include linear-progress.styles; 9 | -------------------------------------------------------------------------------- /list/demo/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "/material-web/assets/stories/base.json", 3 | "files": { 4 | "demo.ts": { 5 | "hidden": true 6 | }, 7 | "stories.ts": {} 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /menu/demo/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "/material-web/assets/stories/base.json", 3 | "files": { 4 | "demo.ts": { 5 | "hidden": true 6 | }, 7 | "stories.ts": {} 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /radio/demo/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "/material-web/assets/stories/base.json", 3 | "files": { 4 | "demo.ts": { 5 | "hidden": true 6 | }, 7 | "stories.ts": {} 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /ripple/demo/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "/material-web/assets/stories/base.json", 3 | "files": { 4 | "demo.ts": { 5 | "hidden": true 6 | }, 7 | "stories.ts": {} 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /select/demo/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "/material-web/assets/stories/base.json", 3 | "files": { 4 | "demo.ts": { 5 | "hidden": true 6 | }, 7 | "stories.ts": {} 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /slider/demo/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "/material-web/assets/stories/base.json", 3 | "files": { 4 | "demo.ts": { 5 | "hidden": true 6 | }, 7 | "stories.ts": {} 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /switch/demo/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "/material-web/assets/stories/base.json", 3 | "files": { 4 | "demo.ts": { 5 | "hidden": true 6 | }, 7 | "stories.ts": {} 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /tabs/demo/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "/material-web/assets/stories/base.json", 3 | "files": { 4 | "demo.ts": { 5 | "hidden": true 6 | }, 7 | "stories.ts": {} 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /catalog/src/hydration-entrypoints/copy-code-button.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2023 Google LLC 4 | * SPDX-License-Identifier: Apache-2.0 5 | */ 6 | 7 | import '../components/copy-code-button.js'; 8 | -------------------------------------------------------------------------------- /checkbox/demo/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "/material-web/assets/stories/base.json", 3 | "files": { 4 | "demo.ts": { 5 | "hidden": true 6 | }, 7 | "stories.ts": {} 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /elevation/demo/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "/material-web/assets/stories/base.json", 3 | "files": { 4 | "demo.ts": { 5 | "hidden": true 6 | }, 7 | "stories.ts": {} 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /iconbutton/demo/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "/material-web/assets/stories/base.json", 3 | "files": { 4 | "demo.ts": { 5 | "hidden": true 6 | }, 7 | "stories.ts": {} 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /textfield/demo/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "/material-web/assets/stories/base.json", 3 | "files": { 4 | "demo.ts": { 5 | "hidden": true 6 | }, 7 | "stories.ts": {} 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /circularprogress/demo/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "/material-web/assets/stories/base.json", 3 | "files": { 4 | "demo.ts": { 5 | "hidden": true 6 | }, 7 | "stories.ts": {} 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /circularprogress/lib/circular-progress-styles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2023 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | @use './circular-progress'; 7 | 8 | @include circular-progress.styles; 9 | -------------------------------------------------------------------------------- /linearprogress/demo/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "/material-web/assets/stories/base.json", 3 | "files": { 4 | "demo.ts": { 5 | "hidden": true 6 | }, 7 | "stories.ts": {} 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /labs/README.md: -------------------------------------------------------------------------------- 1 | # Labs 🚧 2 | 3 | > WARNING ⚠️ This folder contains experimental features that are not recommended 4 | > for production. 5 | > 6 | > Breaking changes may occur that do not bump the major version (vX.0.0). 7 | -------------------------------------------------------------------------------- /labs/navigationbar/demo/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "/material-web/assets/stories/base.json", 3 | "files": { 4 | "demo.ts": { 5 | "hidden": true 6 | }, 7 | "stories.ts": {} 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /fab/lib/fab-styles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2022 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | // go/keep-sorted start 7 | @use './fab'; 8 | // go/keep-sorted end 9 | 10 | @include fab.styles; 11 | -------------------------------------------------------------------------------- /labs/segmentedbuttonset/demo/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "/material-web/assets/stories/base.json", 3 | "files": { 4 | "demo.ts": { 5 | "hidden": true 6 | }, 7 | "stories.ts": {} 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /tabs/lib/tab-styles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2023 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | // go/keep-sorted start 7 | @use './tab'; 8 | // go/keep-sorted end 9 | 10 | @include tab.styles; 11 | -------------------------------------------------------------------------------- /icon/lib/icon-styles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2022 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | // go/keep-sorted start 7 | @use './icon'; 8 | // go/keep-sorted end 9 | 10 | @include icon.styles; 11 | -------------------------------------------------------------------------------- /list/lib/list-styles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2022 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | // go/keep-sorted start 7 | @use './list'; 8 | // go/keep-sorted end 9 | 10 | @include list.styles; 11 | -------------------------------------------------------------------------------- /menu/lib/menu-styles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2022 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | // go/keep-sorted start 7 | @use './menu'; 8 | // go/keep-sorted end 9 | 10 | @include menu.styles; 11 | -------------------------------------------------------------------------------- /tabs/lib/tabs-styles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2023 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | // go/keep-sorted start 7 | @use './tabs'; 8 | // go/keep-sorted end 9 | 10 | @include tabs.styles; 11 | -------------------------------------------------------------------------------- /catalog/site/css/home-page.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2023 Google LLC 4 | * SPDX-License-Identifier: Apache-2.0 5 | */ 6 | 7 | h1, 8 | .subtitle { 9 | text-align: center; 10 | margin-block-start: 0; 11 | } 12 | -------------------------------------------------------------------------------- /catalog/src/hydration-entrypoints/menu.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2023 Google LLC 4 | * SPDX-License-Identifier: Apache-2.0 5 | */ 6 | 7 | import '@material/web/menu/menu.js'; 8 | import '../components/theme-changer.js'; 9 | -------------------------------------------------------------------------------- /chips/lib/shared-styles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2023 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | // go/keep-sorted start 7 | @use './shared'; 8 | // go/keep-sorted end 9 | 10 | @include shared.styles; 11 | -------------------------------------------------------------------------------- /dialog/lib/dialog-styles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2023 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | // go/keep-sorted start 7 | @use './dialog'; 8 | // go/keep-sorted end 9 | 10 | @include dialog.styles; 11 | -------------------------------------------------------------------------------- /fab/lib/shared-styles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2023 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | // go/keep-sorted start 7 | @use './shared'; 8 | // go/keep-sorted end 9 | 10 | @include shared.styles; 11 | -------------------------------------------------------------------------------- /radio/lib/radio-styles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2022 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | // go/keep-sorted start 7 | @use './radio'; 8 | // go/keep-sorted end 9 | 10 | @include radio.styles; 11 | -------------------------------------------------------------------------------- /ripple/lib/ripple-styles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2022 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | // go/keep-sorted start 7 | @use './ripple'; 8 | // go/keep-sorted end 9 | 10 | @include ripple.styles; 11 | -------------------------------------------------------------------------------- /switch/lib/switch-styles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2021 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | // go/keep-sorted start 7 | @use './switch'; 8 | // go/keep-sorted end 9 | 10 | @include switch.styles; 11 | -------------------------------------------------------------------------------- /catalog/src/pages/home-page.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2023 Google LLC 4 | * SPDX-License-Identifier: Apache-2.0 5 | */ 6 | 7 | // this is used in /site/index.html 8 | // TODO implement when we decide to add stuff to home page 9 | -------------------------------------------------------------------------------- /chips/lib/_chip-set.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2023 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | @mixin styles() { 7 | :host { 8 | display: flex; 9 | flex-wrap: wrap; 10 | gap: 8px; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /chips/lib/chip-set-styles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2023 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | // go/keep-sorted start 7 | @use './chip-set'; 8 | // go/keep-sorted end 9 | 10 | @include chip-set.styles; 11 | -------------------------------------------------------------------------------- /chips/lib/elevated-styles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2023 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | // go/keep-sorted start 7 | @use './elevated'; 8 | // go/keep-sorted end 9 | 10 | @include elevated.styles; 11 | -------------------------------------------------------------------------------- /divider/lib/divider-styles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2023 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | // go/keep-sorted start 7 | @use './divider'; 8 | // go/keep-sorted end 9 | 10 | @include divider.styles; 11 | -------------------------------------------------------------------------------- /iconbutton/lib/shared-styles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2022 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | // go/keep-sorted start 7 | @use './shared'; 8 | // go/keep-sorted end 9 | 10 | @include shared.styles; 11 | -------------------------------------------------------------------------------- /labs/badge/lib/badge-styles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2022 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | // go/keep-sorted start 7 | @use './badge'; 8 | // go/keep-sorted end 9 | 10 | @include badge.styles; 11 | -------------------------------------------------------------------------------- /select/lib/shared-styles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2023 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | // go/keep-sorted start 7 | @use './shared'; 8 | // go/keep-sorted end 9 | 10 | @include shared.styles(); 11 | -------------------------------------------------------------------------------- /textfield/lib/shared-styles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2021 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | // go/keep-sorted start 7 | @use './shared'; 8 | // go/keep-sorted end 9 | 10 | @include shared.styles; 11 | -------------------------------------------------------------------------------- /button/lib/text-styles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2021 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | // go/keep-sorted start 7 | @use './text-button'; 8 | // go/keep-sorted end 9 | 10 | @include text-button.styles; 11 | -------------------------------------------------------------------------------- /checkbox/lib/checkbox-styles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2022 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | // go/keep-sorted start 7 | @use './checkbox'; 8 | // go/keep-sorted end 9 | 10 | @include checkbox.styles; 11 | -------------------------------------------------------------------------------- /chips/lib/assist-styles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2023 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | // go/keep-sorted start 7 | @use './assist-chip'; 8 | // go/keep-sorted end 9 | 10 | @include assist-chip.styles; 11 | -------------------------------------------------------------------------------- /chips/lib/filter-styles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2023 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | // go/keep-sorted start 7 | @use './filter-chip'; 8 | // go/keep-sorted end 9 | 10 | @include filter-chip.styles; 11 | -------------------------------------------------------------------------------- /chips/lib/input-styles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2023 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | // go/keep-sorted start 7 | @use './input-chip'; 8 | // go/keep-sorted end 9 | 10 | @include input-chip.styles; 11 | -------------------------------------------------------------------------------- /button/lib/filled-styles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2021 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | // go/keep-sorted start 7 | @use './filled-button'; 8 | // go/keep-sorted end 9 | 10 | @include filled-button.styles; 11 | -------------------------------------------------------------------------------- /button/lib/tonal-styles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2021 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | // go/keep-sorted start 7 | @use './tonal-button'; 8 | // go/keep-sorted end 9 | 10 | @include tonal-button.styles; 11 | -------------------------------------------------------------------------------- /chips/lib/selectable-styles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2023 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | // go/keep-sorted start 7 | @use './selectable'; 8 | // go/keep-sorted end 9 | 10 | @include selectable.styles; 11 | -------------------------------------------------------------------------------- /elevation/lib/elevation-styles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2022 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | // go/keep-sorted start 7 | @use './elevation'; 8 | // go/keep-sorted end 9 | 10 | @include elevation.styles; 11 | -------------------------------------------------------------------------------- /fab/lib/fab-branded-styles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2023 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | // go/keep-sorted start 7 | @use './fab-branded'; 8 | // go/keep-sorted end 9 | 10 | @include fab-branded.styles; 11 | -------------------------------------------------------------------------------- /focus/lib/focus-ring-styles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2021 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | // go/keep-sorted start 7 | @use './focus-ring'; 8 | // go/keep-sorted end 9 | 10 | @include focus-ring.styles; 11 | -------------------------------------------------------------------------------- /labs/navigationdrawer/lib/shared-styles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2022 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | // go/keep-sorted start 7 | @use './shared'; 8 | // go/keep-sorted end 9 | 10 | @include shared.styles; 11 | -------------------------------------------------------------------------------- /labs/segmentedbutton/lib/shared-styles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2022 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | // go/keep-sorted start 7 | @use './shared'; 8 | // go/keep-sorted end 9 | 10 | @include shared.styles; 11 | -------------------------------------------------------------------------------- /button/lib/elevated-styles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2021 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | // go/keep-sorted start 7 | @use './elevated-button'; 8 | // go/keep-sorted end 9 | 10 | @include elevated-button.styles; 11 | -------------------------------------------------------------------------------- /button/lib/outlined-styles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2021 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | // go/keep-sorted start 7 | @use './outlined-button'; 8 | // go/keep-sorted end 9 | 10 | @include outlined-button.styles; 11 | -------------------------------------------------------------------------------- /button/lib/shared-elevation-styles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2021 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | // go/keep-sorted start 7 | @use './elevation'; 8 | // go/keep-sorted end 9 | 10 | @include elevation.styles; 11 | -------------------------------------------------------------------------------- /chips/lib/trailing-icon-styles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2023 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | // go/keep-sorted start 7 | @use './trailing-icon'; 8 | // go/keep-sorted end 9 | 10 | @include trailing-icon.styles; 11 | -------------------------------------------------------------------------------- /internal/README.md: -------------------------------------------------------------------------------- 1 | # Internal 2 | 3 | > WARNING ⚠️ This folder contains internal features that have limited support. 4 | > Proceed with caution when using them in a project. 5 | > 6 | > Breaking changes may occur that do not bump the major version (vX.0.0). 7 | -------------------------------------------------------------------------------- /labs/segmentedbuttonset/lib/shared-styles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2022 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | // go/keep-sorted start 7 | @use './shared'; 8 | // go/keep-sorted end 9 | 10 | @include shared.styles; 11 | -------------------------------------------------------------------------------- /list/lib/listitem/list-item-styles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2022 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | // go/keep-sorted start 7 | @use './list-item'; 8 | // go/keep-sorted end 9 | 10 | @include list-item.styles; 11 | -------------------------------------------------------------------------------- /menu/lib/menuitem/menu-item-styles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2023 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | // go/keep-sorted start 7 | @use './menu-item'; 8 | // go/keep-sorted end 9 | 10 | @include menu-item.styles; 11 | -------------------------------------------------------------------------------- /testing/table/lib/test-table-styles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2021 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | // go/keep-sorted start 7 | @use './test-table'; 8 | // go/keep-sorted end 9 | 10 | @include test-table.styles; 11 | -------------------------------------------------------------------------------- /chips/lib/suggestion-styles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2023 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | // go/keep-sorted start 7 | @use './suggestion-chip'; 8 | // go/keep-sorted end 9 | 10 | @include suggestion-chip.styles; 11 | -------------------------------------------------------------------------------- /select/lib/filled-select-styles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2023 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | // go/keep-sorted start 7 | @use './filled-select'; 8 | // go/keep-sorted end 9 | 10 | @include filled-select.styles(); 11 | -------------------------------------------------------------------------------- /textfield/lib/filled-styles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2021 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | // go/keep-sorted start 7 | @use './filled-text-field'; 8 | // go/keep-sorted end 9 | 10 | @include filled-text-field.styles; 11 | -------------------------------------------------------------------------------- /iconbutton/lib/filled-styles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2022 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | // go/keep-sorted start 7 | @use './filled-icon-button'; 8 | // go/keep-sorted end 9 | 10 | @include filled-icon-button.styles; 11 | -------------------------------------------------------------------------------- /select/lib/outlined-select-styles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2023 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | // go/keep-sorted start 7 | @use './outlined-select'; 8 | // go/keep-sorted end 9 | 10 | @include outlined-select.styles(); 11 | -------------------------------------------------------------------------------- /iconbutton/lib/outlined-styles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2022 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | // go/keep-sorted start 7 | @use './outlined-icon-button'; 8 | // go/keep-sorted end 9 | 10 | @include outlined-icon-button.styles; 11 | -------------------------------------------------------------------------------- /iconbutton/lib/standard-styles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2022 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | // go/keep-sorted start 7 | @use './standard-icon-button'; 8 | // go/keep-sorted end 9 | 10 | @include standard-icon-button.styles; 11 | -------------------------------------------------------------------------------- /textfield/lib/outlined-styles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2021 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | // go/keep-sorted start 7 | @use './outlined-text-field'; 8 | // go/keep-sorted end 9 | 10 | @include outlined-text-field.styles; 11 | -------------------------------------------------------------------------------- /labs/navigationbar/lib/navigation-bar-styles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2021 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | // go/keep-sorted start 7 | @use './navigation-bar'; 8 | // go/keep-sorted end 9 | 10 | @include navigation-bar.styles; 11 | -------------------------------------------------------------------------------- /labs/navigationtab/lib/navigation-tab-styles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2022 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | // go/keep-sorted start 7 | @use './navigation-tab'; 8 | // go/keep-sorted end 9 | 10 | @include navigation-tab.styles; 11 | -------------------------------------------------------------------------------- /iconbutton/lib/filled-tonal-styles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2022 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | // go/keep-sorted start 7 | @use './filled-tonal-icon-button'; 8 | // go/keep-sorted end 9 | 10 | @include filled-tonal-icon-button.styles; 11 | -------------------------------------------------------------------------------- /labs/navigationdrawer/lib/navigation-drawer-styles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2021 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | // go/keep-sorted start 7 | @use './navigation-drawer'; 8 | // go/keep-sorted end 9 | 10 | @include navigation-drawer.styles; 11 | -------------------------------------------------------------------------------- /labs/segmentedbutton/lib/outlined-styles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2022 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | // go/keep-sorted start 7 | @use './outlined-segmented-button'; 8 | // go/keep-sorted end 9 | 10 | @include outlined-segmented-button.styles; 11 | -------------------------------------------------------------------------------- /list/test/window_size.json: -------------------------------------------------------------------------------- 1 | { 2 | "capabilities": { 3 | "goog:chromeOptions": { 4 | "args": [ 5 | "--window-position=0,0", 6 | "--window-size=1920,1200" 7 | ] 8 | } 9 | }, 10 | "extension": { 11 | "xvfbResolution": "1920x1200x24" 12 | } 13 | } -------------------------------------------------------------------------------- /menu/lib/forced-colors-styles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2023 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | @media (forced-colors: active) { 7 | .menu { 8 | border-style: solid; 9 | border-color: CanvasText; 10 | border-width: 1px; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /release-please-config.json: -------------------------------------------------------------------------------- 1 | { 2 | "bootstrap-sha": "41d41cc2788f237f376d32409f51ca59e9b2bf75", 3 | "include-component-in-tag": false, 4 | "include-v-in-tag": true, 5 | "pull-request-title-pattern": "chore: release ${version}", 6 | "packages": { 7 | ".": {} 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /list/list-item_test.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2022 Google LLC 4 | * SPDX-License-Identifier: Apache-2.0 5 | */ 6 | 7 | import './list-item.js'; 8 | 9 | describe('list item tests', () => { 10 | // TODO(b/265211574): test list item 11 | it('TODO', () => {}); 12 | }); 13 | -------------------------------------------------------------------------------- /catalog/src/hydration-entrypoints/navigation.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2023 Google LLC 4 | * SPDX-License-Identifier: Apache-2.0 5 | */ 6 | 7 | import '../components/nav-drawer.js'; 8 | import '../components/top-app-bar.js'; 9 | import '@material/web/list/list-item-link.js'; 10 | -------------------------------------------------------------------------------- /labs/segmentedbuttonset/lib/outlined-styles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2022 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | // go/keep-sorted start 7 | @use './outlined-segmented-button-set'; 8 | // go/keep-sorted end 9 | 10 | @include outlined-segmented-button-set.styles; 11 | -------------------------------------------------------------------------------- /labs/navigationdrawer/lib/navigation-drawer-modal-styles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2021 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | // go/keep-sorted start 7 | @use './navigation-drawer-modal'; 8 | // go/keep-sorted end 9 | 10 | @include navigation-drawer-modal.styles; 11 | -------------------------------------------------------------------------------- /catalog/src/hydration-entrypoints/playground-elements.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2023 Google LLC 4 | * SPDX-License-Identifier: Apache-2.0 5 | */ 6 | 7 | import 'playground-elements/playground-project.js'; 8 | import 'playground-elements/playground-preview.js'; 9 | import 'playground-elements/playground-file-editor.js'; -------------------------------------------------------------------------------- /catalog/src/signals/drawer-open-state.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2023 Google LLC 4 | * SPDX-License-Identifier: Apache-2.0 5 | */ 6 | 7 | import {signal} from './signal-element.js'; 8 | 9 | /** 10 | * Whether or not the sidebar drawer should be open. 11 | */ 12 | export const drawerOpenSignal = signal(false); -------------------------------------------------------------------------------- /menu/lib/menuitem/harness.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2022 Google LLC 4 | * SPDX-License-Identifier: Apache-2.0 5 | */ 6 | 7 | import {ListItemHarness} from '../../../list/lib/listitem/harness.js'; 8 | 9 | /** 10 | * Test harness for menu item. 11 | */ 12 | export class MenuItemHarness extends ListItemHarness {} 13 | -------------------------------------------------------------------------------- /menu/lib/submenuitem/harness.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2023 Google LLC 4 | * SPDX-License-Identifier: Apache-2.0 5 | */ 6 | 7 | import {ListItemHarness} from '../../../list/lib/listitem/harness.js'; 8 | 9 | /** 10 | * Test harness for menu item. 11 | */ 12 | export class MenuItemHarness extends ListItemHarness {} 13 | -------------------------------------------------------------------------------- /button/lib/shared-styles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2021 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | // go/keep-sorted start 7 | @use './icon'; 8 | @use './shared'; 9 | @use './touch-target'; 10 | // go/keep-sorted end 11 | 12 | @include shared.styles; 13 | @include icon.styles; 14 | @include touch-target.styles; 15 | -------------------------------------------------------------------------------- /catalog/src/ssr-utils/lit-hydrate-support.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2023 Google LLC 4 | * SPDX-License-Identifier: Apache-2.0 5 | */ 6 | 7 | // Must be loaded before any lit element see /site/_includes/default.html for 8 | // usage. Allows hydrating SSRd lit elements. 9 | import '@lit-labs/ssr-client/lit-element-hydrate-support.js'; -------------------------------------------------------------------------------- /tokens/_md-sys-shape.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2023 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | // go/keep-sorted start 7 | @use './v0_172/md-sys-shape'; 8 | // go/keep-sorted end 9 | 10 | @function values($exclude-hardcoded-values: false) { 11 | @return md-sys-shape.values($exclude-hardcoded-values); 12 | } 13 | -------------------------------------------------------------------------------- /tokens/_md-sys-state.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2023 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | // go/keep-sorted start 7 | @use './v0_172/md-sys-state'; 8 | // go/keep-sorted end 9 | 10 | @function values($exclude-hardcoded-values: false) { 11 | @return md-sys-state.values($exclude-hardcoded-values); 12 | } 13 | -------------------------------------------------------------------------------- /catalog/stories/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2023 Google LLC 4 | * SPDX-License-Identifier: Apache-2.0 5 | */ 6 | 7 | /* Equivalent of Lit stories entrypoint */ 8 | 9 | export * from './knobs.js'; 10 | export * from './story.js'; 11 | 12 | // This file is resolved by base.json 13 | import './components/stories-renderer.js'; -------------------------------------------------------------------------------- /dialog/test/window_size.json: -------------------------------------------------------------------------------- 1 | { 2 | "capabilities": { 3 | "goog:chromeOptions": { 4 | "args": ["--window-position=0,0", "--window-size=599,800"] 5 | }, 6 | "moz:firefoxOptions": { 7 | "args": ["-width=599","-height=800"] 8 | } 9 | }, 10 | "extension": { 11 | "xvfbResolution": "599x800x24" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /select/lib/selectoption/harness.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2022 Google LLC 4 | * SPDX-License-Identifier: Apache-2.0 5 | */ 6 | 7 | import {ListItemHarness} from '../../../list/lib/listitem/harness.js'; 8 | 9 | /** 10 | * Test harness for menu item. 11 | */ 12 | export class SelectOptionHarness extends ListItemHarness {} 13 | -------------------------------------------------------------------------------- /tokens/_md-ref-palette.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2023 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | // go/keep-sorted start 7 | @use './v0_172/md-ref-palette'; 8 | // go/keep-sorted end 9 | 10 | @function values($exclude-hardcoded-values: false) { 11 | @return md-ref-palette.values($exclude-hardcoded-values); 12 | } 13 | -------------------------------------------------------------------------------- /tokens/_md-sys-motion.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2023 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | // go/keep-sorted start 7 | @use './v0_172/md-sys-motion'; 8 | // go/keep-sorted end 9 | 10 | @function values($exclude-hardcoded-values: false) { 11 | @return md-sys-motion.values($exclude-hardcoded-values); 12 | } 13 | -------------------------------------------------------------------------------- /menu/test/window_size.json: -------------------------------------------------------------------------------- 1 | { 2 | "capabilities": { 3 | "goog:chromeOptions": { 4 | "args": ["--window-position=0,0", "--window-size=3400,2215"] 5 | }, 6 | "moz:firefoxOptions": { 7 | "args": ["-width=3400","-height=2215"] 8 | } 9 | }, 10 | "extension": { 11 | "xvfbResolution": "3400x2215x24" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /select/test/window_size.json: -------------------------------------------------------------------------------- 1 | { 2 | "capabilities": { 3 | "goog:chromeOptions": { 4 | "args": ["--window-position=0,0", "--window-size=3400,2215"] 5 | }, 6 | "moz:firefoxOptions": { 7 | "args": ["-width=3400","-height=2215"] 8 | } 9 | }, 10 | "extension": { 11 | "xvfbResolution": "3400x2215x24" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /tabs/test/window_size.json: -------------------------------------------------------------------------------- 1 | { 2 | "capabilities": { 3 | "goog:chromeOptions": { 4 | "args": ["--window-position=0,0", "--window-size=3400,2215"] 5 | }, 6 | "moz:firefoxOptions": { 7 | "args": ["-width=3400","-height=2215"] 8 | } 9 | }, 10 | "extension": { 11 | "xvfbResolution": "3400x2215x24" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /icon/lib/icon.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2022 Google LLC 4 | * SPDX-License-Identifier: Apache-2.0 5 | */ 6 | 7 | import {html, LitElement} from 'lit'; 8 | 9 | /** 10 | * TODO(b/265336902): add docs 11 | */ 12 | export class Icon extends LitElement { 13 | protected override render() { 14 | return html``; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /internal/controller/string-converter.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2022 Google LLC 4 | * SPDX-License-Identifier: Apache-2.0 5 | */ 6 | 7 | export const stringConverter = { 8 | fromAttribute(value: string|null): string { 9 | return value ?? ''; 10 | }, 11 | toAttribute(value: string): string|null { 12 | return value || null; 13 | } 14 | }; 15 | -------------------------------------------------------------------------------- /catalog/src/ssr-utils/lit-island.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2023 Google LLC 4 | * SPDX-License-Identifier: Apache-2.0 5 | */ 6 | 7 | import {Island} from '@11ty/is-land'; 8 | 9 | customElements.define('lit-island', class extends Island { 10 | // Removes the feature in which 11ty island removes DOM to render a fallback. 11 | override forceFallback() {} 12 | }); 13 | -------------------------------------------------------------------------------- /elevation/lib/elevation.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2022 Google LLC 4 | * SPDX-License-Identifier: Apache-2.0 5 | */ 6 | 7 | import {html, LitElement} from 'lit'; 8 | 9 | /** 10 | * A component for elevation. 11 | */ 12 | export class Elevation extends LitElement { 13 | protected override render() { 14 | return html``; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /chips/lib/suggestion-chip.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2023 Google LLC 4 | * SPDX-License-Identifier: Apache-2.0 5 | */ 6 | 7 | import {AssistChip} from './assist-chip.js'; 8 | 9 | /** 10 | * A suggestion chip component. 11 | */ 12 | export class SuggestionChip extends AssistChip {} 13 | 14 | // Note: assist and suggestion chips are functionally identical with different 15 | // tokens. 16 | -------------------------------------------------------------------------------- /catalog/src/hydration-entrypoints/components/icon-button.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2023 Google LLC 4 | * SPDX-License-Identifier: Apache-2.0 5 | */ 6 | 7 | import '@material/web/iconbutton/standard-icon-button.js'; 8 | import '@material/web/iconbutton/filled-icon-button.js'; 9 | import '@material/web/iconbutton/filled-tonal-icon-button.js'; 10 | import '@material/web/iconbutton/outlined-icon-button.js'; -------------------------------------------------------------------------------- /catalog/src/hydration-entrypoints/components/button.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2023 Google LLC 4 | * SPDX-License-Identifier: Apache-2.0 5 | */ 6 | 7 | import '@material/web/button/elevated-button.js'; 8 | import '@material/web/button/filled-button.js'; 9 | import '@material/web/button/tonal-button.js'; 10 | import '@material/web/button/outlined-button.js'; 11 | import '@material/web/button/text-button.js'; -------------------------------------------------------------------------------- /labs/badge/badge_test.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2022 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 {MdBadge} from './badge.js'; 12 | 13 | describe('', () => { 14 | describe('.styles', () => { 15 | createTokenTests(MdBadge.styles); 16 | }); 17 | }); 18 | -------------------------------------------------------------------------------- /linearprogress/linear-progress_test.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2023 Google LLC 4 | * SPDX-License-Identifier: Apache-2.0 5 | */ 6 | 7 | import {createTokenTests} from '../testing/tokens.js'; 8 | 9 | import {MdLinearProgress} from './linear-progress.js'; 10 | 11 | describe('', () => { 12 | describe('.styles', () => { 13 | createTokenTests(MdLinearProgress.styles); 14 | }); 15 | }); 16 | -------------------------------------------------------------------------------- /ripple/ripple_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 {MdRipple} from './ripple.js'; 12 | 13 | describe('', () => { 14 | describe('.styles', () => { 15 | createTokenTests(MdRipple.styles); 16 | }); 17 | }); 18 | -------------------------------------------------------------------------------- /divider/divider_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 {MdDivider} from './divider.js'; 12 | 13 | describe('', () => { 14 | describe('.styles', () => { 15 | createTokenTests(MdDivider.styles); 16 | }); 17 | }); 18 | -------------------------------------------------------------------------------- /chips/input-chip_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 {MdInputChip} from './input-chip.js'; 12 | 13 | describe('', () => { 14 | describe('.styles', () => { 15 | createTokenTests(MdInputChip.styles); 16 | }); 17 | }); 18 | -------------------------------------------------------------------------------- /circularprogress/circular-progress_test.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2023 Google LLC 4 | * SPDX-License-Identifier: Apache-2.0 5 | */ 6 | 7 | import {createTokenTests} from '../testing/tokens.js'; 8 | 9 | import {MdCircularProgress} from './circular-progress.js'; 10 | 11 | describe('', () => { 12 | describe('.styles', () => { 13 | createTokenTests(MdCircularProgress.styles); 14 | }); 15 | }); 16 | -------------------------------------------------------------------------------- /elevation/elevation_test.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2022 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 {MdElevation} from './elevation.js'; 12 | 13 | describe('', () => { 14 | describe('.styles', () => { 15 | createTokenTests(MdElevation.styles); 16 | }); 17 | }); 18 | -------------------------------------------------------------------------------- /focus/focus-ring_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 {MdFocusRing} from './focus-ring.js'; 12 | 13 | describe('', () => { 14 | describe('.styles', () => { 15 | createTokenTests(MdFocusRing.styles); 16 | }); 17 | }); 18 | -------------------------------------------------------------------------------- /button/lib/text-button.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2021 Google LLC 4 | * SPDX-License-Identifier: Apache-2.0 5 | */ 6 | 7 | import {Button} from './button.js'; 8 | 9 | /** 10 | * A text button component. 11 | */ 12 | export class TextButton extends Button { 13 | protected override getRenderClasses() { 14 | return { 15 | ...super.getRenderClasses(), 16 | 'md3-button--text': true, 17 | }; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /chips/assist-chip_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 {MdAssistChip} from './assist-chip.js'; 12 | 13 | describe('', () => { 14 | describe('.styles', () => { 15 | createTokenTests(MdAssistChip.styles); 16 | }); 17 | }); 18 | -------------------------------------------------------------------------------- /chips/filter-chip_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 {MdFilterChip} from './filter-chip.js'; 12 | 13 | describe('', () => { 14 | describe('.styles', () => { 15 | createTokenTests(MdFilterChip.styles); 16 | }); 17 | }); 18 | -------------------------------------------------------------------------------- /button/lib/_touch-target.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2021 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | // stylelint-disable selector-class-pattern -- 7 | // Selector '.md3-*' should only be used in this project. 8 | 9 | @mixin styles() { 10 | .md3-button__touch { 11 | position: absolute; 12 | top: 50%; 13 | height: 48px; 14 | left: 0; 15 | right: 0; 16 | transform: translateY(-50%); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /catalog/src/ssr-utils/dsd-polyfill.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2023 Google LLC 4 | * SPDX-License-Identifier: Apache-2.0 5 | */ 6 | 7 | // Declarative shadow dom polyfill 8 | import {hydrateShadowRoots} from '@webcomponents/template-shadowroot/template-shadowroot.js'; 9 | 10 | if (!HTMLTemplateElement.prototype.hasOwnProperty('shadowRoot')) { 11 | hydrateShadowRoots(document.body); 12 | } 13 | document.body.removeAttribute('dsd-pending'); -------------------------------------------------------------------------------- /field/filled-field_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 {MdFilledField} from './filled-field.js'; 12 | 13 | describe('', () => { 14 | describe('.styles', () => { 15 | createTokenTests(MdFilledField.styles); 16 | }); 17 | }); 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.js 3 | !web-test-runner.config.js 4 | !css-to-ts.js 5 | *.css 6 | *.css.ts 7 | *.map 8 | *.d.ts 9 | !types/*.d.ts 10 | .wireit/ 11 | 12 | !catalog/**/*.css 13 | catalog/_dev 14 | catalog/_prod 15 | catalog/node_modules 16 | catalog/.wireit 17 | catalog/lib/ 18 | catalog/build/ 19 | catalog/site/components/*.md 20 | catalog/site/components/images 21 | catalog/*.tsbuildinfo 22 | catalog/stories/*/ 23 | !catalog/stories/components/ -------------------------------------------------------------------------------- /catalog/site/index.html: -------------------------------------------------------------------------------- 1 | {% extends 'default.html' %} 2 | 3 | {% block head %} 4 | 5 | 6 | {% endblock %} 7 | 8 | {% block content %} 9 | 10 |

Material Web

11 |
The official web component set for Material 3
12 | 13 |
14 | TODO 15 |
16 | 17 | {% endblock %} -------------------------------------------------------------------------------- /field/outlined-field_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 {MdOutlinedField} from './outlined-field.js'; 12 | 13 | describe('', () => { 14 | describe('.styles', () => { 15 | createTokenTests(MdOutlinedField.styles); 16 | }); 17 | }); 18 | -------------------------------------------------------------------------------- /chips/suggestion-chip_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 {MdSuggestionChip} from './suggestion-chip.js'; 12 | 13 | describe('', () => { 14 | describe('.styles', () => { 15 | createTokenTests(MdSuggestionChip.styles); 16 | }); 17 | }); 18 | -------------------------------------------------------------------------------- /textfield/filled-text-field_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 {MdFilledTextField} from './filled-text-field.js'; 12 | 13 | describe('', () => { 14 | describe('.styles', () => { 15 | createTokenTests(MdFilledTextField.styles); 16 | }); 17 | }); 18 | -------------------------------------------------------------------------------- /textfield/lib/filled-text-field.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2021 Google LLC 4 | * SPDX-License-Identifier: Apache-2.0 5 | */ 6 | 7 | import '../../field/filled-field.js'; 8 | 9 | import {literal} from 'lit/static-html.js'; 10 | 11 | import {TextField} from './text-field.js'; 12 | 13 | /** 14 | * A filled text field component. 15 | */ 16 | export class FilledTextField extends TextField { 17 | protected readonly fieldTag = literal`md-filled-field`; 18 | } 19 | -------------------------------------------------------------------------------- /tokens/_md-comp-scrim.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2023 Google LLC 3 | // SPDX-License-Identifier: Apache-2.0 4 | // 5 | 6 | // go/keep-sorted start 7 | @use './md-sys-color'; 8 | @use './v0_172/md-comp-scrim'; 9 | // go/keep-sorted end 10 | 11 | $_default: ( 12 | 'md-sys-color': md-sys-color.values-light(), 13 | ); 14 | 15 | @function values($deps: $_default, $exclude-hardcoded-values: false) { 16 | @return md-comp-scrim.values($deps, $exclude-hardcoded-values); 17 | } 18 | -------------------------------------------------------------------------------- /catalog/src/signals/inert.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2023 Google LLC 4 | * SPDX-License-Identifier: Apache-2.0 5 | */ 6 | 7 | import {signal} from './signal-element.js'; 8 | 9 | /** 10 | * Whether or not the site content should be inert (sidebar is still 11 | * interactive). 12 | */ 13 | export const inertContentSignal = signal(false); 14 | 15 | /** 16 | * Whether or not the sidebar should be inert. 17 | */ 18 | export const inertSidebarSignal = signal(false); -------------------------------------------------------------------------------- /select/lib/filled-select.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2023 Google LLC 4 | * SPDX-License-Identifier: Apache-2.0 5 | */ 6 | 7 | import '../../field/filled-field.js'; 8 | 9 | import {literal} from 'lit/static-html.js'; 10 | 11 | import {Select} from './select.js'; 12 | 13 | // tslint:disable-next-line:enforce-comments-on-exported-symbols 14 | export abstract class FilledSelect extends Select { 15 | protected readonly fieldTag = literal`md-filled-field`; 16 | } 17 | -------------------------------------------------------------------------------- /textfield/outlined-text-field_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 {MdOutlinedTextField} from './outlined-text-field.js'; 12 | 13 | describe('', () => { 14 | describe('.styles', () => { 15 | createTokenTests(MdOutlinedTextField.styles); 16 | }); 17 | }); 18 | -------------------------------------------------------------------------------- /select/lib/outlined-select.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2023 Google LLC 4 | * SPDX-License-Identifier: Apache-2.0 5 | */ 6 | 7 | import '../../field/outlined-field.js'; 8 | 9 | import {literal} from 'lit/static-html.js'; 10 | 11 | import {Select} from './select.js'; 12 | 13 | // tslint:disable-next-line:enforce-comments-on-exported-symbols 14 | export abstract class OutlinedSelect extends Select { 15 | protected readonly fieldTag = literal`md-outlined-field`; 16 | } 17 | -------------------------------------------------------------------------------- /textfield/lib/outlined-text-field.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2021 Google LLC 4 | * SPDX-License-Identifier: Apache-2.0 5 | */ 6 | 7 | import '../../field/outlined-field.js'; 8 | 9 | import {literal} from 'lit/static-html.js'; 10 | 11 | import {TextField} from './text-field.js'; 12 | 13 | /** 14 | * An outlined text field component 15 | */ 16 | export class OutlinedTextField extends TextField { 17 | protected readonly fieldTag = literal`md-outlined-field`; 18 | } 19 | -------------------------------------------------------------------------------- /.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/v1 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/setup-node@v3 11 | with: 12 | node-version: 18 13 | 14 | - run: npm install -g commitlint @commitlint/config-conventional 15 | - run: 'echo "${PR_TITLE}" | commitlint -x @commitlint/config-conventional' 16 | env: 17 | PR_TITLE: ${{ github.event.pull_request.title }} 18 | -------------------------------------------------------------------------------- /catalog/src/inline/apply-saved-theme.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2023 Google LLC 4 | * SPDX-License-Identifier: Apache-2.0 5 | */ 6 | 7 | import {applyThemeString} from '../utils/apply-theme-string.js'; 8 | 9 | // Checks if there has been a theme already generated from a prior visit 10 | const lastThemeString = localStorage.getItem('material-theme'); 11 | 12 | // Applies the theme string to the document if available. 13 | if (lastThemeString) { 14 | applyThemeString(document, lastThemeString); 15 | } 16 | -------------------------------------------------------------------------------- /checkbox/harness.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2022 Google LLC 4 | * SPDX-License-Identifier: Apache-2.0 5 | */ 6 | 7 | import {Harness} from '../testing/harness.js'; 8 | 9 | import {Checkbox} from './lib/checkbox.js'; 10 | 11 | /** 12 | * Test harness for checkbox. 13 | */ 14 | export class CheckboxHarness extends Harness { 15 | override async getInteractiveElement() { 16 | await this.element.updateComplete; 17 | return this.element.renderRoot.querySelector('input')!; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /radio/harness.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2022 Google LLC 4 | * SPDX-License-Identifier: Apache-2.0 5 | */ 6 | 7 | import {Harness} from '../testing/harness.js'; 8 | 9 | import {Radio} from './lib/radio.js'; 10 | 11 | /** 12 | * Test harness for radio. 13 | */ 14 | export class RadioHarness extends Harness { 15 | override async getInteractiveElement() { 16 | await this.element.updateComplete; 17 | return this.element.renderRoot.querySelector('input') as HTMLInputElement; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /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 './lib/button.js'; 10 | 11 | /** 12 | * Test harness for buttons. 13 | */ 14 | export class ButtonHarness extends Harness