Is it possible to add some sort of visual indicator on the checkbox aside from just changing the mouse cursor?

This would be helpful especially when the checkbox is ticked as there is no border around the checkbox it feels like we have to aim closer to trigger.

If a range was the touch start, and the user scrolled on the Y axis, then the range is disabled from working. Look into ways to improve dragging the slider (range element) on touch devices.

Radio buttons, icon buttons, and checkboxes all need to support an ink effect. For example, the checkbox should support:

<material-checkbox selected="true">
  <material-ripple class="center recenteringTouch"></material-ripple>
</material-checkbox>

In tabs, the ink ripple will fill the size of each tab button area. For the above buttons, however, tabs will not fill a parent container... instead inks will be sized and positioned with respect to the button element.

It'd appear the the html is rendering content part in the material-toolbar section:

<material-toolbar class="material-theme-dark material-tall"><div class="material-toolbar-inner" ng-transclude="">
    <div class="material-toolbar-tools ng-scope">
      <div class="material-flex">
        <div class="material-input-group-theme-light material-input-group-inverted material-input-group ng-isolate-scope" fid="t1"><label for="t1">Description</label><input id="t1" type="text" ng-model="data.description" class="ng-pristine ng-valid"></div>
        <div class="material-input-group-theme-light-blue material-input-group-inverted material-input-group ng-isolate-scope" fid="t2"><label for="t2">Description</label><input id="t2" type="text" ng-model="data.description" class="ng-pristine ng-valid"></div>
      </div>
    </div>
  </div>
</material-toolbar>

I'm not sure whether this is a server tweak or a payload issue. Once the site loads into cache, speed is good.

For example, here: 18f359f#L1

It should be //ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.9/angular-route.js

When I load a route with AngularJS and the controller makes a service call for some data to add to the scope, the input fields for the material-forms fail to show properly.

HTML Partial:
https://gist.github.com/brutalhonesty/a516c5d87336f73f9241
Controller:
https://gist.github.com/brutalhonesty/d46da5ad51dd2a20ec13

How I expect it to look with the service call populating the ng-model:

How it actually is:

• checkbox animation is offset
• whiteframes need work
• sliders and tabs are condensed

[needs a full review]

http://www.google.com/design/spec/style/color.html#color-ui-color-palette

Aside from the CDN-served scripts, we should catenate and minify the JavaScript, then replace references in the HTML to the single catenated minified script.

Specification: Sliders

Add the option for floating markers above the range thumb.

If I don't set an active tab and I don't put a selected attribute on the parent material-tabs, the first tab should be selected by default.

Text should crib from the README.md. How about this:

Material Design[link] is a specification for a unified system of visual, motion, and interaction design that adapts across different devices.

The material design project for Angular is a complementary effort to the Polymer[link] project's paper elements[link] collection. Our goal is to provide a set of AngularJS-native UI elements that implement the material design system. This demo is a work in progress.

For more, see our repository on github[link].

The demo site is not reflecting Typography guidelines
with respect to Characters per line lengths.
http://www.google.com/design/spec/style/typography.html#typography-standard-styles

Especially when the site is on a wider screen,
the content text has no container to limit it
to a sensible width.

The Google Material Design website, in contrast, does follow this guideline.

I suppose there are three options for this:
re-invent a framework like Bootstrap with its grid system concept,
have people roll their own grid-like framework, or actually use such
a framework like Bootstrap in the demo system. My suspicion
is, whether they should or should not, many people will try to integrate
Bootstrap grids into this system. Perhaps the pending guidelines for
this project will give direction here...

Also, the demo site does not appear to be reflecting Typography guidelines
with respect to spacing of typographic elements relative to their
containers.
(a) There appears to be insufficient padding on the left side of text elements.
This sticks out especially when the left side navigation has a large drapshadow,
as the text almost becomes dirty.

(b) Text elements are not aligned.
Compare left nav of demo site:

vs. left nav of Goolge Material Design website:

Hi,

I have been looking through this repo and the docs but I didn't find any notes on how to get this working.

See the radioButton/demo - the second sample using:

 <material-radio-group>

        <material-radio-button ng-repeat="d in radioData">
            <input type="radio" ng-value="d.value" ng-model="data.group1">
            {{ d.label }}
        </material-radio-button>

    </material-radio-group>

This code somehow interferes with the sizing of the ink ripple.

Yellow highlight appears to start from the center of tab.

cross-hatching when a slider is selected.
disc doesn't go back to small again when released.

The material-tab element has the cursor: pointer property.

This results in an awkward situation when a tab is set to disabled.

Hovering over the text will indicate the link is disabled...

...but hovering anywhere outside the text on the disabled material-tab gives the indication of a hover event, and thereby tends to give the impression that the link in fact is active.

On mobile, when you hit the button to have to the sidebar navigator slide in, tapping the bit of the content viewport on the right side of the screen does not dismiss the sidebar navigator as expected.

If I have material-tabs with a default selected tab, the ink doesn't show up until I click a tab.

<material-tabs selected="0">
  <material-tab label="No ink until I click!"></material-tab>
</material-tab>

I thought I caught most of these before we went live with the site, but it looks like I missed some. Right now we use a mix of minified and unminified links to the angular (and related) library. These should be updated to only use the minified version from the CDN.

For left and right popouts in demo

My contribution to #16...

When I tab over the controls I expect to be able to visually tell which control has focus, but I can't. I didn't see any controls that had focus styles so this seems to be a problem across the board, not with any particular control.

We have a CONTRIBUTING.md file, but it does not have any legalese for handling licensing of community contributed content.

This is a placeholder as I'm not sure what we want to do on this front.

Each demo should support a Show Source button to use the popup dialog (or other mechanism) and render highlighted source code for the current demo. Ideally, each demo folder will have a source.html which will contain the desired source and css and javascript that should be displayed as demo source.

The root index.html file does not have a title tag.

We have some work to do on accessibility. This is really a placeholder issue until we have done the audit and can file component-specific issues.

As much as possible, we serve over HTTPS.

Use //some.url.angularjs.org instead of http://some.url.angularjs.org or https://some.url.angularjs.org.

I think it's in the dialog demo.

If slider progrès is zero; User cannot change the progress value in iPad browser

Add the same swipe functionality behavior as ion-side-menus to open sidenav not just with click but with swipe left (or right)

Awesome work!

@btford one of your tweaks to the server seems to have broken the images in dist/ They look fine unminified under docs/app -- can you investigate?

You might wanna remove the console.log in materialRadioGroupDirective. It might also be good to add a warning during build for this kind of thing.

The icons have disappeared with the latest publish,
and there appears to be a "failed to instantiate module" error.

https://material.angularjs.org/#/component/material.components.icon

It seems the proper implementation for the tab indicator height (at least when viewing on a standard desktop) would be 2px rather than the 4px currently in place.

Compare the sleeker tab indicator of the Google site:

...with the bigger tab indicator on the angular/material demo site:

The bigger tab indicator does not seem to mesh with the design spec or
appear as aesthetically clean.

Changing the material-ink styling from 4px to 2px results in a look closer to the spec.

material-ink {
    height: 2px;           /* previously 4px */
    background: #ffff85;
    position: absolute;
    margin-top: -2px;      /* previously -4px */
}

https://github.com/angular/material/blob/master/src/theme/_colors.scss#L357

$color-grey-500 should be $color-grey

The View Source modal looks to be broken with the latest publish.

In the built site, we still reference *.css rather than *.min.css

Affects card and tab demos