Modular and customizable Material Design UI components for the web

Last update: Jan 3, 2023

Overview

Material Components for the web

Material Components for the web helps developers execute Material Design. Developed by a core team of engineers and UX designers at Google, these components enable a reliable development workflow to build beautiful and functional web projects.

Material Web strives to seamlessly incorporate into a wider range of usage contexts, from simple static websites to complex, JavaScript-heavy applications to hybrid client/server rendering systems. In short, whether you're already heavily invested in another framework or not, it should be easy to incorporate Material Components into your site in a lightweight, idiomatic fashion.

Material Components for the web is the successor to Material Design Lite. In addition to implementing the Material Design guidelines, it provides more flexible theming customization, not only in terms of color, but also typography, shape, states, and more. It is also specifically architected for adaptability to various major web frameworks.

NOTE: Material Components Web tends to release breaking changes on a monthly basis, but follows semver so you can control when you incorporate them. We typically follow a 2-week release schedule which includes one major release per month with breaking changes, and intermediate patch releases with bug fixes.

Quick start

Using via CDN

<!-- Required styles for Material Web -->
<link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">

<!-- Render textfield component -->
<label class="mdc-text-field mdc-text-field--filled">
  <span class="mdc-text-field__ripple"></span>
  <span class="mdc-floating-label" id="my-label">Label</span>
  <input type="text" class="mdc-text-field__input" aria-labelledby="my-label">
  <span class="mdc-line-ripple"></span>
</label>

<!-- Required Material Web JavaScript library -->
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
<!-- Instantiate single textfield component rendered in the document -->
<script>
  mdc.textField.MDCTextField.attachTo(document.querySelector('.mdc-text-field'));
</script>

Please see quick start demo on codepen for full example.

Using NPM

This guide assumes you have webpack configured to compile Sass into CSS. To configure webpack, please see the full getting started guide. You can also see the final code and result in the Material Starter Kit.

Install textfield node module to your project.

npm install @material/textfield

HTML

Sample usage of text field component. Please see Textfield component page for more options.

<label class="mdc-text-field mdc-text-field--filled">
  <span class="mdc-text-field__ripple"></span>
  <input type="text" class="mdc-text-field__input" aria-labelledby="my-label">
  <span class="mdc-floating-label" id="my-label">Label</span>
  <span class="mdc-line-ripple"></span>
</label>

CSS

Load styles required for text field component.

@use "@material/floating-label/mdc-floating-label";
@use "@material/line-ripple/mdc-line-ripple";
@use "@material/notched-outline/mdc-notched-outline";
@use "@material/textfield";

@include textfield.core-styles;

JavaScript

Import MDCTextField module to instantiate text field component.

import {MDCTextField} from '@material/textfield';
const textField = new MDCTextField(document.querySelector('.mdc-text-field'));

This'll initialize text field component on a single .mdc-text-field element.

Please see quick start demo on glitch for full example.

Need help?

We're constantly trying to improve our components. If Github Issues don't fit your needs, then please visit us on our Discord Channel.

Comments

chore: Release

This PR was opened by release GitHub action. When you're ready to do a release, you can merge this and release action will automatically publishes to npm registry. If you're not ready to do a release yet, that's fine, whenever you add more commits to master, this PR will be updated.
cla: yes

opened by github-actions[bot] 168
chore: Release

This PR was opened by release GitHub action. When you're ready to do a release, you can merge this and release action will automatically publishes to npm registry. If you're not ready to do a release yet, that's fine, whenever you add more commits to master, this PR will be updated.
cla: yes

opened by github-actions[bot] 138
chore: Release

This PR was opened by release GitHub action. When you're ready to do a release, you can merge this and release action will automatically publishes to npm registry. If you're not ready to do a release yet, that's fine, whenever you add more commits to master, this PR will be updated.
cla: yes

opened by github-actions[bot] 92
chore: Release

This PR was opened by release GitHub action. When you're ready to do a release, you can merge this and release action will automatically publishes to npm registry. If you're not ready to do a release yet, that's fine, whenever you add more commits to master, this PR will be updated.
cla: yes

opened by github-actions[bot] 80
Update webpack to the latest version 🚀
☝️ Greenkeeper’s updated Terms of Service will come into effect on April 6th, 2018.

Version 4.0.0 of webpack was just published.

Dependency webpack

Current Version 3.11.0

Type devDependency

The version 4.0.0 is not covered by your current version range.

If you don’t accept this pull request, your project will work just like it did before. However, you might be missing out on a bunch of new features, fixes and/or performance improvements from the dependency update.

It might be worth looking into these changes and trying to get this project onto the latest version of webpack.

If you have a solid test suite and good coverage, a passing build is a strong indicator that you can take advantage of these changes directly by merging the proposed change into your project. If the build fails or you don’t have such unconditional trust in your tests, this branch is a great starting point for you to work on the update.

