Why does the input size change?

@finnhvman Are you planning on implementing Unelevated Buttons as per https://material.io/design/components/buttons.html#

I ask because the drop-shadow used with contained buttons is an issue if the element the button is inside of, doesn't have sufficient margins to display the box shadow, causing it to be clipped as shown here.

In this particular use case an unelevated button would be better UX IMO.

@finnhvman I've just realized that both checkbox and radio buttons use the user agent stylesheet for their unchecked/unset state which doesn't seem right to me. I would have thought they'd use --matter-helper-theme which is what the checked and indeterminate states use. ie.

.matter-checkbox > input[type="checkbox" i] {
    border-color: rgb(var(--matter-helper-theme));
}

https://lh3.googleusercontent.com/Q0IBZ9UnqG16so-3Y9lhU_fJBm33fuoovX3N2FdhX9pR2_fAGGIDP2z2944TmLMn8rwpBQn8kTd-z6UDysPQKrsIWo13rNSDpO2tAw=w1064-v0
I think the disabling effect here is deviating from the google design material

Add cards component ex-https://codepen.io/DiEH/pen/jOPPzLV

It would be great if Matter could be published in the npm registry, so that we could also install it using the package manager rather than downloading it manually to include it in the project

Using the version hosted in cloudinary is not an option for me, as I'm building a tool aimed at big companies which regularly enforce a whitelist for access to domains so limiting the use of third-party assets is a must for such case. And downloading manually again each time there is an update is more work than having it part of the yarn upgrade.

The circular progress with class matter-progress-circular, seems to be working fine.

<progress class="matter-progress-circular"></progress>

But with specified values, it doesn't work as expected:

<progress class="matter-progress-circular" value="60" max="100"></progress>

Can you please guide?

Have you heard of Surface CSS-only Material Design framework. Why don't you combine it with Matter and base your missing components on Surface?

Is this project alive?

@finnhvman matter buttons correctly include text-transform: uppercase; which matches the MD spec.

However after checking a variety of Google apps that supposedly implement MD, few if any buttons use upper case text.

Desktop apps I checked include GMail, Drive, Photos etc. On Google's Mobile apps buttons are scarce.

My "personal preference" is not to force upper case, and of course I can add another class to override this, however I'm curious as to your thoughts.

The pages on the Google DNS website use Matter.

When I have a matter-switch without any <span>_text_</span> the vertical position of the switch is moved way up as shown below.

Using a Space for text doesn't fix this and   displays  

I was actually trying to put the switch inside the button when I first saw this.

I assume checkbox's etc. have the same issue.

I made some changes in CSS to make it RTL.
But I have a problem with browsers.

In chrome 78 :

But in 79:

CSS File:
matter-rtl.css.zip

I have this problem with firefox too.

Hi,

A very good library thank you. I am using webpack and I can't include the library as usage of var in your css.

Would you be able to create a sass (scss) version of this library? I believe it will make the library even more popular.

Matter Version 2 checklist

• Improved support for dark/light themes
• Better documentation
  • Standalone documentation website
  • One-click copy-paste examples for frequent use-cases
  • Example pages built with Matter components, i.e. https://codepen.io/finnhvman/pen/jQbVeR
• More distribution channels
  • custom builds (include only wanted components)
  • publish to npm
• Add new components
  • Slider
  • FAB
  • Dialog
• Accessibility
  • Audit WCAG 2.1 compliance
  • Prepare for WCAG 2.2 (expected in June 2022)
• Automated cross-browser testing
• Adherence to Material Design 3

Hello, is there any preview of the select element and input size as bootstrap .input-lg, .input-sm, .col-lg- *, and .col-sm- *

You can use now.sh with Github integration to automatically get free and updated website. Or something else, but an interactive demo would be really welcome :)

The manner in which these tooltip are created results in unexpected verbosity and announcements with screen readers.

Testing with VoiceOver on macOS, and NVDA & JAWS + Firefox, each test announces "small help" twice. Once as an accessible name for the content they're applied to, a second time as the content the :after pseudo element adds to the DOM.

Additionally, JAWS and NVDA interpret the label of the input to just be "small help", as aria-label is overwriting the input's intended accessible name from the label element's text.

VoiceOver on macOS promotes the elements which have aria-labels to groups, resulting in unexpected VO focus stops.

For more information on how these tooltips could be revised to be more accessible, see this article on tooltips / toggle tips.

Thanks!

@finnhvman You say

Components can be resized fluidly to match layout needs, otherwise they take up the size necessary.

Can you write up some guidelines how how we should actually do resizing.

For example matter buttons have min-width, height and line-height specified. So they don't actually take up the size necessary. Should we override all three of these.

Some css libs offer small, large etc. style overrides. Is this something you might add to a future release?

Please can you add cards component ?

This is a great library, but it's useful to have a demo which shows all the options and example source to generate them, it would be great to include one and link it from README.md.

Until there's an official one, I threw together https://codepen.io/arantius/full/eYJgpjV which I think covers all the features, based on the *.spec.html files in the source.

Please include slider to bundle.

Hi,

This is great work.

Can you add support for the list and the table, please?

How can i change default colors?
I cant understand this color code
.matter-warning { --matter-theme-rgb: var(--matter-warning-rgb, 238, 102, 0); --matter-ontheme-rgb: var(--matter-onwarning-rgb, 255, 255, 255);

I want change warning because not near yellow color bootstrap