Material Design Web Components

Related tags

React material-web
Overview

Material Web

Test Status GitHub issues by-label

IMPORTANT: Material Web is a work in progress and subject to major changes until 1.0 release.

Material Web is Google’s UI toolkit for building beautiful, accessible web applications. Material Web is implemented as a collection of web components.

The Material team is currently working on Material You (Material Design 3) support for Material components.

Developers using this library should expect some big changes as we work to improve our codebase and ease of use and implement the newest Material Design.

A few notable changes you should expect:

  • UX changes as we adopt the new designs (production users will definitely want to pin to an appropriate release, not mainline)

  • A single npm package (@material/web)

  • Simplification of tag name prefixes to md- (CSS custom properties will be --md-)

  • Components as top-level folders which contain all variants

    Example: top-app-bar and top-app-bar-fixed will be placed in the same folder: top-app-bar

  • Components with variant attributes will be split into several variant components:

    Example: mwc-button will be split into md-text-button, md-filled-button, md-tonal-button, md-outlined-button, etc

API demos

Theming Guide

Sandbox demo on Glitch

Contributing Guide

Components

Component Status Issues
<mwc-button> Published on npm Issues
<mwc-bottom-app-bar> TBD Issues
<mwc-card> TBD Issues
<mwc-checkbox> Published on npm Issues
<mwc-chip> TBD Issues
<mwc-circular-progress> Published on npm Issues
<mwc-circular-progress-four-color> Published on npm Issues
<mwc-data-table> TBD Issues
<mwc-dialog> Published on npm Issues
<mwc-drawer> Published on npm Issues
<mwc-fab> Published on npm Issues
<mwc-formfield> Published on npm Issues
<mwc-icon-button-toggle> Published on npm Issues
<mwc-icon-button> Published on npm Issues
<mwc-icon> Published on npm Issues
<mwc-linear-progress> Published on npm Issues
<mwc-list> Published on npm Issues
<mwc-menu> Published on npm Issues
<mwc-radio> Published on npm Issues
<mwc-select> Published on npm Issues
<mwc-slider> Published on npm Issues
<mwc-snackbar> Published on npm Issues
<mwc-switch> Published on npm Issues
<mwc-tab-bar> Published on npm Issues
<mwc-tab> Published on npm Issues
<mwc-textarea> Published on npm Issues
<mwc-textfield> Published on npm Issues
<mwc-tooltip> TBD Issues
<mwc-top-app-bar-fixed> Published on npm Issues
<mwc-top-app-bar> Published on npm Issues

Quick start

1) Install

Install a component from NPM:

npm install @material/mwc-button @webcomponents/webcomponentsjs

2) Write HTML and JavaScript

Import the component's JavaScript module, use the component in your HTML, and control it with JavaScript, just like you would with a built-in element such as <button>:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My Example App</title>

    <!-- Add support for Web Components to older browsers. -->
    <script src="./node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>

    <!-- Your application must load the Roboto and Material Icons fonts. -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
  </head>
  <body>
    <!-- Use Web Components in your HTML like regular built-in elements. -->
    <mwc-button id="myButton" label="Click Me!" raised></mwc-button>

    <!-- Material Web uses standard JavaScript modules. -->
    <script type="module">

      // Importing this module registers <mwc-button> as an element that you
      // can use in this page.
      //
      // Note this import is a bare module specifier, so it must be converted
      // to a path using a server such as Web Dev Server.
      import '@material/mwc-button';

      // Standard DOM APIs work with Web Components just like they do for
      // built-in elements.
      const button = document.querySelector('#myButton');
      button.addEventListener('click', () => {
        alert('You clicked!');
      });
    </script>
  </body>
</html>

3) Serve

Serve your HTML with any server or build process that supports bare module specifier resolution (see next section):

npm install --save-dev @web/dev-server
npx web-dev-server --node-resolve

Bare module specifiers

Material Web is published as standard JavaScript modules that use bare module specifiers. Bare module specifiers are not yet supported by browsers, so it is necessary to use a tool that transforms them to a path (for example from @material/mwc-button to ./node_modules/@material/mwc-button/mwc-button.js).

Two great choices for tools that do this are:

Fonts

Most applications should include the following tags in their main HTML file to ensure that text and icons render correctly:

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">

Material Web defaults to using the Roboto font for text, and the Material Icons font for icons. These fonts are not automatically loaded, so it is the application's responsiblity to ensure that they are loaded.

Note that if you load the Material Icons font in a different way to the recommendation shown above, be sure to include font-display: block in your @font-face CSS rule. This prevents icons from initially displaying their raw ligature text before the font has loaded. The <link> tag recommended above automaticaly handles this setting.

Supporting older browsers

Material Web uses modern browser features that are natively supported in the latest versions of Chrome, Safari, Firefox, and Edge. IE11 and some older versions of other browsers are also supported, but they require additional build steps and polyfills.

Feature
Chrome

Safari

Firefox

Edge

IE11
Web Components Yes Yes Yes Yes Polyfill *
Modules Yes Yes Yes Yes Transform *
ES2015 Yes Yes Yes Yes Transpile *

Web Components

To support Web Components in IE11 and other older browsers, install the Web Components Polyfills:

npm install @webcomponents/webcomponentsjs

And include the webcomponents-loader.js script in your HTML, which detects when polyfills are needed and loads them automatically:

<!-- Add support for Web Components to IE11. -->
<script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>

Modules

To support IE11 or other older browsers that do not support JavaScript modules, you must transform JavaScript modules to classic JavaScript scripts. Rollup is a popular tool that can consume JavaScript modules and produce a number of other formats, such as AMD. Be sure to use the rollup-plugin-node-resolve plugin to resolve bare module specifiers, as mentioned above.

ES2015

If you support IE11 or other older browsers that do not support the latest version of JavaScript, you must transpile your application to ES5. Babel is a popular tool that does this. You can integrate Babel transpilation into a Rollup configuration using rollup-plugin-babel.

Contributing

Clone and setup the repo:

git clone [email protected]:material-components/material-web.git mwc
cd mwc
npm install
npm run build

View the demos:

npm run dev
http://127.0.0.1:8000/demos/

Run all tests:

npm run test

Run tests for a specific component:

npm run test -- --packages=mwc-button

Run benchmarks for a specific component:

npm run test:bench -- --package list

Advanced developer workflow:

npm install

# (persistent) build source files on change
npm run watch

# another terminal (persistent) - viewing auto-reload demos
npm run dev -- --watch -p <optional port>

# for testing:
# another terminal (persistent) - build tests (must run after normal watch)
npm run watch:tests