Release Notes
v4.0.0
Big changes

Environment

Node.js 4 is no longer supported. Source Code was upgraded to a higher ecmascript version.

Usage

You have to choose (mode or --mode) between two modes now: production or development

production enables all kind of optimizations to generate optimized bundles

development enables comments and hint for development and enables the eval devtool

production doesn't support watching, development is optimized for fast incremental rebuilds

production also enables module concatenating (Scope Hoisting)

You can configure this in detail with the flags in optimization.* (build your custom mode)

process.env.NODE_ENV are set to production or development (only in built code, not in config)

There is a hidden none mode which disables everything

Syntax

import() always returns a namespace object. CommonJS modules are wrapped into the default export

This probably breaks your code, if you used to import CommonJs with import()

Configuration

You no longer need to use these plugins:

NoEmitOnErrorsPlugin -> optimization.noEmitOnErrors (on by default in production mode)

ModuleConcatenationPlugin -> optimization.concatenateModules (on by default in production mode)

NamedModulesPlugin -> optimization.namedModules (on by default in develoment mode)

CommonsChunkPlugin was removed -> optimization.splitChunks, optimization.runtimeChunk

JSON

webpack now handles JSON natively

You may need to add type: "javascript/auto" when transforming JSON via loader to JS

Just using JSON without loader should still work

allows to import JSON via ESM syntax

unused exports elimination for JSON modules

Optimization

Upgrade uglifyjs-webpack-plugin to v1

ES15 support

Big features

Modules

webpack now supports these module types:

javascript/auto: (The default one in webpack 3) Javascript module with all module systems enabled: CommonJS, AMD, ESM

javascript/esm: EcmaScript modules, all other module system are not available

javascript/dynamic: Only CommonJS and, EcmaScript modules are not available

json: JSON data, it's available via require and import

webassembly/experimental: WebAssembly modules (currently experimental)

javascript/esm handles ESM more strictly compared to javascript/auto:

Imported names need to exist on imported module

Dynamic modules (non-esm, i. e. CommonJs) can only imported via default import, everything else (including namespace import) emit errors

In .mjs modules are javascript/esm by default

WebAssembly modules

can import other modules (JS and WASM)

Exports from WebAssembly modules are validated by ESM import

You'll get a warning/error when trying to import a non-existing export from WASM

can only be used in async chunks. They doesn't work in initial chunks (would be bad for web performance)

Import modules using WASM via import()

This is an experimental feature and subject of change

Optimization

sideEffects: false is now supported in package.json

sideEffects in package.json also supports glob expressions and arrays of glob expressions

Instead of a JSONP function a JSONP array is used -> async script tag support, order no longer matter

New optimization.splitChunks option was introduced
Details: https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693

Dead branches are now removed by webpack itself

Before: Uglify removed the dead code

Now: webpack removes the dead code (in some cases)

This prevents crashing when import() occur in a dead branch

Syntax

webpackInclude and webpackExclude are supported by the magic comment for import(). They allow to filter files when using a dynamic expression.

Using System.import() now emits a warning

You can disable the warning with Rule.parser.system: true

You can disable System.import with Rule.parser.system: false

Configuration

Resolving can now be configured with module.rules[].resolve. It's merged with the global configuration.

optimization.minimize has been added to switch minimizing on/off

By default: on in production mode, off in development mode

optimization.minimizer has been added to configurate minimizers and options

Usage

Some Plugin options are now validated

CLI has been move to webpack-cli, you need to install webpack-cli to use the CLI

The ProgressPlugin (--progress) now displays plugin names

At least for plugins migrated to the new plugin system

Performance

UglifyJs now caches and parallizes by default

Multiple performance improvements, especially for faster incremental rebuilds

performance improvement for RemoveParentModulesPlugin

Stats

Stats can display modules nested in concatenated modules

Features

Configuration

Module type is automatically choosen for mjs, json and wasm extensions. Other extensions need to be configured via module.rules[].type

Incorrect options.dependencies configurations now throw error

sideEffects can be overriden via module.rules

output.hashFunction can now be a Constructor to a custom hash function

You can provide a non-cryto hash function for performance reasons

add output.globalObject config option to allow to choose the global object reference in runtime exitCode

Runtime

Error for chunk loading now includes more information and two new properties type and request.

Devtool

remove comment footer from SourceMaps and eval

add support for include test and exclude to the eval source map devtool plugin

Performance

webpacks AST can be passed directly from loader to webpack to avoid extra parsing

Unused modules are no longer unnecessarly concatenated

Add a ProfilingPlugin which write a (Chrome) profile file which includes timings of plugins

Migrate to using for of instead of forEach

Migrate to using Map and Set instead of Objects

Migrate to using includes instead of indexOf

