{"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"873e0e8596d9aeaee44d4c669f55bd938284b80d","tarball":"https://registry.npmjs.org/@material/list/-/list-0.35.0.tgz","fileCount":7,"integrity":"sha512-H8F2ej4nnnKXVV6JmR+i8/aA8wkp/i1uslU6RmNC7+E2aeyEiKdk2xOEuq9JdQjgm4zJyIA6jYSr2CQVVdhBuw==","signatures":[{"sig":"MEQCIHsVKQde77s97ZoAqCfGlu+6ZxG/DJUsEKjEpSi1F2sAAiBD5zaSbiwFJYXsf7SZpHg9EzXQ6cfjodO8HG8WP8bqOg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":42350,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa3mDdCRA9TVsSAnZWagAAMGYP/RZxgs9Ygdkukri6q0RN\nFu/W37pHntixGVc+Y43DGaJ8KKS8Edd6PrPhfnc5dAf3iwZXIjdmgcCgm+Up\noMX2qCUWTzWdP0bRbHrlh4bYStw0aKiAl+ozj+r8Obqdg56yHb7RGPw997iQ\nYHLF1nWbx8jdNXm0d228LeynuLscy/0IFl/iOzBdT6sanHqX6XstbdQ+lS86\n94cYaRaF1XEx8i6Q8lMZzHzzVtQ2UwbiAkLTKjxq9WnEzmBhJObX81mWoFeJ\nnnUwjSAuUJk1wYkbSQWn1fRq+mlrALcPGWouHH781lDOCbMEW1iTwc3bsKlt\njlYPPi3fMMGJ3HPLvaeE6KevKiFIxBP4lK8kRXfpHbo9n99OZ98fTepnYr3H\nv9KfrVtOCElk1TQauEnsIRPX66P5KH1iNTtPWBVQ9Dk2o9vvfpAHxWNvNVfN\n/J0Ah1DkB6sJ6pktZwyvyq1PxCZ4GVXGrgv5QYOzH7IS1MDRRIU0utSdKjA+\n5ocqlfP+4zoNixKDfSCL/ZI8BR9hq13RkSigZNX5lHc5BFzi9o2C6jB9uVAF\nkA+VnsY2CoAVt2XjVIZXpH2uvnQ+Psz+XBYMrXQgkHKWcDGHIypNxwAdEcLE\nPV9u+WnUhg4olx8WuqKwFjJQLWqjJSa/6kOjGotc7wu1vWTBVk6z5k8irsPj\nH78r\r\n=XtIa\r\n-----END PGP SIGNATURE-----\r\n"},"name":"@material/list","readme":"\n\n# Lists\n\n\n\nMDC List provides styles which implement [Material Design Lists](https://material.io/guidelines/components/lists.html) -\n\"A single continuous column of tessellated subdivisions of equal width.\" Both single-line and two-line lists are\nsupported (with three-line lists [planned](https://github.com/material-components/material-components-web/issues/31)).\nMDC Lists are designed to be accessible and RTL aware.\n\n## Design & API Documentation\n\n\n\n## Installation\n```\nnpm install @material/list\n```\n\n## Usage\n\n### HTML Structure\n\n#### Single-Line List\nA basic list consists simply of the list itself, and list items taking up one line.\n\nList items (rows) can contain primary and secondary actions. Lists items can contain 1 supporting graphic tile and/or 1 metadata tile that are positioned at the start and end of the list item, respectively.\n\n\n```html\n\n```\n\n#### Two-Line List\nWhile in theory you can add any number of \"lines\" to a list item, you can use the `mdc-list--two-line` combined with some extra markup around the text to style a list in the two-line list style as defined by [the spec](https://material.io/guidelines/components/lists.html#lists-specs) (see \"Two-line lists\").\n\n```html\n\n```\n\n#### List Groups\nMultiple related lists can be grouped together using the `mdc-list-group` class on a containing element.\n\n```html\n
\n

List 1

\n \n\n

List 2

\n \n
\n```\n\n#### List Dividers\nMDC List contains an `mdc-list-divider` class which can be used as full-width or inset subdivisions either within lists themselves, or standalone between related groups of content.\n\n```html\n\n```\n\n> NOTE: the role=\"separator\" attribute on the list divider. It is important to include this so that assistive technology can be made aware that this is a presentational element and is not meant to be included as an item in a list. Note that separator is indeed a valid role for li elements.\n\nOR\n\n```html\n\n
\n\n```\n\n### CSS Classes\nCSS Class | Description\n--- | ---\n`mdc-list` | Mandatory, for the list element\n`mdc-list--non-interactive` | Optional, disables interactivity affordances\n`mdc-list--dense` | Optional, styles the density of the list, making it appear more compact\n`mdc-list--avatar-list` | Optional, configures the leading tiles of each row to display images instead of icons. This will make the graphics of the list items larger\n`mdc-list--two-line` | Optional, modifier to style list with two lines (primary and secondary lines)\n`mdc-list-item` | Mandatory, for the list item element\n`mdc-list-item__text` |\tOptional, primary text for the row (displayed as middle column of the list item)\n`mdc-list-item__secondary-text` | Optional, secondary text for the list item. Displayed below the primary text. Should be the child of `mdc-list-item__text`\n`mdc-list-item--selected` | Optional, styles the row in an selected* state\n`mdc-list-item--activated` | Optional, styles the row in an activated* state\n`mdc-list-item__graphic` | Optional, the first tile in the row (in LTR languages, the first column of the list item). Typically an icon or image.\n`mdc-list-item__meta`\t| Optional, the last tile in the row (in LTR languages, the last column of the list item). Typically small text, icon. or image.\n`mdc-list-group` | Optional, wrapper around two or more mdc-list elements to be grouped together\n`mdc-list-group__subheader` |\tOptional, heading text displayed above each list in a group\n`mdc-list-divider` | Optional, for list divider element\n`mdc-list-divider--padded` | Optional, leaves gaps on each side of divider to match padding of `list-item__meta`\n`mdc-list-divider--inset` | Optional, increases the leading margin of the divider so that it does not intersect the avatar column\n\n> NOTE: `mdc-list-divider` class can be used between list items (example 1) *OR* between two lists (example 2)\n\n> NOTE: the difference between selected and activated states:\n\n* *Selected* state should be implemented on the `.list-item` when it is likely to change soon. Eg., selecting one or more photos to share in Google Photos.\n* Multiple items can be selected at the same time when using the *selected* state\n* *Activated* state is similar to selected state, however should only be implemented once within a specific list.\n* *Activated* state is more permanent than selected state, and will **NOT** change soon relative to the lifetime of the page.\n\n### Sass Mixins\nMixin | Description\n--- | ---\n`mdc-list-item-primary-text-ink-color($color)` | Sets the ink color of the primary text of the list item\n`mdc-list-item-secondary-text-ink-color($color)` | Sets the ink color of the secondary text of the list item\n`mdc-list-item-graphic-fill-color($color)` | Sets background ink color of the graphic element within list item\n`mdc-list-item-graphic-ink-color($color)` | Sets ink color of the graphic element within list item\n`mdc-list-item-meta-ink-color($color)` | Sets ink color of the meta element within list item\n`mdc-list-divider-color($color)` | Sets divider ink color\n`mdc-list-group-subheader-ink-color($color)` | Sets ink color of subheader text within list group\n","license":"Apache-2.0","_npmUser":{"name":"bonniez","email":"bonniez@google.com"},"homepage":"https://github.com/material-components/material-components-web#readme","keywords":["material components","material design","list"],"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.6.0","description":"The Material Components for the web list component","directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_nodeVersion":"8.7.0","dependencies":{"@material/rtl":"^0.35.0","@material/theme":"^0.35.0","@material/ripple":"^0.35.0","@material/typography":"^0.35.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/list_0.35.0_1524523228365_0.8588572267878087","host":"s3://npm-registry-packages"},"_id":"@material/list@0.35.0","version":"0.35.0"}