# another terminal (persistent) - debug tests
npm run test:debug -- --autoWatch --packages <comma sepaarated package names> # e.g. mwc-switch,mwc-text*
Comments
  • publish 18 components on the npm

    publish 18 components on the npm

    18 components are private

    https://github.com/material-components/material-components-web-components/search?q=%22%5C%22private%5C%22%3A+true%22&unscoped_q=%22%5C%22private%5C%22%3A+true%22

    opened by JosefJezek 40
  • actionItems only show if drawer is modal

    actionItems only show if drawer is modal

    I'm submitting a:

    • [ x] bug report
    • [ ] feature request

    What OS are you using? kubuntu 19.10

    What browser(s) is this bug affecting: chromium, firefox. (probably all browsers)

    Current behavior: When using a top-app-bar with a drawer, the icons in the "actionItems" slot only show if the drawer has type="modal"

    Expected behavior: The drawer type should not affect the actionItems in the top-app-bar

    Steps to reproduce: In the drawer demo, remove the type="modal" from the last example and see the icons on the right side of the top-app-bar disappear

    Type: Bug Component: Drawer Component: Top App Bar Focus Area: Components Severity: Medium 
    opened by AlexanderLang 24
  • Implemented MDC Card Components

    Implemented MDC Card Components

    PR for issue #231

    Implemented:

    • implement in typescript
    • mwc-card
      • change stroke to outlined to match MDC
      • add border-top-left, border-top-right, border-bottom-right, border-bottom-left as css properties
      • add readme
    • mwc-card-primary-action
      • add slot for content
      • add readme
    • mwc-card-meda
      • add aspectRatio
        • square
        • 16-9
      • add slot for content over image
      • add background-image as a css-property
      • add border-top-left, border-top-right, border-bottom-right, border-bottom-left as css properties
      • add readme
    • mwc-card-actions
      • add fullBleed
      • add slot for buttons
      • add slot for icons
      • add readme
    • update card demo
    • update card unit test
    • upgrade to mdc card 0.44.0
    cla: yes Status: Blocked Component: Card 
    opened by zoofadoofa 20
  • mwc-select does not work properly inside a mwc-dialog

    mwc-select does not work properly inside a mwc-dialog

    I'm submitting a:

    • [x] bug report
    • [ ] feature request

    What OS are you using? Kubuntu

    What browser(s) is this bug affecting: Current Chrome

    Current behavior: mwc-select does not work inside a mwc-dialog. It's menu displays inside the dialog's content pane and makes it grow / show scrollbars.

    Expected behavior: the menu should display above the dialog

    Steps to reproduce: Open a dialog with a select with lots of items in it.

    Related code:

          <mwc-dialog id="dialog" title="Dialog">
            <form>
              <mwc-select>
                <mwc-list-item>01</mwc-list-item>
                <mwc-list-item>02</mwc-list-item>
                <mwc-list-item>03</mwc-list-item>
                <mwc-list-item>04</mwc-list-item>
                <mwc-list-item>05</mwc-list-item>
                <mwc-list-item>06</mwc-list-item>
                <mwc-list-item>07</mwc-list-item>
                <mwc-list-item>08</mwc-list-item>
                <mwc-list-item>09</mwc-list-item>
                <mwc-list-item>10</mwc-list-item>
                <mwc-list-item>11</mwc-list-item>
                <mwc-list-item>12</mwc-list-item>
                <mwc-list-item>13</mwc-list-item>
                <mwc-list-item>14</mwc-list-item>
                <mwc-list-item>15</mwc-list-item>
                <mwc-list-item>16</mwc-list-item>
                <mwc-list-item>17</mwc-list-item>
                <mwc-list-item>18</mwc-list-item>
                <mwc-list-item>19</mwc-list-item>
              </mwc-select>
            </form>
            <mwc-button slot="primaryAction" @click=${this._save}>Speichern</mwc-button>
          </mwc-dialog>
    

    Other information:

    Type: Bug Component: Dialog Component: Select Focus Area: Components 
    opened by holgerengels 19
  • convert textfield to typescript

    convert textfield to typescript

    This is my first attempt at converting the textfield component into typescript. A few things to note:

    • I wasn't able to get the ripple to function properly. It kept giving me nasty "can't access classList of undefined" errors. I removed it, although I'm not sure what side effects it might have, if any. I also tried taking advantage of the ripple directive, but I couldn't get that to work either.

    • I changed the "!this.fullWidth && this.label" check in the

    • For some reason, the :focus styling was not working with the box variant of the textfield. I simply added the styling in the scss file, which a small change from :focus to :focus-within

    • I was unable to access the initialization method, which is very handily provided by the component-element class. I got around this by simply calling a private initFactories method inside the createAdapter method, right before the adapter is created and returned. This ensures that the necessary factories are initialized before the adapter gets created, since it relies on these factories to do work.

    Hope this is useful in some way, and I'm excited to be able to contribute in any way I can.

    cla: no Component: Text Field 
    opened by kr05 18
  • mwc-slider drag gets stuck

    mwc-slider drag gets stuck

    Describe the bug When releasing the mouse outside of container element, the mwc-slider doesn't cancel it's drag mousemove handling and keeps moving the slider when the mouse is moved back into the container element. The container element is itself a litElement web component so it might have something to do with the mouse event being handled outside of the container's shadow DOM?

    To Reproduce Steps to reproduce the behavior:

    1. Begin dragging slider
    2. Drag outside of the parent component's boundaries (to the left or right only, vertically is fine)
    3. Release the mouse
    4. Move the mouse back into the parent component and observe the slider still moving

    Expected behavior I expect the mousemove handler to be immediately cancelled when the user mouseup event happens.

    Screenshots 2020-05-07 14 37 57 (Releasing the mouse outside of the container, then moving it back in)

    Browser Version (please complete the following information):

    • OS: MacOS Catalina
    • Browser: Chrome
    • Version: Latest
    Type: Bug Feedback Requested Focus Area: Components 
    opened by cannoneyed 17
  • introduce ESLint into the build workflow

    introduce ESLint into the build workflow

    Are you interested in this?

    Basically you already had your ESLint config in the repo and what not, so I:

    • Added the correct dependencies
    • Switched to the typescript eslint parser
    • Ignored *-css.ts (these look like build artifacts?)
    • Ignored *.d.ts (again from builds?)
    • Disabled a few rules for *.ts (see below)
    • Set stylistic rules (indent and max-len) to warn (see below)

    Disabled rules

    I disabled the following for ts files:

    • no-invalid-this because we very often call this in observer functions (which eslint doesn't detect as being bound)
    • no-unused-vars because we have compiler options enabled to handle this (more accurately)
    • new-cap because we often call something like new this.mdcFoundation.foo

    Stylistic rules

    I set indent and max-len to warnings because they should ideally be turned off and Prettier (or clang-format) introduced.

    The gts repo switched over to prettier a while back iirc, so maybe we should do the same. I'm happy to take their config and add prettier here, then run it over the source.

    Commits

    I committed 5 things separately in case we do or don't want particular parts:

    • Introducing ESLint
    • Updating the ESLint config
    • Fixing lint errors (but not warnings, i.e. the above mentioned stuff)
    • Introduce eslint-plugin-wc for web component specific rules (this successfully picked up #276 for example)
    • Add linting to the build script

    cc @azakus @sorvell @frankiefu

    cla: yes 
    opened by 43081j 16
  • "mwc-ripple" has already been used with this registry

    I have an interesting use case. We are importing web components that include mdc components in one php page and web components that include mwc components (0.18.0) in another php page. Our web components are written using StencilJs. When we switch from one page to another we get the following error:

    DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "mwc-ripple" has already been used with this registry

    I saw another issue with the same error get resolved in the latest version. That scenario involved the user of unpkg/cdn. We don't use that. We build the StencilJs web components and then take the resulting javascript and import the components directly in the page.

    opened by jayhamilton 15
  • Components don't build properly with PolymerLabs/lit-element-build-rollup

    Components don't build properly with PolymerLabs/lit-element-build-rollup

    Reproduce:

    • Clone https://github.com/PolymerLabs/lit-element-build-rollup
    • Update lit-element to latest (2.1.0)
    • Build and verify that build works (it does ;))
    • Add a component e.g. npm install @material/mwc-button & import/add in my-element (The element version is 0.5.0)
    • Clean and build

    Two things happen:

    1. the build throws an error:
    src/index.js → build/index.js...
    (!) `this` has been rewritten to `undefined`
    https://rollupjs.org/guide/en#error-this-is-undefined
    node_modules/@material/mwc-button/mwc-button.js
    1: var __decorate = this && this.__decorate || function (decorators, target, key, desc) {
                        ^
    2:   var c = arguments.length,
    3:       r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
    ...and 1 other occurrence
    

    and 2. the app never renders - but throws an error in the console:

    util.js:43 Uncaught TypeError: Cannot read property 'appendChild' of null
        at detectEdgePseudoVarBug (util.js:43)
        at supportsCssVariables (util.js:76)
        at ripple-directive.js:26
    

    Using the rollup script from https://open-wc.org/building/building-rollup.html works with the mwc-elements.

    Also, other elements done with lit-element work (with the PolymerLabs/lit-element-build-rollup script).

    Theory: The TypeScript compiler creates extra 'boilerplate' code for properties that is not compatible with the simple rollup script.

    'captaincodeman' (polymer slack) suggested adding this to the typescript config of the components (I didn't have a chance to try yet):

    "noEmitHelpers": true,
    "importHelpers": true,
    
    Type: Bug Source: Hooli 
    opened by larsgk 15
  • v0.26 does not build with lit-recommended tools for experimental bare module exports

    v0.26 does not build with lit-recommended tools for experimental bare module exports

    Thanks for the new release.

    There are a couple of import statement breaking the library to run with the frontend tooling I am using (vite.js):

    • import {customElement} from 'lit/decorators' -> import {customElement} from 'lit/decorators.js' (see https://lit.dev/docs/components/decorators/#importing-decorators, or https://github.com/lit/lit/issues/2206#issuecomment-931408025);
    • similarly, all directive imports should have the .js extension specified. For instance import { styleMap } from 'lit/directives/style-map' -> import { styleMap } from 'lit/directives/style-map.js'

    Without this, build tools fail to find dependencies:

     The plugin "vite:dep-pre-bundle" was triggered by this import
    
        node_modules/.pnpm/@[email protected]/node_modules/@material/mwc-dialog/mwc-dialog.js:9:30:
          9 │ import { customElement } from 'lit/decorators';
            ╵                               ~~~~~~~~~~~~~~~~
    
    ✘ [ERROR] [plugin vite:dep-pre-bundle] Missing "./decorators" export in "lit" package
    
        node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-88bd5805.js:39941:7:
          39941 │   throw new Error(
                ╵         ^
    
    Type: Bug Focus Area: Components 
    opened by christophe-g 14
  • [mwc-textfield] Add a way to reset inputs state and value.

    [mwc-textfield] Add a way to reset inputs state and value.

    ** PLEASE READ THIS BEFORE FILING AN ISSUE **

    I'm submitting a:

    • [ ] bug report
    • [x] feature request

    We would like a way to reset the mwc-textfield/textarea back to its default state clearing any validation error that might be shown.

    We keep having to reach inside the input to remove the invalid state:

     this.input.value = '';
     this.input?.mdcFoundation?.setValid(true);
     this.input.isUiValid = true;
    
    

    😱

    Type: Feature Component: Text Field Focus Area: Components 
    opened by aarondrabeck 14
  • Horizontal scrollbar in textarea

    Horizontal scrollbar in textarea

    Is it possible to show a horizontal scrollbar in a textarea? I'm still working with v2, so that would be <mwc-textarea>.

    Setting white-space: pre on the mwc-textarea does not do anything (setting it on the inner textarea with browser tools avoids the line wrapping). overflow-x: auto does not show anything, overflow-x: scroll shows an inactive scrollbar.

    My use case is this: I have a large textarea where users are allowed to copy CSV data into. For CSV data you don't want the lines to wrap!

    opened by nicolasr75 0
  • Can't create Landing Page with TS

    Can't create Landing Page with TS

    I'm currently using Tailwindcss and when I try to remove Tailwind then start getting many errors. I'm wondering if any of the Contributors here can help me correct my profile page without Tailwindcss. Thank you!

    Repo: https://github.com/volkankaban/volkankaban

    opened by volkankaban 0
  • Add demos

    Add demos

    The first thing I want to do when I go to some UI controls is I want to see what they look like before I read walls of text or look at code. Where are the demos of the controls?

    opened by Tony20221 3
  • Implementing new Material 3(alpha) components in Angular project

    Implementing new Material 3(alpha) components in Angular project

    opened by neo-xy 0
  • chore(deps): bump decode-uri-component from 0.2.0 to 0.2.2

    chore(deps): bump decode-uri-component from 0.2.0 to 0.2.2

    Bumps decode-uri-component from 0.2.0 to 0.2.2.

    Release notes

    Sourced from decode-uri-component's releases.

    v0.2.2

    • Prevent overwriting previously decoded tokens 980e0bf

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2

    v0.2.1

    • Switch to GitHub workflows 76abc93
    • Fix issue where decode throws - fixes #6 746ca5d
    • Update license (#1) 486d7e2
    • Tidelift tasks a650457
    • Meta tweaks 66e1c28

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1

    Commits

    Dependabot compatibility score

    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
Releases(v0.27.0)
  • v0.27.0(Aug 12, 2022)

  • v0.26.1(May 9, 2022)

  • v0.26.0(May 3, 2022)

  • v0.25.3(Oct 21, 2021)

  • v0.25.2(Oct 11, 2021)

    Fixed

    • textfield
      • Change typing of step attribute to String to allow step="any" declaratively.

    Added

    • formfield
      • Forward click() calls to slotted element
    Source code(tar.gz)
    Source code(zip)
  • v0.25.1(Sep 21, 2021)

    [v0.25.1] - 2021-09-20

    Changed

    • all
      • BREAKING:BUILD underlying Lit 1 libraries updated to Lit 2
      • This may break certain builds that are transitively relying on Lit 1
      • If your Lit 1 components break due to this, make sure your package.json explicitly includes the latest Lit 1 versions of lit-html and lit-element or deduplicate your versions of Lit 1 with your bundler
      • If you wish to revert to Lit 1, please revert to version ~0.23.0

    [v0.25.0] - 2021-09-20

    npm error mid publish

    [v0.24.0] - 2021-09-20

    null version. accidentally polluted tag.

    Source code(tar.gz)
    Source code(zip)
  • v0.23.0(Sep 13, 2021)

    [v0.23.0] - 2021-09-13

    This is the last Lit 1 release. Future releases will be using Lit 2.0.0

    Changed

    • switch
      • BREAKING: Moved old switch implementation to @material/mwc-switch/deprecated
      • BREAKING: Updated switch to new Material Design spec
        • Selected and unselected states now have icons
        • Switch uses "primary" theme color instead of "secondary"
        • New custom properties have been introduced
      • BREAKING: checked renamed to selected
      • BREAKING: No longer dispatches a change event (use click events)
      • Added form support

    Fixed

    • all
      • Fixed inconsistent import styles for @material/mwc-ripple and @material/mwc-icon to reduce duplicate registration errors for those elements in certain environments.
      • Updated webcomponents polyfills to 2.6.x
    • elevation-overlay
      • Fixed invalid main and module fields in package.json.
    • icon-button
      • Fixed missing dependency on @material/mwc-base.
    • icon-button-toggle
      • Fixed missing dependency on lit-html.
    • menu
      • Fixed noninteractive ignoring --mdc-menu-item-height
    • textarea
      • Text direction follows CSS direction
    • textfield
      • Text direction follows CSS direction

    Added

    • button
      • Add ariaHasPopup property
    • icon-button
      • Add ariaHasPopup property
    • menu
      • Add innerAriaLabel property
    • BREAKING: slider
      • Initial implementation of Material 2 slider
      • Implementation is vastly different from M1 slider
    • list
      • SelectedEvent, SingleSelectedEvent, MultiSelectedEvent now exported from mwc-list-base and mwc-list files
    Source code(tar.gz)
    Source code(zip)
  • v0.22.1(Jul 14, 2021)

    Changed

    • all
      • Update sass build to match internal imports and naming
      • Switch testing from Mocha to Jasmine
      • BREAKING: Changed all instances of static get styles = styles; to be an array of [styles]
    • base
      • BREAKING: Removed findAssignedElement from utils, use @queryAssignedNodes lit decorator instead.
    • fab
      • BREAKING renderIcon currently doesn't do anything until an internal google bug is resolved

    Fixed

    • select

      • Fix setting aria-labelledby only when a label is actually provided
    • textarea

      • Fix setting aria-labelledby only when a label is actually provided
    • textfield

      • Fix firstUpdated code path to avoid a race condition in initialization with notched-outline
      • Fix setting aria-labelledby only when a label is actually provided
      • Remove definition of invalid aria-errortext attribute
    • An infinite loop caused by having both _getUpdateComplete and getUpdateComplete introduced by lit-element 2.5.0

    Added

    Source code(tar.gz)
    Source code(zip)
  • v0.21.0(May 1, 2021)

    [v0.21.0] - 2021-04-30

    Changed

    • all
      • Upgrade typescript to 4.1.4
      • Change all fields from private to protected
    • base
      • Clean up RippleInterface now that the ripple directive has been removed
      • Remove HTMLElementWithRipple interface
      • Clean up ripple property typing
    • checkbox
      • Remove underscores from internal event handler functions
    • ripple
      • Use css.declaration in ripple-theme.scss
      • Remove RippleAPI interface, merged with RippleInterface in base
      • Remove mwc-ripple-global.scss, which was only used for the ripple directive
    • menu
      • Added new closing event triggering any immediate action that must be taken without waiting for animations to finish.
      • BREAKING(VISUAL): Added a min-width of 112px to be in line with material spec.
    • select
      • Added fixedMenuPosition to allow menu overlaying in nested absolute contexts e.g. dialog.

    Fixed

    • all
      • Format sass files with prettier
    • circular-progress
      • Support setting aria-label attribute
    • dialog
      • Blocking elements will not throw if dialog is closed and removed from DOM before opening animation is completed.
      • Memory leak with document event listener
      • Only bind event listeners once in firstUpdated
    • fab
      • Added missing documentation for extended-(label|icon)-padding custom props
    • FormElement
      • FormElement checks if change event re-refiring is needed
    • icon-button
      • Fixed label property to use aria-label attribute
    • icon-button-toggle
      • Fixed label property to use aria-label attribute
    • linear-progress
      • Fixed ariaLabel property to use aria-label attribute
    • list
      • Fix issue with diff indices of different digit length
    • ripple
      • Fix IE11 errors with isActive()
      • Fix cases where hover effect is stuck when toggling disabled
    • select
      • menu not opening when disabled initially set
    • tab
      • Clean up fixture typing so that tests work when reordered

    Added

    • base
      • Add @ariaProperty decorator
    • checkbox
      • Add ariaLabel, ariaLabelledBy, ariaDescribedBy, and name properties
    • fab
      • Added --mdc-fab-focus-outline-color
      • Added --mdc-fab-focus-outline-width
    • select
      • Forwarded layoutOptions method from foundation
    • switch
      • Add ariaLabel and ariaLabelledBy properties
    • radio
      • Add ariaLabel and ariaLabelledBy
    • slider
      • Add ariaLabel and ariaLabelledBy
    Source code(tar.gz)
    Source code(zip)
  • v0.20.0(Dec 3, 2020)

    Changed

    • ripple_directive
      • Remove in favor of mwc-ripple

    Added

    • button
      • Insertion point for an elevation overlay
      • --mdc-button-raised-box-shadow-hover

    Fixed

    • textfield
      • inconsistencies of autovalidation when it's turned off.
    • Tapping on tappable components no longer triggers tap highlight
    • checkbox
      • Changed display to inline-flex to fix layout issues

    Changed

    • textfield

      • autoValidate now validates on value change rather than input
    • ripple

      • Renamed custom property --m-ripple-z-index => --mdc-ripple-z-index.
    • list

      • List items removal from DOM initiates an async layout in the managing list
      • Added itemsReady promise to the list's updateComplete
    • tab

      • Calling activate() before first render does not throw an error.
    Source code(tar.gz)
    Source code(zip)
  • v0.19.1(Oct 8, 2020)

  • v0.19.0(Oct 7, 2020)

    Added

    • button
      • Sass theming mixins added
    • base-element
      • BaseElement.click() forwards focus to BaseElement.mdcRoot
    • elevation-overlay
      • implemented elevation overlay styles
    • fab
      • reducedTouchTarget reduces the touch target on mini fab
    • form-element
      • FormElement.click() forwards focus to FormElement.formElement
    • list
      • export for ActionDetail
      • export for SelectedDetail
    • menu
      • --mdc-menu-max-height to set max height on menu
    • tab
      • export for TabInteractionEventDetail
      • fix race condition on safari

    Changed

    • fab
      • BREAKING:VISUAL default touch target increased on mini fab by 8px.
    • button
      • Separate classMap into its own method

    Fixed

    • Unpkg integration should properly dedupe after removing file extensions from imports
    • button
      • outline color should default to on-surface with 12% opacity
      • disabled outline color should default to on-surface with 12% opacity
    • fab
      • BREAKING:VISUAL vertical alignment is now all inline and up to spec.
    • icon-button-toggle
      • removed aria-hidden="true" from button
    • linear-progress
      • Fixed performance issues with indeterminate set on modern browsers
      • Animations no longer run when indicator has been closed.
    • menu
      • Fixed a wrong export of DefaultFocusState from mwc-menu.ts
    Source code(tar.gz)
    Source code(zip)
  • v0.18.0(Aug 3, 2020)

    Changed

    • fab
      • BREAKING removed --mdc-fab-box-shadow-hover; use --mdc-fab-box-shadow
      • BREAKING removed --mdc-fab-box-shadow-active; use --mdc-fab-box-shadow
      • Ripple now uses and exposes mwc-ripple's CSS custom properties API
    • icon-button
      • BREAKING now uses lazy mwc-ripple in its implementation
    • icon-button-toggle
      • BREAKING now uses lazy mwc-ripple in its implementation
    • select
      • render methods have been renamed and reorganized (breaking if extending and overriding)
    • slider
      • An upcoming change will migrate the slider to use the MDC M2 slider. In preparation for this, the MWC slider => MDC slider dependency will not be updated until the migration is complete.
    • textfield
      • render methods have been renamed and reorganized (breaking if extending and overriding)
      • remove extra space between label and required asterisk (*)
    • top-app-bar(-fixed)
      • --mdc-top-app-bar-width is now configurable

    Fixed

    • button
      • ripple will unripple when mouse/touchend happens outside of button
    • checkbox
      • Remove animation class after the animation ends to prevent replaying animations when hidden and shown, or removed and readded to the DOM
    • select
      • label will be highlighted before selected text during horizontal navigation for screen readers
      • filled variant now has a ripple
    • textarea
      • label will be highlighted before input during horizontal navigation for screen readers
      • minlength attribute is now supported
      • inputmode attribute is now supported
      • autocapitalize attribute is now supported
      • remove extra space between label and required asterisk (*)
    • textfield
      • label will be highlighted before input during horizontal navigation for screen readers
      • remove extra space between label and required asterisk (*)

    Added

    • mwc-circular-progress implemented.
    • mwc-circular-progress-four-color implemented.
    Source code(tar.gz)
    Source code(zip)
  • v0.17.2(Jul 2, 2020)

  • v0.17.0(Jul 1, 2020)

    There was an issue with dependency mismatches due to a tooling error in ^0.16.0

    Changed

    • notched-outline
      • BREAKING removed border-radius and leading-width custom properties in favor of --mdc-shape-small
    • textarea
      • BREAKING shape is now customized with --mdc-shape-small
    • textfield
      • BREAKING shape is now customized with --mdc-shape-small
    Source code(tar.gz)
    Source code(zip)
  • v0.16.1(Jun 30, 2020)

    Fixed

    • mwc-list-item
      • get rid of mobile os glow on tap
      • do not set aria-selected on incompatible roles
      • ripple will unrip if unclick or touchend is outside of list-item
    • mwc-list
      • fixed regression in list that broke mwc-select in IE or shady dom.
    • Tabs no longer focus on initialization
    • mwc-list-item ripple color will now change based off of --mdc-ripple-color on initialization
    • Fix issue where textfield would throw an error when fed a non-string value
    • list selected item will update if selected item is disconnected
    • floating-label: in both select and textfield the user no longer has to call layout when changing label or outlined

    Added

    • textarea
      • added separate internal and external character counters
    • textfield
      • added support for autocapitalize attribute
    • --mdc-drawer-width Drawer width is now configurable.
    • Added name property mwc-textfield & mwc-textarea for browser autofill.
    • ListItem.multipleGraphics list-item graphic width now configuratble for multiple graphics
    • Menu.menuCorner can now configure from which horizontal corner should the menu anchor from.
    • Add reducedTouchTarget param to mwc-checkbox to control touchscreen accessibility.
    • Typeahead on mwc-select
    • Added focusItemAtIndex(index) and getFocusedItemIndex to both list and menu
    • Add --m-ripple-z-index to control ripple z-index.

    Changed

    • radio
      • BREAKING renamed SelectionController to SingleSelectionController
      • BREAKING moved SingleSelectionController to @material/mwc-radio/single-selection-controller.ts
      • SingleSelectionController now accepts CheckableElements rather than just MWC Radio elements
    • textarea
      • BREAKING character counters are now external by default
      • BREAKING removed fullwidth variant
    • textfield
      • BREAKING removed fullwidth variant
    • BREAKING --mdc-tab-border-radius has been removed to align with spec
    • BREAKING replaced --mdc-dialog-shape-radius with --mdc-shape-medium
    • BREAKING mwc-checkbox sizing changed to 48x48 by default for touch accessibility. Disable with reducedTouchTarget attribute or property.
    • BREAKING mwc-select's fullwidth property removed since it was behaving as initially expected. Use width: 100% on the root element to accomplish fullwidth.
    Source code(tar.gz)
    Source code(zip)
  • v0.15.0(May 5, 2020)

    Added

    • Added --mdc-menu-z-index to menu-surface
    • Added surface/on-surface theme properties for mwc-switch
    • Added overrides for ripple focus and hover opacities
      • --mdc-ripple-focus-opacity and --mdc-ripple-hover-opacity respectively
    • Added spaceBetween to mwc-formfield
    • Added activated and selected states for ripple
    • Added documentation for ripple
    • Prefix and suffix to mwc-textfield
    • mwc-formfield now has a nowrap property
    • mdc-button now has --mdc-shape-small for border radii
    • Added size property to mwc-textfield
    • mwc-fab now has a slot of icons
    • Added fullwidth property to mwc-select.
    • Added minLength to mwc-textfield

    Changed

    • Refactor mwc-checkbox
      • Remove usage of MDCCheckboxFoundation
      • Replace ripple-directive with lazy mwc-ripple
    • Refactor mwc-button
      • Replace ripple-directive with lazy mwc-ripple
    • Refactor mwc-ripple
      • Normalized API to start${state} end${state} naming
    • BREAKING:VISUAL: mwc-list-item now internally uses mwc-ripple instead of styling ripple on host
    • mwc-menu's quick variant now opens synchronously
    • Convert to Sass modules
    • BREAKING removed textfield's character counter foundation directive
    • Refactor mwc-select
      • BREAKING:VISUAL internal structure of select anchor updated.
      • BREAKING naturalWidth property renamed to naturalMenuWidth for clarity.
      • BREAKING: --mdc-select-dropdown-icon-opacity and --mdc-select-disabled-dropdown-icon-opacity removed; opacity is now expressed in alpha channel of color.
      • BREAKING:VISUAL: Dropdown arrow icon motion updated.
      • BREAKING remove helperPersistent property; helper text now persistent by default if included.
    • Refactor snackbar to conform to other elements' .open .show() .close() APIs
      • BREAKING mwc-snackbar isOpen property is now called open
      • BREAKING mwc-snackbar open() method is now called show()
      • BREAKING mwc-snackbar's isOpen -> open property is now editable
    • Removed default slot from switch
    • mwc-select's button role changed to combobox

    Fixed

    • Fix property renaming issues with Closure Compiler
      • Use RippleAPI interface between RippleHandlers and mwc-ripple
      • Use RippleInterface interface for ripple-directive
    • Fix regression in textfield line color custom properties
    • Fix infinite loop bug in mwc-tab-bar when activeIndex is set in first render
    • Fixed bug in mwc-slider where initializing min and max over 100 would not set correct bounds on UI.
    • Fixed " showing up in mwc-button when the ripple activates
    • Changing an invalid textfield's validation properties to valid values will update styles automatically
    Source code(tar.gz)
    Source code(zip)
  • v0.14.1(Mar 23, 2020)

  • v0.14.0(Mar 19, 2020)

    Added

    • inputMode to mwc-textfield and mwc-textarea
    • readOnly to mwc-textfield and mwc-textarea
    • CSS custom properties for typography
    • Added autoValidate property on textfield
    • mwc-button now has a slot for icon and trailingIcon
    • BREAKING setting mwc-list-item.selected will update selection in the parent list
    • mwc-ripple now has CSS properties --mdc-ripple-color, --mdc-ripple-fg-opacity, and --mdc-ripple-hover-opacity
    • Added RippleHandlers to mwc-ripple to provide an easy integration point for calling ripple API.
    • Added light property to mwc-ripple to help style ripples on dark surfaces.
    • mwc-select can now select items by setting mwc-select.value.
    • Exposed --mdc-shape-medium on mwc-menu-surface
    • Added focusOnActivate property to mwc-tab
      • true by default, set to false to disable focusing on tab activation
    • mwc-select now has --mdc-select-disabled-dropdown-icon-color

    Changed

    • BREAKING --mdc-button-text-transform has been renamed to --mdc-typography-button-text-transform
    • BREAKING --mdc-button-letter-spacing has been renamed to --mdc-typography-button-letter-spacing
    • BREAKING --mdc-tab-text-transform has been renamed to --mdc-typography-button-text-transform
    • BREAKING:VISUAL textfield will now only validate on blur instead of input without autoValidate prop
    • BREAKING:VISUAL mwc-tab's default slot now has name icon
    • mdcFoundation and mdcFoundationClass are now optional in BaseElement.
    • Remove export * from BaseElement and FormElement.
    • BREAKING:A11Y mwc-list will no longer update items on slotchange but on first render and on list item connect meaning list dividers will only add role="separator" in those cases
    • Make FormElement and mwc-formfield support asynchronous ripple properties
    • BREAKING Remove active property from mwc-ripple.
      • Use activate() and deactivate() methods instead
    • BREAKING mwc-ripple now requires implementing event handlers manually in the parent component.
    • BREAKING Components must now import @observer manually from @material/mwc-base/observer;

    Fixed

    • Setting scrollTarget on mwc-top-app-bar will update listeners
    • Fixed sass imports of _index.scss files
    • Fixed issue with caret jumping to end of input on textfield
    • mwc-list-item now works on IE
    • mwc-select's updateComplete will now properly await child custom elements' updateCompletes
    • BREAKING Disabled icon buttons no longer have pointer events
    • mwc-textfield will not set value on the internal input tag on input event causing caret jumping in Safari
    • mwc-select's --mdc-select-ink-color actually does something now
    • Setting disabled on mwc-ripple will hide the ripple
    • mwc-menu's x and y anchor margins now work for all corners
    • mwc-select's --mdc-select-disabled-ink-color now colors the selected text
    • inconsistencies on how <contol>-list-items' state of controls and element
    • list sets initial tabindex when initialized with noninteractive and then set to false
    Source code(tar.gz)
    Source code(zip)
  • v0.13.0(Feb 4, 2020)

    [0.13.0] - 2019-02-03

    Added

    • End-alignment to mwc-textfield and mwc-textarea
    • Implemented:
      • mwc-select
      • mwc-menu
      • mwc-menu-surface
      • mwc-list
      • mwc-list-item
    • Base / utils.ts
      • isNodeElement - performant node -> element checking
      • deepActiveElementPath - finds the deepest activeElement node
      • doesElementContainFocus - determines is ancestor of activeElement
    • mwc-radio.global - groups radios across document rather than shadow root
    • Style underline of filled textfield
      • --mdc-text-field-idle-line-color
      • --mdc-text-field-hover-line-color

    Fixed

    • Fixed mwc-dialog not removing keydown event listener on close.
    Source code(tar.gz)
    Source code(zip)
  • v0.12.0(Dec 17, 2019)

    [0.12.0] - 2019-12-16

    Changed

    • BREAKING:VISUAL Wrap mwc-button label in a slot
    • Remove mwc-button border-radius from ripple
    • Make mwc-button internal button overflow none

    Added

    • Added custom properties to style mwc-radio's colors
    • CSS styling options to mwc-tab
    • active attribute to mwc-tab when (de)activated
    • Added custom properties to style mwc-checkbox's colors
    • Added show and close methods to mwc-dialog

    Fixed

    • BREAKING:VISUAL mwc-tab will now automatically size slotted images. Also slotted image will override icon font.

    Changed

    • BREAKING mwc-tab can now only have slotted content via the hasImageIcon flag.
    • BREAKING:VISUAL mwc-checkbox default display is changed from inline to inline-block.
    Source code(tar.gz)
    Source code(zip)
  • v0.11.1(Nov 27, 2019)

  • v0.11.0(Nov 26, 2019)

    Added

    • CSS styling options to mwc-button
    • CSS styling options to mwc-textfield
    • README for mwc-drawer
    • README for mwc-checkbox
    • README for mwc-formfield
    • Demo for mwc-drawer without a header in the drawer
    • --mdc-icon-button-size and --mdc-icon-size to mwc-icon-button

    Changed

    • BREAKING Dialog.title renamed to Dialog.heading and --mdc-dialog-title-ink-color renamed to --mdc-dialog-heading-ink-color as it caused clashes with HTMLElement.prototype.title.
    • Updated material dependencies to 4.0.0-canary.735147131.0.
    • BREAKING Slider.discrete removed and Slider.pin added.
    • mwc-dialog will now search its flattened distributed nodes and their trees for a focusable element.
    • BREAKING mwc-slider now emits bubbling and composed input and change events instead of MDCSlider:input and MDCSlider:change.
    • BREAKING:VISUAL the digits inside the Slider's pin will be rounded to at most 3 decimal digits.
    • BREAKING LinearProgress.determinate = false removed in favor of LinearProgres.indeterminate = false.
    • BREAKING LinearProgress.buffer = 0 default value changed to 1.
    • BREAKING:VISUAL mwc-linear-progress had --mdc-theme-secondary applied to its buffer bar's background color. This custom property's name was changed to --mdc-linear-progress-buffer-color.
    • BREAKING:VISUAL the digits inside the Slider's pin will be rounded to at most 3 decimal digits.
    • BREAKING LinearProgress.determinate = false removed in favor of LinearProgres.indeterminate = false.
    • BREAKING LinearProgress.buffer = 0 default value changed to 1.
    • BREAKING:VISUAL mwc-linear-progress had --mdc-theme-secondary applied to its buffer bar's background color. This custom property's name was changed to --mdc-linear-progress-buffer-color.
    • BREAKING mwc-icon-button will now use its default slot for <img> or <svg> icons instead of a named "icon" slot.

    Fixed

    • Fixed checkbox ripple visibility when focused while being unchecked.
    • Fixed app content not being expanded inside drawer.
    • Fixed issue where slider when resized or scrolled will not respond to touch as expected.
    • Fixed issue where mwc-ripple would not ripple when parent was a shadow root
    • BREAKING:VISUAL Fixed sizing of the mwc-icon-button in mwc-snackbar
    • Fixed mwc-icon-button icon at end layout.
    • mwc-slider can now have its pin and markers added and changed dynamically.
    • Fixed mwc-icon-button icon at end layout.
    • mwc-slider can now have its pin and markers added and changed dynamically.
    • Fixed mwc-dialog race-condition bug with the blocking elements polyfill that could occur if the dialog was disconnected before it had finished opening.
    • Fixed mwc-button alignment issues when some buttons have icons and others do not.
    Source code(tar.gz)
    Source code(zip)
  • v0.10.0(Oct 16, 2019)

    Added

    • mwc-textfield ink and fill css variables

    Changed

    • BREAKING Removed mwc-icon-font.js import. Most users should load the Material Icons and Roboto fonts by adding the following to their HTML file:

      <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
      <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
      

      See the Fonts section of the README for more details.

    • BREAKING Moved @material/mwc-textfield/character-counter/mwc-character-counter-directive.js to @material/mwc-textfield/mwc-character-counter-directive.js.

    Fixed

    • Fixed mwc-dialog's issues with working on older browsers.
    • <mwc-radio> groups are now correctly synchronized when stamped using a lit-html map or repeat, and any other time the radio is not created and connected at the same time (#282).
    Source code(tar.gz)
    Source code(zip)
  • v0.9.1(Oct 16, 2019)

  • v0.9.0(Sep 27, 2019)

    Added

    • Implemented mwc-dialog
    • mwc-textfield.layout method.

    Changed

    • BREAKING: Added custom .focus() and .blur() functions to mwc-button that cause the button to ripple as when tab focusing.
    • BREAKING: mwc-textfield's custom .focus() function will now call .focus() on the native internal input causing the caret to appear instead of just forcing focus styles to appear.
    • BREAKING: mwc-textfield's custom .blur() function will now call .blur() on the native internal input instead of just forcing focus styles to disapprear.
    • BREAKING mwc-base/base-element no longer exports any of the lit-element or lit-html APIs (e.g. LitElement, customElement, classMap). Users should import directly from the lit-element and lit-html modules instead.
    • BREAKING mwc-textfield and mwc-textarea will now update their .value on the native input's input event instead of change.

    Fixed

    • <mwc-drawer> can now be used with Rollup (via version bump to pick up WICG/inert#135).
    • <mwc-textfield> and <mwc-textarea> will now have the same height between their filled and outlined variants with helper text on older browsers.
    • mwc-textfield[required] and mwc-textarea[required] will now have their required asterisk colored correctly when customized.
    • <mwc-textfield> and <mwc-textarea> can now have basic usability in IE.
    • mwc-textarea[disabled][outlined] will no longer have a filled-in background as is per material spec.
    • mwc-textarea[disabled]label="string!"][value="string!"] will now float the label to the correct spot.
    Source code(tar.gz)
    Source code(zip)
  • v0.8.0(Sep 4, 2019)

    Changed

    • Published JavaScript files no longer include inlined TypeScript helpers such as __decorate. Instead, helpers are now imported from the tslib module dependency. This reduces code size by allowing multiple components to share the same helpers, and eliminates "this has been rewritten to undefined" errors from Rollup. (#439)

    • BREAKING Renamed component base modules: (#440):

      • icon-button-toggle-base.tsmwc-icon-button-toggle-base.ts
      • icon-button-base.tsmwc-icon-button-base.ts
      • top-app-bar-fixed-base.tsmwc-top-app-bar-fixed-base.ts
    Source code(tar.gz)
    Source code(zip)
  • v0.7.1(Aug 28, 2019)

  • v0.7.0(Aug 27, 2019)

    Added

    Changed

    • BREAKING The Material Icons font is no longer loaded automatically (#314). This allows more control over how fonts are loaded (e.g. serving fonts from a different server, or loading multiple fonts with a single request). Most users should now add a tag like this to their HTML page:

      <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
      <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
      
    • BREAKING The toggling behavior of <mwc-icon-button> has been removed (i.e. offIcon), and is now instead supported by the dedicated <mwc-icon-button-toggle> component (#370).

    • BREAKING The short layout for <mwc-top-app-bar> has been removed, and is no longer supported because it is not part of the Material Design specification (#422).

    • BREAKING The fixed layout for <mwc-top-app-bar> has been removed, and is now instead implemented by the dedicated <mwc-top-app-bar-fixed> component (#379).

    Fixed

    • Fixed bug where <mwc-snackbar> open method threw if called immediately after construction (before firstUpdated) (#356).
    • Fixed bug where setting the <mwc-snackbar> labelText property could throw an exception and fail to render (#412).
    • Buttons slotted into <mwc-snackbar> now render with the correct default styles (#354).
    • Fixed layout issue affecting scrolling <mwc-tab-bar> in Firefox (#349).
    • Fixed bug where <mwc-icon> icons did not render in IE11 (#353).
    • Fixed bug where setting the checked property on an <mwc-radio> did not result in the other radios in the group becoming unchecked (#373).
    • Fixed bug where <mwc-drawer> did not work in IE (WICG/inert#129).
    • Fixed dense and prominent styling bugs in <mwc-top-app-bar> (#379).
    Source code(tar.gz)
    Source code(zip)
  • v0.5.0(Mar 26, 2019)

Owner
Material Components
Build beautiful, usable products with Material Components for Android, Flutter, iOS, and the web.
Material Components
A component library based on Material Design 3 & Web Components

material-web-entity Material Web Entity A component library based on Material Design & Web Components Go to link to see what components this library s

HugePancake 5 Jun 3, 2022
Providing accessible components with Web Components & Material You

tiny-material Still on developing, DO NOT use for production environment Run well on Google Chrome, Firefox, Chrome for Android, Microsoft Edge (Chrom

HugePancake 11 Dec 31, 2022
A set of React components implementing Google's Material Design specification with the power of CSS Modules

React Toolbox is a set of React components that implement Google's Material Design specification. It's powered by CSS Modules and harmoniously integra

React Toolbox 8.7k Dec 30, 2022
A frontend Framework for building B2B applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Material Design

react-admin A frontend Framework for building data-driven applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Materi

marmelab 21.2k Dec 30, 2022
Material Design Lite for Ember.js Apps

ember-material-lite Google's Material Design Lite for Ember.js apps This addon requires ember >= 1.11.0 Installation # ember-cli < 0.2.3 ember install

Mike North 148 Dec 17, 2021
Ember implementation of Google's Material Design

No longer maintained This project is no longer maintained. For an up-to-date material design project, please use Ember Paper. Ember-material-design Th

Mike Wilson 121 Mar 1, 2022
Minimal Design, a set of components for Angular 9+

Alyle UI Minimal Design, a set of components for Angular. Docs Install Alyle UI Installation Components Feature State Responsive Docs avatar ✔️ ✔️ Doc

Alyle 281 Dec 25, 2022
A React utility belt for function components and higher-order components.

A Note from the Author (acdlite, Oct 25 2018): Hi! I created Recompose about three years ago. About a year after that, I joined the React team. Today,

Andrew Clark 14.8k Jan 4, 2023
we are make our components in story book. So if we add some components you can find document and example of useage in storybook.

we are make our components in story book. So if we add some components you can find document and example of useage in storybook.

고스락 6 Aug 12, 2022
Nextjs-components: A collection of React components

nextjs-components A collection of React components, transcribed from https://vercel.com/design. 1 Motivation Blog post from 01/09/2022 Todo's Unit tes

null 94 Nov 30, 2022
Wall Covering Calculator and Material Procurement Portal

Wall-Pro MPP --Wall Covering Calculator and Material Procurement Portal-- Table of Contents: Links Description UserStory DevelopmentTeam Installation

Mike Bussert 4 Jul 7, 2021
İnstagram Clone.You can sign in, sign up, upload image, make comment 📷 Used ReactJS, Material UI, Firebase, Firestore Database

?? instagram-clone This is a instagram clone. You can sign in, sign up, upload image, make comment ?? ⚡ LIVE To check out the live demo of this app AB

null 22 Apr 20, 2022
Soft UI Dashboard React - Free Dashboard using React and Material UI

Soft UI Dashboard React Start your Development with an Innovative Admin Template for Material-UI and React. If you like the look & feel of the hottest

Creative Tim 182 Dec 28, 2022
👉 Built my first React JS project "ToDo" webapp using some Features and Icons from Material UI.

# Getting Started with Create React App This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). ## Avai

Vansh Chitlangia 2 Dec 15, 2021
Worldwide-covid-statistics - covid-19 tracker developed using Reactjs, Axios , chartjs, material icons

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Akinmegha Temitope Samuel 1 Jan 3, 2022
Bdc-walkthrough - An Angular Material library for displaying walk-through pop-ups and dialogs using a declarative way.

Material walk-through library An Angular Material library for displaying walk-through pop-ups and dialogs using a declarative way. Show Demo Prerequis

Broadcom Inc 65 Dec 14, 2022
A beautiful and easy in hand blog made by Next.js Material-ui

Material-blog A beautiful and easy in hand blog made by Next.js Material-ui! Deploy your own Deploy the example using Vercel: Usage Install node_modul

Willie Xu 1 Mar 3, 2022
A PhotoShot Plugin to get material you colors easily.

material-you 可以快速获取符合 material-you 配色的 PhotoShop 插件。 参考自 Material Theme Builder 安装 初次安装 从 release 中下载压缩包并解压。打开 Photoshop ,运行 文件-脚本-浏览 ,选择安装包中的 安装脚本.js

周财发 4 Jun 17, 2022
Quick study on NextJs + Material UI

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Davi Nascimento 3 Jun 29, 2022