Replaced some RegExp with string methods

Queue don't enqueues the same job twice

Use faster md4 hash for hashing by default

Optimization

When using more than 25 exports mangled export names are shorter.

script tags are no longer text/javascript and async as this are the default values (saves a few bytes)

The concatenated module now generates a bit less code

constant replacements now don't need __webpack_require__ and argument is omitted

Defaults

webpack now looks for the .wasm, .mjs, .js and .json extensions in this order

output.pathinfo is now on by default in develoment mode

in-memory caching is now off by default in production

entry defaults to ./src

output.path defaults to ./dist

Use production defaults when omiting the mode option

Usage

Add detailed progress reporting to SourceMapDevToolPlugin

removed plugins now give a useful error message

Stats

Sizes are now shown in kiB instead of kB in Stats

entrypoints are now shows by default in Stats

chunks now display <{parents}> >{children}< and ={siblings}= in Stats

add buildAt time to stats

stats json now includes the output path

Syntax

A resource query is supported in context

Referencing entry point name in import() now emits a error instead of a warning

Upgraded to acorn 5 and support ES 2018

Plugins

done is now an async hook

Bugfixes

Generated comments no longer break on */

webpack no longer modifies the passed options object

Compiler "watch-run" hook now has the Compiler as first parameter

add output.chunkCallbackName to the schema to allow configurating WebWorker template

Using module.id/loaded now correctly bails out of Module Concatentation (Scope Hoisting)

OccurenceOrderPlugin now sorts modules in correct order (instead of reversed)

timestamps for files are read from watcher when calling Watching.invalidate

fix incorrect -! behavior with post loaders

add run and watchRun hooks for MultiCompiler

this is now undefined in ESM

VariableDeclaration are correctly identified as var, const or let

Parser now parse the source code with the correct source type (module/script) when the module type javascript/dynamic or javascript/module is used.

don't crash on missing modules with buildMeta of null

add original-fs module for electron targets

HMRPlugin can be added to the Compiler outside of plugins

Internal changes

Replaced plugin calls with tap calls (new plugin system)

Migrated many deprecated plugins to new plugin system API

added buildMeta.exportsType: "default" for json modules

Remove unused methods from Parser (parserStringArray, parserCalculatedStringArray)

Remove ability to clear BasicEvaluatedExpression and to have multiple types

Buffer.from instead of new Buffer

Avoid using forEach and use for of instead

Use neo-async instead of async

Update tapable and enhanced-resolve dependencies to new major versions

Use prettier

Removed features

removed module.loaders

removed loaderContext.options

removed Compilation.notCacheable flag

removed NoErrorsPlugin

removed Dependency.isEqualResource

removed NewWatchingPlugin

removed CommonsChunkPlugin

Breaking changes for plugins/loaders

new plugin system

plugin method is backward-compatible

Plugins should use Compiler.hooks.xxx.tap(<plugin name>, fn) now

New major version of enhanced-resolve

Templates for chunks may now generate multiple assets

Chunk.chunks/parents/blocks are no longer Arrays. A Set is used internally and there are methods to access it.

Parser.scope.renames and Parser.scope.definitions are no longer Objects/Arrays, but Map/Sets.

Parser uses StackedSetMap (LevelDB-like datastructure) instead of Arrays

Compiler.options is no longer set while applying plugins

Harmony Dependencies has changed because of refactoring

Dependency.getReference() may now return a weak property. Dependency.weak is now used by the Dependency base class and returned in the base impl of getReference()

Constructor arguments changed for all Modules

Merged options into options object for ContextModule and resolveDependencies

Changed and renamed dependencies for `import()

Moved Compiler.resolvers into Compiler.resolverFactory accessible with plugins

Dependency.isEqualResource has been replaced with Dependency.getResourceIdentifier

Methods on Template are now static

A new RuntimeTemplate class has been added and outputOptions and requestShortener has been moved to this class

Many methods has been updated to use the RuntimeTemplate instead

We plan to move code which accesses the runtime to this new class

Module.meta has been replaced with Module.buildMeta

Module.buildInfo and Module.factoryMeta have been added

Some properties of Module have been moved into the new objects

added loaderContext.rootContext which points to the context options. Loaders may use it to make stuff relative to the application root.

add this.hot flag to loader context when HMR is enabled

buildMeta.harmony has been replaced with buildMeta.exportsType: "namespace

The chunk graph has changed:

Before: Chunks were connected with parent-child-relationships.

Now: ChunkGroups are connected with parent-child-relationships. ChunkGroups contain Chunks in order.

Before: AsyncDependenciesBlocks reference a list of Chunks in order.

Now: AsyncDependenciesBlocks reference a single ChunkGroup.

file/contextTimestamps are Maps now

map/foreach Chunks/Modules/Parents methods are now deprecated/removed

NormalModule accept options object in Constructor

Added required generator argument for NormalModule

Added createGenerator and generator hooks for NormalModuleFactory to customize code generation

Allow to customize render manifest for Chunks via hooks

Commits

The new version differs by 838 commits.

213226e 4.0.0

fde0183 Merge pull request #6081 from webpack/formating/prettier

b6396e7 update stats

f32bd41 fix linting

5238159 run prettier on existing code

518d1e0 replace js-beautify with prettier

4c25bfb 4.0.0-beta.3

dd93716 Merge pull request #6296 from shellscape/fix/hmr-before-node-stuff

7a07901 Merge pull request #6563 from webpack/performance/assign-depth

c7eb895 Merge pull request #6452 from webpack/update_acorn

9179980 Merge pull request #6551 from nveenjain/fix/templatemd

e52f323 optimize performance of assignDepth

6bf5df5 Fixed template.md

90ab23a Merge branch 'master' into fix/hmr-before-node-stuff

b0949cb add integration test for spread operator

There are 250 commits in total.

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

Your Greenkeeper bot :palm_tree:
greenkeeper
opened by greenkeeper[bot] 75
chore: Release

This PR was opened by release GitHub action. When you're ready to do a release, you can merge this and release action will automatically publishes to npm registry. If you're not ready to do a release yet, that's fine, whenever you add more commits to master, this PR will be updated.
cla: yes

opened by github-actions[bot] 71
chore: Update lerna to the latest version 🚀
Version 3.0.0 of lerna was just published.

Dependency lerna

Current Version 2.11.0

Type devDependency

The version 3.0.0 is not covered by your current version range.

If you don’t accept this pull request, your project will work just like it did before. However, you might be missing out on a bunch of new features, fixes and/or performance improvements from the dependency update.

It might be worth looking into these changes and trying to get this project onto the latest version of lerna.

If you have a solid test suite and good coverage, a passing build is a strong indicator that you can take advantage of these changes directly by merging the proposed change into your project. If the build fails or you don’t have such unconditional trust in your tests, this branch is a great starting point for you to work on the update.

Release Notes
v3.0.0
Bug Fixes

add: Always use POSIX paths when computing relative file: specifiers (ffe354f)

add: Support explicit & implicit relative file: specifiers (41f231f)

create: Use filename without scope when generating imports from test file (acfd48b)

publish: Improve npm pack experience (627cfc2)

Features

changed: Support list output options (6ecdd83)

list: Extract @lerna/listable utility (bf56018)

list: Improve scriptability with several new options (2e204af)

npm-publish: Add npmPack export (088ea54)

package: Add tarball property (be453cd)

publish: Run npm pack before npm publish (8d80b2c)

publish: Validate npm registry and package access prerequisites (ebc8ba6), closes #55 #1045 #1347

Add @lerna/log-packed module, extracted from npm (9c767ac)

version: Split lerna version from of lerna publish (#1522) (8b97394),
closes #277 #936 #956 #961 #1056 #1118 #1385 #1483 #1494

BREAKING CHANGES

lerna changed

The package names emitted to stdout are no longer prefixed by a "- ", and private packages are no longer displayed by default.

lerna ls

The default output of lerna ls no longer shows version strings or private packages.

The new alias lerna la resembles the old output, with the addition of relative path to the package

The new alias lerna ll is a shortcut for the new --long option

A new --parseable option has been added to aid magical piping incantations

lerna publish

--preid now defaults to "alpha" during prereleases:

The previous default for this option was undefined, which led to an awkward "1.0.1-0" result when passed to semver.inc().

The new default "alpha" yields a much more useful "1.0.1-alpha.0" result. Any previous prerelease ID will be preserved, justas it was before.

--no-verify is no longer passed to git commit by default, but controlled by the new --commit-hooks option:

The previous behavior was too overzealous, and the new option operates exactly like the corresponding npm version option of the same name.

As long as your pre-commit hooks are properly scoped to ignore changes in package.json files, this change should not affect you. If that is not the case, you may pass --no-commit-hooks to restore the previous behavior.

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

Your Greenkeeper bot :palm_tree:
greenkeeper cla: yes
opened by greenkeeper[bot] 55
refactor(slider): Functional slider tick visuals with css background

So one of the few components you make it difficult to test for is the slider, but AFAIKT, this completely resolves #4729. Outside of the suite, I deployed and performed a pretty rigid stress test and it behaviorally matches up. Maybe the remove method could be taken out, since the new append method essentially just replaces values, but I left an updated definition of it just in case it *could be called from elsewhere to hide ticks, between altering tick marker numbers, etc...

cc @moog16 please comb this, even aside from my assurance of it behaving implacably in browser. Meaning, rename "append" to "create" and fix my typo on line 140 of the adapter if you want. :)
cla: yes

opened by jonjohnjohnson 31
feat(expansion-panel): Add Expansion Panel component
closes #46

This is ready for code review.

Engineering Outline

TODO:

[x] Accordion

[x] Block toggleExpansion() when target is not appropriate

[x] Docs/README

[x] RTL

[x] Theming

[ ] Accessibility

[x] Tests

[x] SCSS mixins and partials

[x] ~~Define keyframes~~

[x] Tab key selection

[ ] No JS variant

[x] Closure compatibility

I need guidance on a few things:

I set the inner HTML of the expansion icon(s) to expand_more in the foundation because the spec shows that exact icon. Is this preferable to actually inserting the icon into the header manually and not having the user create the icon at all?

The spec doesn't say how to style the text in the body or footer sections. Should I use the "Label" text style (15sp Roboto Regular; 87% black)?

The theming is still a bit weak. With dark theme going away, what is the proper way to implement component theming in a dark context?

needs-design-guidance
opened by griest024 31
Update lerna to the latest version 🚀
Version 2.0.0-rc.1 of lerna just got published.

Dependency lerna

Current Version 2.0.0-beta.36

Type devDependency

The version 2.0.0-rc.1 is not covered by your current version range.

Without accepting this pull request your project will work just like it did before. There might be a bunch of new features, fixes and perf improvements that the maintainers worked on for you though.

I recommend you look into these changes and try to get onto the latest version of lerna. Given that you have a decent test suite, a passing build is a strong indicator that you can take advantage of these changes by merging the proposed change into your project. Otherwise this branch is a great starting point for you to work on the update.

Release Notes
v2.0.0-rc.1
v2.0.0-rc.1 (2017-04-07)

A silent (but deadly) bug slipped into the last release. Many thanks to (@timdp) for discovering it.

🐛 Bug Fix

#744 Fix package.json updates during publish. (@evocateur)

Commits

The new version differs by 94 commits .

d12c4da 2.0.0-rc.1

c1e7910 Update changelog for v2.0.0-rc.1

ad7e214 Fix package.json updates during publish (#744)

634d16d fix: use relative path for file: dependency

f81a940 2.0.0-rc.0

7319e56 v2.0.0-rc.0 changelog (#739)

25e9b9c Use babel-preset-env (#738)

c2fbcb2 Update eslint, config, and plugins (#737)

c9ed57a Command: pass explicit CWD to Repository constructor (#734)

0cd40ec Commands: pass execOpts to all utility executions to avoid implicit process.cwd() (#733)

114a07a Update FAQ.md (#736)

048d0cb test(all): Refactor into Jest idioms, adding integration tests (#714)

6de5cc5 fix(PackageUtilities): remove public API, it's broken anyway (#732)

e4b9454 fix(BootstrapCommand): symlink binaries of scoped packages correctly (#731)

2be31cd Upgrade progress (#729)

There are 94 commits in total. See the full diff.

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.

Your Greenkeeper Bot :palm_tree:
do-not-merge
opened by greenkeeper[bot] 30
Update webpack-dev-server to the latest version 🚀
☝️ Greenkeeper’s updated Terms of Service will come into effect on April 6th, 2018.

Version 3.0.0 of webpack-dev-server was just published.

Dependency webpack-dev-server

Current Version 2.11.1

Type devDependency

The version 3.0.0 is not covered by your current version range.

If you don’t accept this pull request, your project will work just like it did before. However, you might be missing out on a bunch of new features, fixes and/or performance improvements from the dependency update.

It might be worth looking into these changes and trying to get this project onto the latest version of webpack-dev-server.

If you have a solid test suite and good coverage, a passing build is a strong indicator that you can take advantage of these changes directly by merging the proposed change into your project. If the build fails or you don’t have such unconditional trust in your tests, this branch is a great starting point for you to work on the update.

Release Notes
v3.0.0
Updates

Breaking change: webpack v4 is now supported. Older versions of webpack are not supported.

Breaking change: drops support for Node.js v4, going forward we only support v6+ (same as webpack).

webpack-dev-middleware updated to v2 (see changes).

Bugfixes

After starting webpack-dev-server with an error in your code, it would not reload the page after fixing that error (#1317).

DynamicEntryPlugin is now supported correctly (#1319).

Huge thanks to all the contributors!

Please note that webpack-serve will eventually be the successor of webpack-dev-server. The core features already work so if you're brave enough give it a try!

Commits

The new version differs by 20 commits.

6e1d886 3.0.0

eedf10f Try again at fixing CI by upping timeout (necessary for node v6)

dfe137c Hopefully fix failing CI tests (the hacky way)

1e7acca Actually make the yargs version test do something

cdd10fa Stop testing node v4 on travis ci

7378e3e Merge branch 'webpack-4'

ab4eeb0 Fix page not reloading after fixing first error on page (#1317)

dbea323 Update deps

f4f14ce Fix support for DynamicEntryPlugin (#1319)

398c773 3.0.0-beta.2

cdc7288 Simplify build webpack configs thanks to webpack 4

e603e0d Allow no publicPath or entry point (#1310)

9852a5f 3.0.0-beta.1

6db2e85 Fix tests after webpack v4 upgrade

eb2f0a9 Fix option rename in webpack-dev-middleware

There are 20 commits in total.

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

Your Greenkeeper bot :palm_tree:
greenkeeper cla: yes
opened by greenkeeper[bot] 29
[MDCDialog] Focus is set to an element outside the dialog when the dialog is open
Bug report

When scrimClickAction is set to '', clicking on the scrim then pressing tab sets focus to an element outside the dialog.

Steps to reproduce

Set the scrimClickAction of a MDCDialog to ''

Open the dialog

Click the scrim

Press tab

https://codepen.io/mdooley1/pen/RwJXqqL

Actual behavior

Focus is set to a focusable element outside the dialog.

Expected behavior

Focus remains on elements within the dialog.

Your Environment:

| Software | Version(s) | | ---------------- | ---------- | | MDC Web | v14 | Browser | Version 108.0.5359.9 | Operating System | macOS 12.6.1
bug
opened by mdooley 0
chore(deps): bump qs from 6.5.2 to 6.5.3
Bumps qs from 6.5.2 to 6.5.3.

Changelog

Sourced from qs's changelog.

6.5.3

[Fix] parse: ignore __proto__ keys (#428)

[Fix] utils.merge`: avoid a crash with a null target and a truthy non-array source

[Fix] correctly parse nested arrays

[Fix] stringify: fix a crash with strictNullHandling and a custom filter/serializeDate (#279)

[Fix] utils: merge: fix crash when source is a truthy primitive & no options are provided

[Fix] when parseArrays is false, properly handle keys ending in []

[Fix] fix for an impossible situation: when the formatter is called with a non-string value

[Fix] utils.merge: avoid a crash with a null target and an array source

[Refactor] utils: reduce observable [[Get]]s

[Refactor] use cached Array.isArray

[Refactor] stringify: Avoid arr = arr.concat(...), push to the existing instance (#269)

[Refactor] parse: only need to reassign the var once

[Robustness] stringify: avoid relying on a global undefined (#427)

[readme] remove travis badge; add github actions/codecov badges; update URLs

[Docs] Clean up license text so it’s properly detected as BSD-3-Clause

[Docs] Clarify the need for "arrayLimit" option

[meta] fix README.md (#399)

[meta] add FUNDING.yml

[actions] backport actions from main

[Tests] always use String(x) over x.toString()

[Tests] remove nonexistent tape option

[Dev Deps] backport from main

Commits

298bfa5 v6.5.3

ed0f5dc [Fix] parse: ignore __proto__ keys (#428)

691e739 [Robustness] stringify: avoid relying on a global undefined (#427)

1072d57 [readme] remove travis badge; add github actions/codecov badges; update URLs

12ac1c4 [meta] fix README.md (#399)

0338716 [actions] backport actions from main

5639c20 Clean up license text so it’s properly detected as BSD-3-Clause

51b8a0b add FUNDING.yml

45f6759 [Fix] fix for an impossible situation: when the formatter is called with a no...

f814a7f [Dev Deps] backport from main

Additional commits viewable in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 0

Dependency	webpack
Current Version	3.11.0
Type	devDependency

Dependency	lerna
Current Version	2.11.0
Type	devDependency

Dependency	lerna
Current Version	2.0.0-beta.36
Type	devDependency

Dependency	webpack-dev-server
Current Version	2.11.1
Type	devDependency

Releases(v14.0.0)

v14.0.0(Apr 28, 2022)

See CHANGELOG file to see what's changed in new release.
Source code(tar.gz)
Source code(zip)
v13.0.0(Sep 24, 2021)

See CHANGELOG file to see what's changed in new release.
Source code(tar.gz)
Source code(zip)
v12.0.0(Jul 27, 2021)

See CHANGELOG file to see what's changed in new release.
Source code(tar.gz)
Source code(zip)
v11.0.0(Apr 15, 2021)

See CHANGELOG file to see what's changed in new release.
Source code(tar.gz)
Source code(zip)
v10.0.0(Feb 5, 2021)

See CHANGELOG file to see what's changed in new release.
Source code(tar.gz)
Source code(zip)
v9.0.0(Dec 29, 2020)

See CHANGELOG file to see what's changed in new release.
Source code(tar.gz)
Source code(zip)
v8.0.0(Nov 2, 2020)

See CHANGELOG file to see what's changed in new release.
Source code(tar.gz)
Source code(zip)
v7.0.0(Jun 23, 2020)

See CHANGELOG file to see what's changed in new release.
Source code(tar.gz)
Source code(zip)
v5.1.0(Feb 25, 2020)
Changelog

Bug Fixes

list: ensure sass mixin works if leading is provided in px (265ecba)

textfield: replace notched outline and ripple <div>s with <span> (765caef)

typography: ensure global variables can override styles with module system (7ec9697)

typography: Separate @material/feature-targeting, was causing Sass test to fail (772a03e)

Features

typography: add CSS custom properties (6a56f38)

Source code(tar.gz)
Source code(zip)
v5.0.0(Feb 14, 2020)
Changelog

Bug Fixes

linear-progress: support aria attributes (#5248) (7084b40), closes #5248

auto-init: Fixed issue with multiple default exports (#5464) (8ddd5c6)

button: Fix outline & ink color according to spec guidance (#5268) (ee1a68c)

button: Fixed parameter default value in height mixin (#5244) (b0cecf1)

checkbox: change checkbox event type from change to click and add some logic for IE browser (#5316) (2e491de), closes #4893

checkbox: Disabled state colors in IE11 high contrast mode (#5263) (d6a1d4b)

checkbox: Replace unique-id with custom color hash functio… (#5404) (7be9e4a)

checkbox: update disabled color values (#5209) (821871e)

chips: .d.ts file generated with syntax error (d154836)

chips: .d.ts file generated with syntax error (#5577) (98f7faa)

chips: Do not throw error if chip set becomes empty (#5290) (f978109)

chips: Fix browser back nav in FF when removing chip with… (#5537) (a1a0deb)

chips: Move touch target inside primary action (ad3bbf7)

core: Fix canary release by excluding test files from default tsconfig (#5317) (c916008)

data-table: change svg attribute name viewbox to viewBox (#5483) (#5493) (f3adce8)

dialog: Move aria roles from dialog root to dialog surface… (#5239) (c704b71)

elevation: Update overlay color mixin (#5331) (b723dfa)

fab: Add missing dep to fab package.json. (#5236) (e0f6fd9)

fab: Add overflow: visible to make touch target visible in… (#5241) (5850080)

fab: Adjust fab line-height (#5254) (525989b)

fab: Adjust fab line-height to center text (#5258) (591a6ad)

floatinglabel: Estimate hidden scroll width (#5448) (981ec9b)

list: Ensure disabled colors apply to primary and secondary text (#5322) (878a08b)

notched-outline: Restore component test (#5449) (4269133)

radio: update disabled color values (#5210) (491fddc)

select: Do not fire change event on programmatic change (#5255) (ec72968)

select: Fix notch outline width when floating (#5319) (1c494e5)

slider: slider track not visible (#5512) (f2426d2)

slider: use secondary custom property color for slider container (#5132) (aa8e43e)

slider: Visual bug when slider value is displayed as "-0" (3fc3ab5)

snackbar: add explicit width for label to wrap in ie11 (#5497) (cd49033)

snackbar: adjust mixins to meet spec (#5477) (f16f15b)

switch: add transform transition to switch control to avoid overflow-x issues (8c11ea2)

switch: fix strict generic checks (7f5e0c2)

switch: handle aria-checked correctly. (#5202) (#5357) (d245a1a)

switch: set track border to be transparent (#5323) (397905b)

testing: Revert change from #5299. (#5324) (5fb62be)

textfield: add placeholder mixins and fix disabled colors (#5360) (0a40ced)

textfield: add separate classes for leading/trailing icons (#5367) (70c708d)

textfield: change root element to (#5439) (d8d9502)

textfield: hide filled-variant floating label at <52px (#5553) (5ff3380)

textfield: incorrect mixin forward path (#5554) (3e782d8)

textfield: move ripple to separate element (c541ebe)

textfield: outlined trailing icon's position (#5496) (93e2288)

textfield: prevent placeholder styles from collapsing with minifiers (d07c78d)

textfield: use correct disabled colors for IE11 high contrast (5353985)

add missing SASS dependencies (#5337) (d2ae6e1)

Remove edge detection for CSS custom properties (#5264) (fe444ac)

Code Refactoring

migrate to the Sass module system (#5453) (faa9af3)

grid-list: Deprecate component (#5499) (cf33f11)

touchtarget: Rename mdc-touch-target-component => mdc… (#5245) (afe0dd1)

Features

button: Add disabled state color mixins (#5232) (b5eb51e)

button: Add overflow ellipsis mixin (#5352) (47949b0)

button: Setup elevation overlay (#5256) (3cbee6d)

card: Add elevation overlay structure (#5282) (aa0eba4)

chips: Add elevation overlay structure (#5279) (3e560b3)

chips: Announce when chips are removed (b3f70eb)

chips: Consolidate interaction event handlers (#5251) (5729943)

dialog: Add elevation overlay structure (#5283) (b8bc4a2)

dom: Add focus trap utility. (#5505) (63f357d)

dom: Create announcer utility (32c1df1)

elevation: Add elevation overlay mixins (#5249) (b4cfdc4)

elevation: Update elevation mixins (#5304) (ba879b6)

fab: Add elevation overlay structure (#5278) (e89750d)

fab: Add support for increased touch target to mini FAB. (#5231) (0c4d8f3)

floating-label: add feature targeting for styles (#5287) (b240bcc)

icon-button: Add disabled state color mixins (#5246) (7161170)

line-ripple: add active/inactive states to line-ripple (b6c7f62)

line-ripple: add feature targeting for styles (#5292) (391674a)

menu: Add elevation overlay structure (#5280) (7fd17ce)

notched-outline: add feature targeting for styles (#5289) (c483774)

progress-indicator: Add common interface for progress indicators (#5564) (ea863cb)

switch: Add elevation overlay structure (#5281) (50f110a)

Add index stylesheets to each MDC Web package (#5539) (1814866)

Add index stylesheets to mdc-image-list and mdc-layout-gr… (#5546) (3a85313)

Use @use syntax in material-components-web Sass file and… (#5573) (b4727e4)

switch: Restructure DOM (#5312) (0ec1fab)

text-field: Add disabled state color mixins (#5208) (66299b6)

text-field: add feature targeting for styles (#5378) (e8a9936)

textfield: add end-alignment (#5356) (847dd1a)

Reverts

Revert "feat(switch): Add elevation overlay structure (#5281)" (#5329) (1fbf5bd), closes #5281 #5329

"fix(checkbox): change checkbox event type from change to click and add some logic for IE browser" (ba30399)

feat(chips): Consolidate interaction event handlers (#5251) (#5301) (5e45d77)

fix(chips): Do not throw error if chip set becomes empty (#5300) (d10e8cd)

fix(select): Do not fire change event on programmatic change (#5255) (#5302) (ad9dfe7)

BREAKING CHANGES

chips: The touch target and text now appear inside the primary action element. Please see the readme for markup changes.

text-field: Redundant mixins mdc-text-field-textarea-fill-color, mdc-text-field-textarea-stroke-color, mdc-text-field-fullwidth-bottom-line-color removed. Instead, use mdc-text-field-fill-color, mdc-text-field-outline-color, and mdc-text-field-bottom-line-color respectively to achieve the same effect.

textfield: Filled textfields will no longer show a floating label at certain densities. This can be overridden by setting $mdc-text-field-minimum-height-for-filled-label: 40px

chips: Both MDCChipAdapter and MDCChipSetAdapter have new methods. MDCChipSetFoundation event handlers now accept the corresponding chip event detail interface as the sole argument. The root property has been removed from the MDCChipRemovalEventDetail interface.

line-ripple: mdc-line-ripple-color() mixin has been renamed to mdc-line-ripple-active-color()

grid-list: Per the deprecation notice for grid-list, this component has been removed from MDC-Web. Some of its functionalities are available in the MDC Image List package instead. It is recommended that you migrate to the mdc-image-list package to continue to receive new features and updates.

Four variables and a mixin in mdc-textfield were renamed to use a mdc-text-field- prefix when depended on via @import (formerly mdc-required-text-field-label-asterisk_, now required-label-asterisk_).

textfield: icons must use .mdc-text-field__icon--leading or .mdc-text-field__icon--trailing classes. mdc-text-field-icon-color() mixin has been split into mdc-text-field-leading-icon-color() and mdc-text-field-trailing-icon-color().

switch: Added setNativeControlAttr method in mdc-switch adapter.

textfield: filled text fields must include a <div class="mdc-text-field__ripple"></div>

switch: Switch DOM structure has changed. See switch README for details

button: Variable $mdc-button-disabled-container-fill-color renamed to $mdc-button-disabled-container-color.

Removed $edgeOptOut option from mdc-theme-prop() Sass mixin.

chips: the handleInteraction and handleTrailingIconInteraction handlers have been removed from the MDCChipFoundation. The handleClick handler has been added to the MDCChipFoundation

Adds new adapter methods to MDCLinearProgressAdapter.

elevation: Functions moved into the _functions.scss file

touchtarget: Renames mixin from mdc-touch-target-component => mdc-touch-target-margin

checkbox: remove event listener for 'change' and add event listener for 'click'.

Add handleClick() method in foundation to handle click event.

Add setCheck() method into component to change check status.

NOTE: @import on updated Sass files may not work until https://github.com/webpack-contrib/sass-loader/issues/804 is fixed, use @use instead.
Source code(tar.gz)
Source code(zip)
v0.1.0(Dec 15, 2016)

This is the first release of Material Components for the web! 🎉
Source code(tar.gz)
Source code(zip)